时间戳

首页 > 解决方案 > 使用onload 中的 drawImage 在 Firefox 中没有绘制任何内容

javascript - 使用onload 中的 drawImage 在 Firefox 中没有绘制任何内容

问题描述

我试图让生成的 SVG 在画布内绘制。下面的代码在 Chrome 中可以正常工作，但在 Firefox 中不行。

<html>
  <body>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width: 100px; height; 100px">
      <rect x="0" width="100" height="100" rx="15" fill="pink" />
      <circle cx="50" cy="50" r="25"/>
    </svg>
    <canvas style="border: 1px dashed black; height: 100px; width: 100px">
    </canvas>

    <script>
      const canvas = document.querySelector("canvas")
      const svg = document.querySelector("svg")

      const outerHTML = svg.cloneNode(true).outerHTML
      const blob = new Blob([outerHTML],{type:'image/svg+xml;charset=utf-8'});
      let url = window.URL || window.webkitURL || window;
      let blobURL = url.createObjectURL(blob);

      const img = document.createElement("img")
      document.querySelector("body").appendChild(img)

      img.onload = () => {
        try {
          canvas.height = 100
          canvas.width = 100
          let ctx = canvas.getContext('2d');
          ctx.fillRect(0,0,100,100);
          ctx.clearRect(10,20,30,40);
          ctx.drawImage(img, 0, 0, 100, 100);
        } catch(e) {
          console.log(e)
        }
      };
      img.src = blobURL
    </script>
  </body>
</html>

一切似乎都在这里工作——包括图像加载——除了drawImage调用。带有黑色圆圈的粉红色小圆角矩形是 SVG。底部的大的是加载到元素中的相同img内容。（“0.5ms”是因为这是通过 Rails 应用程序加载的，但这无关紧要）

截屏

虚线框是我要绘制的画布。和fillRect工作clearRect。我在 onload 里面，所以我知道图像已经完成加载。尺寸都是正确的。图像被加载到img元素中，所以我知道浏览器可以处理 blob。

我不知道这里还有什么问题。

标签： javascriptcanvas

解决方案

感谢 ggorlen 对可运行片段工作的评论，我在 Chrome 中尝试了这个并且它有效。这使我走上了一条新的谷歌搜索路径，在那里我发现了不久前的这个 SO 问题，指出这个确切的问题可以通过在根元素上放置width和属性来解决。height<svg>

而且，事实上，它确实解决了问题！

推荐阅读