手机百度下载图片到本地

Question

在手机百度浏览器下载压缩后的图片，为什么下载不来，下载资源错误，大小未知，如何解决

const compressImage = async ({ width, height, url, name })=>{
    // console.log(' width, height, url, name ',width, height, url, name);
    fetch(url).then(res=>res.blob()).then(blob=>{
        console.log('blob',blob);
        new Compressor(blob,{
            quality: 0.1,
            width,
            height,
            success: (res) => {
                console.log(res);
                
                 // 下载
                const blobUrl = URL.createObjectURL(res)
                const aDown = document.createElement('a')
                aDown.download = name
                aDown.style.display = 'none'
                aDown.href = blobUrl
                // 触发点击
                document.body.appendChild(aDown)
                aDown.click()
                // 然后移除
                document.body.removeChild(aDown)
            },
            error: (err) => {
                console.log(err);
            }
        })
    })
}

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

根据你的问题描述，我理解到你在使用手机百度浏览器下载压缩后的图片时遇到了问题，出现了下载资源错误且大小未知的情况。你提供了一段代码，似乎是想通过使用
Compressor 库对图片进行压缩后再下载。
在分析问题和提供解决方案之前，我们先来看一下代码可能存在的问题：

1. fetch 请求的问题： 在 fetch(url).then(res=>res.blob()) 这一部分，你使用了 fetch 来获取图片资源，但并没有对 fetch 请求的结果进行错误处理，可能会导致下载失败而无法获取到正确的图片资源。
2. Compressor 库的使用问题： 你使用了 Compressor 库对图片进行了压缩处理，但是没有处理压缩失败的情况，也没有确保压缩后的图片是有效的。而且 Compressor 库在处理大图片时可能会存在性能问题，导致无法正常处理。
3. 下载操作的问题： 在下载操作部分，你创建了一个 <a> 标签，并设置了 download 属性，但没有确保图片已经完全加载和压缩完成后再进行下载，这可能会导致下载到的图片并不完整。
   基于以上问题，我建议采取以下解决方案：
4. 错误处理： 在 fetch 请求和压缩处理过程中，加入错误处理机制，确保能够捕获到错误信息，便于排查问题。
5. 优化压缩处理： 考虑使用更可靠的图片处理库，或者直接使用 HTML5 的 Canvas 对图片进行压缩处理，以确保处理效率和质量。
6. 延迟下载： 确保图片加载和压缩处理完成后再进行下载操作，可以通过监听事件来实现。
   下面是一个修改后的代码示例：
   javascriptCopy code

   const compressAndDownloadImage = async ({ width, height, url, name }) => {
   try {
   const response = await fetch(url);
   if (!response.ok) {
   throw new Error('Failed to fetch image');
   }
   const blob = await response.blob();
   const compressedBlob = await new Promise((resolve, reject) => {
   new Compressor(blob, {
   quality: 0.1,
   width,
   height,
   success: resolve,
   error: reject
   });
   });
   const blobUrl = URL.createObjectURL(compressedBlob);
   const aDown = document.createElement('a');
   aDown.download = name;
   aDown.style.display = 'none';
   aDown.href = blobUrl;
   // 等待下载链接添加到 DOM 中
   await new Promise((resolve) => {
   aDown.onload = resolve;
   document.body.appendChild(aDown);
   });
   // 触发点击
   aDown.click();
   // 释放资源
   URL.revokeObjectURL(blobUrl);
   // 移除下载链接
   document.body.removeChild(aDown);
   } catch (error) {
   console.error('Error:', error);
   }
   };
   // 调用示例
   compressAndDownloadImage({
   width: 800,
   height: 600,
   url: '图片地址',
   name: '下载图片名称.jpg'
   });
   

   以上修改后的代码解决了原始代码中可能存在的问题，确保了在图片加载、压缩完成后再进行下载操作，同时增加了错误处理，以便排查问题。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑