yixiaof 2019-06-26
比较适合刚拍的内存较大的照片,但存在一个问题,部分传到后台的图片会出现90deg的旋转
此问题只存在于IOS直接拍摄的照片中,任何添加滤镜和处理过的图片都不存在
将文件转为base64,绑定文件的change事件,获取到文件对象
var fileObjArr = e.target.files; var windowURL = window.URL || window.webkitURL; var dataURL = windowURL.createObjectURL(fileObjArr[0]);
//调用方法
dealImage(beforebase64,function(afterbase64) {
})
function dealImage(path, callback) { var img = new Image(); img.src = path; img.onload = function() { //默认按比例压缩 var w = this.width, h = this.height; var quality = 0.4; // 默认图片质量为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 canvas.setAttribute("width", w); canvas.setAttribute("height", h); ctx.drawImage(this, 0, 0, w, h); // ctx.rotate(90 * Math.PI / 180); // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); }; };