压缩base64方法

//压缩base64方法
   function dealImage(base64, w) {
	   
    var preview = document.getElementById("uploadimg");
    var newImage = new Image();
    var quality = 0.6;    //压缩系数0-1之间
    newImage.src = base64;
    newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
    var imgWidth, imgHeight;
    newImage.onload = function () {
        imgWidth = this.width;
        imgHeight = this.height;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        if (Math.max(imgWidth, imgHeight) > w) {
            if (imgWidth > imgHeight) {
                canvas.width = w;
                canvas.height = w * imgHeight / imgWidth;
            } else {
                canvas.height = w;
                canvas.width = w * imgWidth / imgHeight;
            }
        } else {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            quality = 0.6;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
        var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
 
        imgbase64 = base64
         imgbase64 = imgbase64.split(",")[1];
    
       uplaodImg(imgbase64)
    }
}
### 使用 JSZip 对 Base64 编码数据进行压缩 为了使用 `JSZip` 库对 Base64 编码的数据进行压缩,可以按照如下方法操作。此过程涉及创建一个新的 ZIP 文件实例,向其中添加 Base64 数据作为文件条目,并最终生成一个可下载或进一步处理的新 ZIP 文件。 #### 创建并配置 JSZip 实例 首先,在项目中引入 `jszip` 和其他必要的库: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> ``` 接着初始化 `JsZip` 类的一个新对象用于管理ZIP档案: ```javascript const zip = new JSZip(); ``` #### 添加 Base64 数据到 Zip 中 假设有一个名为 `base64Data` 的变量存储着要被压缩Base64 字符串,则可以通过调用 `.file()` 方法将其加入到 ZIP 归档里。注意设置第二个参数为 `{base64: true}` 来指明输入的是 Base64 格式的字符串[^1]: ```javascript // 将Base64编码的内容作为一个新的文件项添加至ZIP包内 zip.file('compressedFile.txt', base64Data, {base64: true}); ``` #### 生成压缩后的二进制 Blob 或者 Base64 输出 一旦所有的文件都被成功添加到了 ZIP 容器之后,就可以通过异步函数获取整个 ZIP 文档的表示形式——无论是作为Blob还是继续转换回Base64编码的形式都行。这里展示两种方式之一:得到一个可以直接触发浏览器下载动作的 URL 链接;另一种则是返回Base64格式的结果以便后续网络请求发送[^2]。 对于直接生成可供下载链接的情况来说: ```javascript // 异步获得包含所有已添加资源在内的完整ZIP文档 zip.generateAsync({type:"blob"}).then(function(content) { // 利用HTML5特性创建临时<a>标签模拟点击事件完成下载流程 const link=document.createElement('a'); link.href=URL.createObjectURL(content); link.download='archive.zip'; document.body.appendChild(link); link.click(); }); ``` 如果目标是取得Base64版本的话则应如此做: ```javascript // 获取压缩后内容的Base64表示形式 zip.generateAsync({ type: "base64" }).then(function(base64Content){ console.log(`Compressed content as Base64 string:\n${base64Content}`); }); ``` 上述代码片段展示了如何利用 JavaScript 结合 `JSZip` 库有效地执行 Base64 编码数据的压缩任务,并提供了两种不同的输出选项供开发者依据实际需求选用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值