JavaScript 压缩图片

2018-10-09 发表在 编程语言 841

原理 new一个image,然后 用canvas来绘图

function compress(base64, width, callback) {
    var image = new Image();
    image.src = base64;
    image.onload = function () {
        var height = (width / this.width) * this.height;
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(image, 0, 0, width, height);
        var data = canvas.toDataURL('image/jpeg');
        callback(data);
    }
}

调用代码:

var file = e.target.files[0]
if (file) {
    var reader = new FileReader();
    reader.onload = function () {

        compress(reader.result, 250, function (data) {             app.messages.push({                 type: 'image',                 self: true,                 data: data             })         });

    };     reader.readAsDataURL(file); }

实现效果图:

XbYVa7KC.png

作者:贝塔博客
本站使用「署名 4.0 国际」创作共享协议,转载请在文章明显位置注明作者及出处。
评论
登录以后才可以发布评论哦, 点击登录 发布评论
评论列表 0人参与,0条评论
暂时还没有人评论,快来一条神回复吧!