前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 压缩图片

JavaScript 压缩图片

作者头像
小贝壳
发布2020-03-05 14:46:20
5530
发布2020-03-05 14:46:20
举报
文章被收录于专栏:贝塔博客

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

代码语言:javascript
复制
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);
    }
}

调用代码:

代码语言:javascript
复制
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);
}实现效果图:
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档