face_classification—服务端(flask)+web端上传图片

服务端
利用Python进行图片发送与接收的两种方法—包含客户端和服务器端代码
****：
h5移动端：template的目录路径下
目的：实现h5移动端可加载图片。canvas可触摸展示，拖拽，放大缩小的功能;—>同时可裁剪指定区域，进行图片上传。
js库参考:
img-touch-canvas //图片触摸放大，缩小功能
canvas-zoom //地图上的，图片放缩功能，支持android-native
imgUpload //基于canvas图片剪裁，并上传base64码。支持本地预览、拖动、放大缩小等操作。
img-touch-canvas.js核心及改写：
解决不同比例图片操作中的居中问题：
在this.position和this.scale之间，定义一个变量：

this.img_y=0;

在animate：function下赋值为

this.img_y=this.canvas.height/2-this.imgTexture.height*scaleRatio/2;//当图片高度大于宽度时，使图片垂直居中
this.position.y=this.img_y;```

边缘检测修改增doZoom:function删掉以下代码

        //    if( newPosY + newHeight < this.canvas.clientHeight ) { 
        //      newPosY = this.imgTexture.height - newHeight; }

domove:function增加：

else{
                if(this.position.y >this.img_y){
                    this.position.y =this.img_y;
                  }else if(this.position.y + currentHeight < (this.canvas.clientHeight-this.img_y)) {
                    this.position.y = this.canvas.clientHeight - currentHeight-this.img_y;
                }
              }

animate的核心函数

this.context.drawImage(
                this.imgTexture, 
                this.position.x, this.position.y, 
                this.scale.x * this.imgTexture.width, 
                this.scale.y * this.imgTexture.height);
//setEventListeners绑定touchstart,move等事件===》通过requestAnimationFrame调用drawimage
            requestAnimationFrame(this.animate.bind(this));

canvas-zoom核心及相关
adaption的适配：主要解决放大缩小时，边框，text等信息的适应问题
本h5应用引入了response.js，所以currentHeight 和pageheight的获取到的值是相等----->scaleAdaption（缩放适配） =1

            this.scaleAdaption = currentHeight / pageHeight;
            var pageWidth = parseInt(indoormap.getAttribute("width"));  //750 可理解为实际的宽度对应于response设置的‘宽度’=canva.clientwidth
             currentWidth = document.documentElement.clientWidth;  //value 414，

positionadaption（位置适配）

this.positionAdaption = {
            x: (parseInt(currentWidth) - parseInt(indoormap.getAttribute("width"))) / 2,
            y: (parseInt(currentHeight) - parseInt(indoormap.getAttribute("height"))) / 2
        };

            DrawMapInfo(this.scale.x * this.scaleAdaption, this.scale.y * this.scaleAdaption, this.position.x + this.positionAdaption.x, this.position.y + this.positionAdaption.y);   //

解决边框相对于背景图像的定位问题：
当背景图像放大时，前景边框等不能对齐的问题：

参数 MAPINFO[i].x * scaleX + offsetX： MAPINFO数组元素i的x坐标*手势操作后的放大量+背景图像positioin.x（左上角顶点）。
所以offsetx为this.position.x,**scaleX **为this.scale.y

drawmapInfo相关代码如下（大家自己理解）：

               for (i = 0; i < MAPINFO.length; i++) {
                DrawBlock(
                MAPINFO[i].x * scaleX + offsetX,                  
                  //自身的像素*scale倍数+偏移量， offsetX= (parseInt(currentWidth) - parseInt(indoormap.getAttribute("width"))) / 2
                MAPINFO[i].y * scaleY + offsetY, 
                MAPINFO[i].width * scaleX, 
                MAPINFO[i].height * scaleY, 
                MAPINFO[i].title, MAPINFO[i].color, 
                MAPINFO[i].textcolor, 
                MAPINFO[i].bordercolor, 
                MAPINFO[i].imageurl);
            }

在启用了外网的ngrok后，出跨域问题。
https://blog.csdn.net/lluozh2015/article/details/78553604
微信**缓存清存**
android端

项目最终效果
（在github上因为是由欧美的人脸数据集创建的网络，所以对亚洲人脸的准确度有待考验）

项目测试地址http://lyy.frpgz1.idcfengye.com/

github地址：