思考：

用H5文件阅读器获取图片，以数据URL的形式读入页面，获取图片的base64编码信息

使用画布压缩图片(包括压缩和旋转)

使用canvas api toDataURL将canvas转换为base64图片编码

谈话是廉价的，让我们看看代码

1.文件阅读器获取图片的base64编码信息

$(文档)。on('change '，' #upload-photo-pic '，function (e) {

var file=this . files[0]；

var FileReader=new FileReader()；

//将文件作为数据网址读入页面

fileReader.readAsDataURL(文件)；

fileReader.onload=function(e) {

var image URl=e . target . result；

//使用画布压缩base64图片

canvasPress(imageUrl)；

}

}

2.使用画布压缩图片(包括压缩和旋转)

在使用画布处理图片之前，通过以下三个步骤将图片读入画布

在html代码中添加一个隐藏的画布用于图像处理

创建新图像()

Write image.onload=function(){}回调，当image.src=imgurl时，加载图片时执行回调，回调中执行画布操作。

上传的图片太大，需要压缩。当然压缩的不是画质，而是照片的宽度(现在用单反或者手机拍的，10多m，宽度7000px左右)。根据我的实际使用场景，如果图片的宽度大于1200 px，图片将被统一压缩成一个宽度为1200 px的图片，缩放后的图片为1200 * 1800，大小约为2.8M m.具体操作：

调整图片大小

if(image.widthmaxWidth){

image . height *=maxWidth/image . width；

image.width=maxWidth

}

调整画布大小

canvas . width=image . height；

canvas . height=image . width；

我以为在压缩下一切都会好的，但是没有(为了解决一个倒图的问题):用iphone拍照的时候，可能会横拍，竖拍，或者倒拍。不同方式的照片exif信息会记录不同的朝向，所以取朝向的值(exif图片信息读https://github.com/EXIF-js/EXIF-js/)，然后根据这个值旋转图片。(安卓手机上拍的照片在测试中没有上述图像反转问题。).

注意画布旋转。它没有给他一个参数。拿到图就可以直接用了。我用的是rotate，比如CTX . rotate(90 path。PI/180)。因为坐标系也是旋转的，所以在绘图时，**\y***应该有-height的相对偏移量，例如

ctx.drawImage(image，0，-image.height，image.width，image . height)；

函数canvasPress(imgurl){

//如果图片宽度超过更大宽度，宽度将被缩放到更大宽度

var maxWidth=1200

var Image=new Image()；

image.onload=function(){

var canvas=document . getelementbyid(' canvas-press ')；

var CTX=canvas . GetContext(' 2d ')；

ctx.clearRect(0，0，canvas.width，canvas . height)；

//缩放

if(image.widthmaxWidth){

image . height *=maxWidth/image . width；

image.width=maxWidth

}

EXIF.getData(this，function(){

var orientation=EXIF.getTag(这个，‘Orientation’)；

开关(方向){

案例6://需要顺时针旋转90度(向左)

//重置画布宽度和高度

canvas . width=image . height；

canvas . height=image . width；

CTX . rotate(90 *数学。PI/180)；

//因为坐标系也是旋转的，所以写成如下

ctx.drawImage(image，0，-image.height，image.width，image . height)；

打破；

案例8://需要逆时针旋转90度(向右)

//重置画布宽度和高度

canvas . width=image . height；

canvas . height=image . width；

ctx.rotate(-90*Math。PI/180)；

//因为坐标系也是旋转的，所以写成如下

ctx.drawImage(image，-image.width，0，image.width，image . height)；

打破；

案例3:

//重置画布宽度和高度

canvas . width=image . width；

canvas . height=image . height；

CTX . rotate(180 *数学。PI/180)；

//因为坐标系也是旋转的，所以写成如下

ctx.drawImage(image，-image.width，-image.height，image.width，image . height)；

打破；

默认值：

Console.log('默认')；

//重置画布宽度和高度

canvas . width=image . width；

canvas . height=image . height；

ctx.drawImage(image，0，0，image.width，image . height)；

打破；

}

//接下来，调用截图插件

setCroperInfo(canvas . TotaToul())；

});

}

image.src=imgurl

}

3.今天使用canvas api

Canvas.toDataURL()可以直接得到处理后的base64编码图片，然后就可以继续按照自己想要的方式处理图片了。

在我的使用场景中，我调用裁剪来剪切图片，然后发送到后端保存。