图片过大 canvas.toBlob 报错、Failed to execute ‘createObjectURL‘ on ‘URL‘ Overload resolution failed
报错问题:"图片过大 canvas.toBlob 报错" 可能是由于 canvas 转换为 Blob 时,图片的尺寸超过了系统或浏览器的限制。确保在缩小图片尺寸的时候不要过度压缩,以免影响图片质量。
·
报错问题:"图片过大 canvas.toBlob 报错" 可能是由于 canvas 转换为 Blob 时,图片的尺寸超过了系统或浏览器的限制。
解决方法:
- 缩小图片尺寸:在将图片转换为 canvas 前,可以先缩小图片尺寸,以减少 canvas 的内存消耗。
- 分块处理:如果图片非常大,可以将图片分块处理,每次处理一部分。
- 检查浏览器兼容性:确保浏览器支持 canvas.toBlob 方法。
- 使用第三方库:使用第三方库来处理大图片,例如 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
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]));
更多推荐
已为社区贡献2条内容
所有评论(0)