JavaScript 压缩图片

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

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

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