zoukankan      html  css  js  c++  java
  • js 压缩上传图片

    思路:

    1. 通过input标签获取本地图片
    2. 把获取到的图片转换成base64格式(canvas只能处理base64格式的图片)
    3. 通过canvas的API把图片压缩大小后再生成图片。
    4. 把压缩后的base64图片转成Blob的二进制流文件。
    5. 通过FormData 表单上传的形式提交至后端。
    <!DOCTYPE html>
    <html>
    <head> <meta charset="UTF-8" /> <title>压缩图片demo</title> </head> <body> <img id="img" src="" /> <input id="file" type="file" onchange="compress()" /> </body> <script> // 对图片进行压缩 function compress() { let fileObj = document.getElementById("file").files[0]; //上传文件的对象 let reader = new FileReader(); reader.readAsDataURL(fileObj); reader.onload = function (e) { let image = new Image(); image.src = e.target.result; image.onload = function () {
           let canvas = document.createElement("canvas"),
            context = canvas.getContext("2d");
           canvas.width = image.width;        
           canvas.height = image.height;
           context.drawImage(image, 0, 0, image.width / 2, image.height / 2);

           //预览图片
           let base64img = "";
           base64img = canvas.toDataURL("image/jpeg");
           document.getElementById("img").src = base64img;

           // 上传
           var fileData = new FormData();
           fileData.append("file", convertBase64UrlToBlob(base64img));
           axios.post(url,fileData).then(
              //上传成功!
           );     
                
    };
    };
    }
      /**
      * 将base64的图片转换为Blob
      */
      function convertBase64UrlToBlob(urlData) {
        var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      }
       
    </script>
    </html>

     附外链:https://blog.csdn.net/a8725585/article/details/84867040 canvas旋转图片

  • 相关阅读:
    XTOOL X100 PAD2编程2009 Renault Symbol (Dacia) 所有钥匙丢失
    XTOOL X100 PAD3通过OBD给2014 BMW CAS4 Key编程
    Scania VCI3 SDP3 2.44.1下载免费和安装指南
    VVDI2 V6.7.5 Software Download Free & Install (Update)
    三个步骤解决2m2 magic tank 无法校准HON66钥匙的问题
    VVDI Mini钥匙工具令牌,固件和数据库更新
    kubernetes 认证,授权
    maven 随笔,周末重拾maven
    分布式演进的一点理解
    如何理解持续集成、持续交付、持续部署?
  • 原文地址:https://www.cnblogs.com/kongwei/p/13118343.html
Copyright © 2011-2022 走看看