【发布时间】:2015-07-30 22:52:40
【问题描述】:
我正在尝试从服务器加载图像。
图像在服务器上动态创建,然后将名称[包括相对路径]传递给客户端以加载到画布中。
canvas有3层,设置图片大小相同,加载图片到一个canvas。
小图像一切正常。 但是对于大图像,[假设高于 9000 x 7000 像素] 它会引发“Aw Snap”蓝屏错误。 有时它会设法加载图像,但会通过将鼠标移动到画布上、移动滚动条或在其上画一条线来引发“Aw Snap”错误。
我增加了 --disk-cache-size 但没有帮助。
即使设置这些值也无济于事层]
用 IE 和 Safari 测试 - 工作正常,但有些延迟。
发表您的想法和提示。任何帮助表示赞赏。
这是我的代码
function LoadImage(imageUrl) {
try {
var image_View = document.getElementById("imageView");
var image_Temp = document.getElementById("imageTemp");
var image_Tempt = document.getElementById("imageTempt");
var ctx = image_View.getContext("2d");
var img = new Image();
img.onerror = function() {
alert('The image could not be loaded.');
}
img.onload = function() {
image_View.width = img.width;
image_View.height = img.height;
image_Temp.width = img.width;
image_Temp.height = img.height;
image_Tempt.width = img.width;
image_Tempt.height = img.height;
ctx.clearRect(0, 0, image_View.width, image_View.height);
ctx.drawImage(img, 1, 1, img.width, img.height);
}
img.src = imageUrl;
}
catch (err) {
alert(err.message);
}
}
【问题讨论】:
-
您是否尝试过进入 Chrome 设置 -> 高级选项 -> 隐私并取消选中“预取资源以更快地加载页面”?
-
投票结束为“太宽泛”,我们真的只能在这里猜测。我建议将此作为错误报告给crbug.com。
-
正如 K3N 所说,我们只能猜测您的代码在重负载下失败的原因(可能是因为负载太重!)。我建议重构您的应用以使用更接近显示尺寸的图像,而不是过大。
-
很难说,因为没有测试图像,所以问题不完整。如果没有这个,我的 GUESS 通常是使用 base64 URI 而不是指向文件/blob 的 url 引起的问题。 Chrome 有 URI 大小限制。如果是这种情况,请参阅创建一个临时 url,它指向通过 base64 字符串从 blob 创建的 ram 对象:stackoverflow.com/questions/16245767/…
标签: javascript html image google-chrome canvas