threejs压缩图片小工具

xiefandaren

https://www.xiefansq.cn/threejsP/2023/10/21/

1. // 生成多个Blob对象，这里假设你已经有了这些Blob对象  
   
2. let blobs = [blob1, blob2, blob3]; // 将实际的Blob对象替换为示例变量  
   
3.   
   
4. // 创建一个新的Blob对象，用于存储ZIP文件  
   
5. let zipBlob = new Blob([''], { type: 'application/zip' });  
   
6.   
   
7. // 创建一个Blob URL，用于在浏览器中显示ZIP文件  
   
8. let zipUrl = URL.createObjectURL(zipBlob);  
   
9.   
   
10. // 创建一个新的File API对象，用于表示ZIP文件  
    
11. let zipFile = new File([zipBlob], 'archive.zip', { type: 'application/zip' });  
    
12.   
    
13. // 创建一个新的下载链接元素  
    
14. let downloadLink = document.createElement('a');  
    
15. downloadLink.href = zipUrl;  
    
16. downloadLink.download = zipFile.name;  
    
17.   
    
18. // 创建一个新的文件夹名称  
    
19. let folderName = 'MyFolder';  
    
20.   
    
21. // 遍历Blob数组，将每个Blob对象转换为图片文件，并添加到ZIP文件中  
    
22. for (let i = 0; i < blobs.length; i++) {  
    
23.   // 创建一个新的图片元素  
    
24.   let img = document.createElement('img');  
    
25.   img.src = URL.createObjectURL(blobs[i]); // 将Blob对象转换为URL  
    
26.   
    
27.   // 创建一个新的canvas元素，用于绘制图片  
    
28.   let canvas = document.createElement('canvas');  
    
29.   canvas.width = img.width;  
    
30.   canvas.height = img.height;  
    
31.   let ctx = canvas.getContext('2d');  
    
32.   ctx.drawImage(img, 0, 0, img.width, img.height);  
    
33.   
    
34.   // 将图片数据转换为新的Blob对象  
    
35.   let imageBlob = canvas.toDataURL('image/png').split(',')[1];  
    
36.   let imageBlobParser = new BlobParser();  
    
37.   let imageBlobParsed = imageBlobParser.dataURItoBlob(imageBlob);  
    
38.   
    
39.   // 将新的Blob对象添加到ZIP文件中  
    
40.   zipBlob = zipBlob.slice(0, zipBlob.size, zipBlob.size + imageBlobParsed.size);  
    
41.   zipBlob.append(imageBlobParsed);  
    
42. }  
    
43.   
    
44. // 设置下载链接的href属性为ZIP文件的Blob URL  
    
45. downloadLink.href = URL.createObjectURL(zipBlob);  
    
46.   
    
47. // 将下载链接添加到页面中，并触发点击事件以开始下载ZIP文件  
    
48. document.body.appendChild(downloadLink);  
    
49. downloadLink.click();

复制代码