添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
多情的圣诞树  ·  vue3 setup 如何获取 props ...·  4 周前    · 
豪爽的小狗  ·  微信小程序报ReferenceError: ...·  2 月前    · 
非常酷的黄豆  ·  代码平台调用签名机制API_云效(Apsar ...·  4 月前    · 
精明的豆腐  ·  多模型功能 - Azure SQL | ...·  4 月前    · 
曾深爱过的毛衣  ·  Workflow Email ...·  8 月前    · 
link之家  ›  👨‍🏫图片压缩Canvas
blob 图片压缩 canvas const
https://juejin.cn/post/6844903806933663757
lichail
3 年前

#关于如何实现压缩

查阅MDN找到的是这个API：

HTMLCanvasElement.toBlob() 方法创造 Blob 对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。 

// callback处理blob主要，type图片类型，encoderOptions图片压缩比例 0-1
canvas.toBlob(callback, type, encoderOptions); 
复制代码

#效果图

这里看到压缩效果已经由原来的8.5Mb到了1.6Mb左右,这里有个问题Mac上面的压缩效果没Win好(尴尬了)。

#实现代码 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 20px 0;
        #fileSelect{
            margin-top: 10px;
            padding: 10px 5px;
            border: 1px solid chartreuse;
            border-radius: 5px;
            background: green;
            color: white;
            text-decoration: none;
        #fileSelect:hover{
            opacity: 0.8;
    </style>
</head>
    <input type="file" id="fileElem" multiple accept="image/*" style=""
        onchange="handleFiles(event,this.files)">
    <a href="#" id="fileSelect">点击上传</a>
</body>
<script>
    window.onload = function () {
        var fileSelect = document.getElementById("fileSelect"),
            fileElem = document.getElementById("fileElem");
        fileSelect.addEventListener("click", function (e) {
            if (fileElem) {
                fileElem.click(); // input文件上传
            e.preventDefault(); 
        }, false);
    function handleFiles(e, files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;
            if (!imageType.test(file.type)) {
                continue;
            console.log(file);
            const width = 500;
            const height = 300;
            const fileName = file.name;
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = event => {
                const img = new Image();
                img.src = reader.result;
                img.onload = () => {
                    const elem = document.createElement('canvas');
                    elem.width = width;
                    elem.height = height;
                    const ctx = elem.getContext('2d');
                    // canvas大小设置
                    ctx.drawImage(img, 0, 0, width, height);
                    // 植入内容
                    document.body.append(elem);
                    //--------- 如果不需要资源上传，只需显示，下面代码可以不要了------
                    ctx.canvas.toBlob((blob) => {
                        const file = new File([blob], fileName, {
                            type: 'image/jpeg',
                            lastModified: Date.now()
                        console.log(file); // file为压缩后的图片
                    }, 'image/jpeg', 10e-9);
                    // ----------------------
                reader.onerror = error => console.log(error);
</script>
</html>
复制代码

#流程

1. new FileReader() 

首先需要的是利用这个API来读取文件，实例化之后采用 readAsDataURL 的方式来读取图片的资源路径,这里的兼容性不错，囊阔了几乎所有浏览器版本和平台。

reader.readAsDataURL(file); //这样读取图片，上述例子可以多选操作，所以循环了下

2.reader.onload的回调中创建图片


// 创建图片内容
 const img = new Image();
// 将图片地址绑定到base64,这里遇到一个问题采用event.target.result取不到当前，reader下面有result属性可用
 img.src = reader.result;

3.创建画布，绘制图片内容


 // 创建canvas画布
 const elem = document.createElement('canvas');
 // 设置画布大小
 elem.width = width; 
 elem.height = height;
 //获取🖌️
 const ctx = elem.getContext('2d')
 // 绘制
 ctx.drawImage(img, 0, 0, width, height); // drawImage这里查看MDN文档即可
 // 植入页面
 document.body.append(elem);
复制代码
4.划重点压缩，将canvas压缩大小转为image对象


ctx.canvas.toBlob((blob) => {
    const file = new File([blob], fileName, {
        type: 'image/jpeg', // 这里的格式可以是jpg，png，gif，png等，都试了下，压缩大小不变
        lastModified: Date.now()
    console.log(file);
}, 'image/jpeg', 10e-9); // 这里的10e-9很小了 极限0-1 0是最大压缩比率， 1这里有点玄学变大了 超过1 或者小于0 大小大概压缩了6成左右

这里看到一个兼容性的问题,主要考虑的Sarari IOS上，谁叫客户用呢？


// MDN给除了兼容代码，大体是是在Object原型添加了toBlob函数实现，粘贴添加就好
if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var dataURL = this.toDataURL(type, quality).split(',')[1];
      setTimeout(function() {
        var binStr = atob( dataURL ),
            len = binStr.length,
            arr = new Uint8Array(len);
        for (var i = 0; i < len; i++ ) {
          arr[i] = binStr.charCodeAt(i);
        callback( new Blob( [arr], {type: type || 'image/jpeg'} ) );
复制代码
#结语


网上资料挺多，没找到一下就能跑的，查查搜搜实现了功能，还能用，是真的。 -- 2019年3月25日 周边无人


#参考资料


MIME 类型


HTMLCanvasElement.toBlob()


FileReader


Canvas API


CanvasRenderingContext2D.drawImage()
文章分类
前端
文章标签
Canvas
相关推荐
Canvas如何开发一个虚拟摇杆
关于作者
web前端
获得点赞 128
文章被阅读 15,074
下载掘金客户端
一个帮助开发者成长的社区
相关文章
Vue嵌入iframe,iframe如何跨域调用vue内路由
64
3
[干货]前端小众-谷歌插件跨域
12
3
我用 10000 张图片合成我们美好的瞬间
324
80
Canvas如何做个吉利画笔
37
14
Canvas钢琴琴键弹起来
3
0
 
推荐文章
多情的圣诞树  ·  vue3 setup 如何获取 props - CSDN文库
4 周前
豪爽的小狗  ·  微信小程序报ReferenceError: require is not defined是什么原因 - CSDN文库
2 月前
非常酷的黄豆  ·  代码平台调用签名机制API_云效(Apsara Devops)-阿里云帮助中心
4 月前
精明的豆腐  ·  多模型功能 - Azure SQL | Microsoft Learn
4 月前
曾深爱过的毛衣  ·  Workflow Email Notification throws error: com.sun.mail.smtp.SMTPSendFailedException: 501 5.1.7 Invalid address
8 月前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
link之家 - 链接快照平台
© 2024 ~ 沪ICP备11025650号