美文网首页
js图片压缩

js图片压缩

作者: 肆意放纵 | 来源:发表于2019-07-18 16:17 被阅读0次

懒需要解释吗?

 function compressedPicture (url, callback) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
                console.log(img.width);
                var width = img.width;
                var height = img.height;
                // 按比例压缩4倍
                var rate = (width < height ? width / height : height / width) / 4;
                canvas.width = width * rate;
                canvas.height = height * rate;
                ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
                var dataURL = canvas.toDataURL('image/jpeg');
                callback.call(this, dataURL);
                canvas = null;
                console.log(dataURL);
            };
            img.src = url
        }
 //调用
 this.compressedPicture(这里放base64的图, _ => {
                console.log(_);
 })

相关文章

  • 压缩

    压缩 html css js 压缩图片

  • 前端知识汇总(渲染篇)

    前端优化的手段 js css压缩合并 css在上,js在下(defer,async) 图片压缩、CSS-sprit...

  • Web性能优化

    1、压缩及合并资源使用webpack或Parcel压缩图片、合并CSS和JS文件在线压缩图片网站:https://...

  • js图片压缩

    懒需要解释吗?

  • 前端自动化工具|gulp新手入门

    gulp是前端自动化工具,它可以进行html压缩、css压缩合并、js检查压缩、图片压缩、编译less、编译...

  • gulpfile.js.md

    -- 常用的方法 -- // 调用方法打印 // 拷贝所有的html文件 // 压缩图片 // 压缩js // 合...

  • uni-app h5压缩图片

    translate-image.js /** * 压缩 * @param {Object} imgSrc 图片ur...

  • 前端性能优化

    1. html压缩 2. css压缩,是否合并? 3. js压缩,是否合并? 4. 图片压缩,base64,雪碧图...

  • js图片压缩上传

    前端有时候会遇到图片太大,预览过慢和无法传给后台的困境,另外还浪费流量。在这里给大家推荐一款配合jQuery运行的...

  • js图片压缩预览

    图片压缩预览(具体上传请看另外一篇文章,讲解的更详细图片压缩上传) html结构 js代码 css代码 欢迎访问我...

网友评论

      本文标题:js图片压缩

      本文链接:https://www.haomeiwen.com/subject/diwllctx.html