javascript 是什么原因导致“无法在”CanvasRenderingContext 2D“上执行”drawImage“-提供的HTMLImageElement处于”中断“状态”错误?

g6baxovj  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(489)

背景:我的团队使用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设置?
否则,这种错误的其他潜在原因是什么?

4xrmg8kj

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

相关问题