文件上传图片放大缩小进行截图上传

一：效果如下

             

二：思路准备

1、注意事项：弹出框--有原始图片尺寸--操作图片对象--直观显示图片（因为有个圆孔透明背景遮罩）--鼠标滚轮、按住等事件--文件和base64、blob等转换、canvas进行对图片进行缩放和移动效果呈现

2、注意像Edge和360兼容模式下base64转为文件的不兼容性

三：实现方式

1、样式布局：

a)、visImg是用户直接看到的，是在透明圆孔后面的，也是操作后反馈出来的

b)、cellImg是浮动在透明圆孔前面的，透明的，也是用户直接操作的图片对象

c)、actualImg是图片真实的原始图片，此处是存储原始图片的大小。因为考虑到natureWidth的兼容性才这样写的。不过是display:none，实则dom是渲染上的

d)、注意是此处圆孔透明遮罩是在cell类名的伪类来处理的

2、js操作实现

a)、定义全局变量：var drag = 1,move = 0,sX = 0,sY = 0,eX = 0,eY = 0,mL = 0,mT = 0,srcUrl = "";

        

   

b)、base64转为blob，blob进行转为文件后表单提交的时候。

       contentType:false,processData（禁止参数序列化）:false

       formdata.append('key',‘文件’,'文件名（这和base64传是不一样的，注意下）')

c)、操作展示的缩小图，进行比率换算成大图的尺寸和点的距离。然后canvas在画出，进行背景颜色设置后在转为文件对象进行转给后台就可以了

d)、canvas的getImageData方法，对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值注意下就可以了：

• R - 红色 (0-255)
• G - 绿色 (0-255)
• B - 蓝色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

注意：后期升级使用cropper插件来处理。效果还是蛮好