背景:我的团队使用HTML5开发了一个基于图像的虚拟形象创建工具。虽然它在本地测试运行良好,但我们在生产中遇到了一些问题,由于JS错误,我们的用户无法保存他们的虚拟形象。
这是我们的用户在Google Chrome浏览器上遇到的错误:
Uncaught DOMException:
Failed to execute 'drawImage' on 'CanvasRenderingContext2D' - the HTMLImageElement provided is in the 'broken' state.
然而,这个错误在本地主机上根本不会发生。
我读过的一些文章提到,如果图像对象不可访问,可能会出现“HTMLimageElement provided is in the 'broken' state”(提供的HTMLimageElement处于“中断”状态)的情况。但是,我已经验证了(至少在本地)所有对象都是完整的。
抛出错误的行是:
context.drawImage(imageArray[i], 0, 0, canvas.width, canvas.height);
下面是代码的一个片段:
/*
* Set preview into a canvas drawing for exporting
*/
function setCanvasDrawing () {
var canvas = document.getElementById('avatarCanvas');
var context = canvas.getContext('2d');
var centerX = (canvas.width) / 2;
var centerY = (canvas.height) / 2;
var radius = (canvas.width-5) / 2; //minus 10 is for offset so the circle wont be cut off at the side
var imageArray = [];
var counter = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
//drawing background
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = selectedItems['background'].val;
context.fill();
context.lineWidth = 6;
context.strokeStyle = '#000';
context.stroke();
for(itemtype in selectedItems){
var img = new Image();
img.onload = function() {
counter ++;
if(counter == Object.keys(selectedItems).length - 1) //minus one as it excludes background
{
//when all images have loaded then draw into canvas.
for (var i = 0; i < imageArray.length; i++) {
//to clip the image in the circle
context.clip();
context.drawImage(imageArray[i], 0, 0, canvas.width, canvas.height); // #DEBUG - This is the line causing the Chrome issue
if(i == imageArray.length-1){
//convert to file
setFileFromDataURL(canvas.toDataURL('image/png'));
}
}
}
};
img.src = selectedItems[itemtype].val;
imageArray.push(img);
}
}
考虑到生产环境与我的本地环境的行为不同,是否存在任何可能会干扰的特定于服务器的设置(例如CSP)或特定于浏览器的CSP设置?
否则,这种错误的其他潜在原因是什么?
1条答案
按热度按时间4xrmg8kj1#
浏览器要运行这个JavaScript,图像的路径必须是绝对的,而不是相对的。
例如:常量当前帧=索引=〉(
/scrolling/${index.toString().padStart(4, '0')}.JPG
)上面显示了一个名为scrolling的子目录中的图像,该路径相对于. js文件所在的位置,可以在编码工具的预览窗口中工作,但会在Web浏览器中抛出破碎图像错误。
下面显示了可解决此问题的映像的完整绝对路径:常量当前帧=索引=〉(
file:///C:/Users/Rabin/Documents/Web Site/scrolling/${index.toString().padStart(4, '0')}.JPG
)