| 本文实例为大家分享了Vue使用canvas实现图片压缩上传的具体代码，供大家参考，具体内容如下 场景：如用户头像等 对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。 两方面： 1、由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。
2、很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的（但是我用单反拍了个头像，照片超过2M很正常，要对图片进行处理才能上传）。如果可以在前端进行压缩，则理论上对图片尺寸的限制是没有必要的。 
示例： 主要技术：使用canvas的drawImage()方法。（附：canvas.toDataURL()或者canvas.toBlob()） ctx.drawImage(image, dx, dy);ctx.drawImage(image, dx, dy, dWidth, dHeight);ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 示例： // html<input id="file" type="file">// JSvar eleFile = document.querySelector('#file');// 压缩图片需要的一些元素和对象var reader = new FileReader(), img = new Image();// 选择的文件对象var file = null;// 缩放图片需要的canvasvar canvas = document.createElement('canvas');var context = canvas.getContext('2d');// base64地址图片加载完毕后img.onload = function () { // 图片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制 var maxWidth = 400, maxHeight = 400; // 目标尺寸 var targetWidth = originWidth, targetHeight = originHeight; // 图片尺寸超过400x400的限制 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 更宽，按照宽度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas对图片进行缩放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除画布 context.clearRect(0, 0, targetWidth, targetHeight); // 图片压缩 context.drawImage(img, 0, 0, targetWidth, targetHeight); // canvas转为blob并上传 canvas.toBlob(function (blob) { // 图片ajax上传 var xhr = new XMLHttpRequest(); // 文件上传成功 xhr.onreadystatechange = function() { if (xhr.status == 200) { // xhr.responseText就是返回的数据 } }; // 开始上传 xhr.open("POST", 'upload.php', true); xhr.send(blob); }, file.type || 'image/png');};// 文件base64化，以便获知图片原始尺寸reader.onload = function(e) { img.src = e.target.result;};eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // 选择的文件是图片 if (file.type.indexOf("image") == 0) { reader.readAsDataURL(file); }});注意： 移动端会出现图片变形，需要根据设备的dpr对canvas进行放大，再用css进行强制恢复 // 获取设备dprgetPixelRatio: function(context) { let backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore;}// 大概这样const ctx = this.canvas.getContext("2d");const dpr = this.getPixelRatio(ctx);this.$refs.postImg.crossOrigin = "Anonymous";var oldWidth = this.canvas.width;var oldHeight = this.canvas.height;this.canvas.style.width = oldWidth + 'px'; this.canvas.style.height = oldHeight + 'px';this.canvas.width = oldWidth * dpr;this.canvas.height = oldHeight * dpr;ctx.scale(dpr, dpr);//进行正常的操作ctx.drawImage(this.$refs.cropImg, 0, 0, 250, 400);以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
JavaScript中BOM和DOM详解
深入浅析同源与跨域,jsonp(函数封装),CORS原理 |
