报错问题:"图片过大 canvas.toBlob 报错" 可能是由于 canvas 转换为 Blob 时,图片的尺寸超过了系统或浏览器的限制。

解决方法:

  1. 缩小图片尺寸:在将图片转换为 canvas 前,可以先缩小图片尺寸,以减少 canvas 的内存消耗。
  2. 分块处理:如果图片非常大,可以将图片分块处理,每次处理一部分。
  3. 检查浏览器兼容性:确保浏览器支持 canvas.toBlob 方法。
  4. 使用第三方库:使用第三方库来处理大图片,例如 fabric.js 或者 pdf.js。

示例代码:

// 假设 `image` 是一个过大的图片元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, 0);

// 缩小图片
const scale = 0.5; // 缩小比例,根据需要调整
canvas.width *= scale;
canvas.height *= scale;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

canvas.toBlob((blob) => {
  // 使用 `blob` 对象进行后续操作
  let binaryData = [];
      binaryData.push(blob);
      console.log(binaryData, "binaryData");
      divImage.dataset.objUrl = window.URL.createObjectURL(new Blob(binaryData));
}, 'image/jpeg', 0.9); // 指定输出格式和质量

确保在缩小图片尺寸的时候不要过度压缩,以免影响图片质量。 

Failed to execute ‘createObjectURL‘ on ‘URL‘ Overload resolution failed

Failed to execute ‘createObjectURL‘ on ‘URL‘ Overload resolution failed_failed to execute 'createobjecturl' on 'url': over-CSDN博客

vue使用二进制流下载文件,使用

 link.href = window.URL.createObjectURL(blob);
window.URL.createObjectURL需要传入一个数组作为参数 

报错:
Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed.
百度了下,是因为Chrome更新后不支持这种用法,需要改为:

link.href = window.URL.createObjectURL(new Blob([binaryData]));

报错:

VM8796:1Uncaught TypeError: Failed to construct 'Blob': The provided value cannot be converted to a sequence. at <anonymous>:1:29

如果blob为null 出现以上↑报错

正确的写法是 window.URL.createObjectURL需要传入一个数组作为参数

window.URL.createObjectURL(new Blob([null]));

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐