JavaScript 2018年10月09日 17:32:23 134

原理 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

评论
登录以后才可以发布评论哦,点击登录 发布评论
评论列表 0人参与,0条评论
暂时还没有人评论,快来一条神回复吧!