Vue使用canvas实现图片压缩上传 Vue使用canvas实现图片压缩上传

本文实例为大家分享了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// 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 = https://www.it610.com/article/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);

【Vue使用canvas实现图片压缩上传】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。