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
<input id="file" type="file">

// js
var elefile = document.queryselector('#file');

// 压缩图片需要的一些元素和对象
var reader = new filereader(), img = new image();

// 选择的文件对象
var file = null;

// 缩放图片需要的canvas
var 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进行强制恢复

// 获取设备dpr
getpixelratio: 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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。