如何在手机百度浏览器下载图片

Question

如何在手机百度浏览器下载图片，哪位指点一下。
用下方方法，自带的浏览器可以实现下载，在手机百度浏览器下载时，出现大小未知，下载资源出错

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)

Answer 1

引自免费微信小程序：皆我百晓生

要在手机百度浏览器下载图片，您可以尝试使用canvas将图片转换为Blob对象，然后创建一个隐藏的<a>元素进行下载。以下是详细的步骤和示例代码：

首先，确保您已经得到了图片的URL。然后，您可以使用以下JavaScript代码在手机百度浏览器中下载图片：

function downloadImage(url, filename) {
  // 创建一个新的img元素
  const imgElement = new Image();

  // 设置图像的src属性为图片的URL
  imgElement.src = url;

  // 当图像加载完成时，执行回调函数
  imgElement.onload = function() {
    // 创建一个canvas元素
    const canvas = document.createElement('canvas');

    // 设置canvas宽度和高度与图像相同
    canvas.width = imgElement.naturalWidth;
    canvas.height = imgElement.naturalHeight;

    // 获取canvas的2D渲染上下文
    const ctx = canvas.getContext('2d');

    // 将图像绘制到canvas上
    ctx.drawImage(imgElement, 0, 0);

    // 将canvas内容转换为Blob对象
    canvas.toBlob(function(blob) {
      // 如果浏览器支持URL.createObjectURL，那么创建一个blob URL
      if (typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function') {
        const blobUrl = URL.createObjectURL(blob);
        const aDown = document.createElement('a');
        
        // 设置下载文件名
        aDown.download = filename;
        
        // 隐藏下载链接
        aDown.style.display = 'none';
        
        // 设置href为blob URL
        aDown.href = blobUrl;
        
        // 添加下载链接到body并触发点击事件
        document.body.appendChild(aDown);
        aDown.click();
        
        // 移除下载链接
        document.body.removeChild(aDown);
        
        // 在某些情况下，可能需要手动解引用和撤销blob URL
        setTimeout(() => {
          URL.revokeObjectURL(blobUrl);
        }, 100);
      } else {
        console.error('当前浏览器不支持URL.createObjectURL，可能无法下载图片。');
      }
    }, 'image/png'); // 指定图片类型为PNG，可以根据实际图片格式调整（例如'image/jpeg'）
  };

  // 如果图像加载失败，打印错误信息
  imgElement.onerror = function() {
    console.error('加载图片失败。');
  };
}

// 使用函数下载图片
downloadImage('https://example.com/path/to/image.jpg', 'example-image.png');

这段代码首先创建了一个新的<img>元素，并设置了其src属性为给定的图片URL。当图片加载完成后，它会在onload事件处理程序中创建一个<canvas>元素并将图片绘制到上面。然后，使用canvas.toBlob()方法将canvas内容转换为Blob对象。接下来，如果浏览器支持URL.createObjectURL，则会创建一个隐藏的<a>元素用于下载。最后，添加下载链接到页面，触发点击事件，然后移除链接。

注意：这种方法可能会在一些旧版本的浏览器或特定环境下出现问题，因为不是所有浏览器都支持URL.createObjectURL和canvas.toBlob。此外，此方法只能用于从同源策略允许的域加载的图片。如果图片来自不同源，则可能需要服务器端配合解决跨源资源共享（CORS）问题。