如何使 Firefox 的画布与基于 Chromium 的浏览器中的行为相同？

Posted 2023-03-28

【中文标题】如何使 Firefox 的画布与基于 Chromium 的浏览器中的行为相同？

【英文标题】：How to make Firefox's canvas behave the same as in Chromium-based browsers?

【发布时间】：2021-11-10 02:31:18

【问题描述】：

在基于 Chromium 的浏览器中（我正在使用勇敢），canvas 是这样呈现的：

但在 Firefox 中，出于某种原因，它是这样渲染的：

这是我正在使用的方法：

context.drawImage(image, 100, 100, 100, 400);

我没有在 canvas 元素上使用任何 CSS，只是这样：

html,
body 
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;

这将调整大小并附加 canvas:

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

export const graphics = canvas.getContext("2d");

const adaptResolution = () => 
  canvas.width = innerWidth;
  canvas.height = innerHeight;
;

adaptResolution();
addEventListener("resize", adaptResolution);

我可以让 Firefox 的 canvas 行为与在基于 Chromium 的浏览器中的行为相同吗？造成这种差异的原因是什么，我该如何解决？

---

这是我要在屏幕上渲染的 SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   
   
   viewBox="0 0 203.2 152.4"
   version="1.1"
   id="svg5"
   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
   sodipodi:docname="box.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="px"
     showgrid="false"
     units="px"
     inkscape:zoom="0.38752104"
     inkscape:cx="107.09096"
     inkscape:cy="187.08661"
     inkscape:window-
     inkscape:window-
     inkscape:window-x="0"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#000000;stroke-width:0.387859"
       id="rect31"
       
       
       x="-1.7069"
       y="-1.7068989" />
  </g>
</svg>

【问题讨论】：

什么是image，如果是HTMLImageElement，它指向什么图像，如果是svg，请显示它的标记。

是的，它是一个 svg。我将编辑并放置标记。

【参考方案1】：

这是我已在 the specs 上报告的互操作问题。 不幸的是，它还没有获得太大的吸引力......

问题是目前还不清楚drawImage 的调整大小选项应该对哪个“图像”起作用。 Chrome 认为它应该将输入的 svg 视为其默认大小并对其进行拉伸，Firefox 认为调整大小选项是输出框，并将 svg 内容适应此框。

要获得 Chrome 在 Firefox 中的行为，您可以将 preserveAspectRatio="none" 属性添加到 SVG 图像的根：

const svg = new Blob([`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   preserveAspectRatio="none"
   
   
   viewBox="0 0 203.2 152.4"
   version="1.1"
   id="svg5"
   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
   sodipodi:docname="box.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="px"
     showgrid="false"
     units="px"
     inkscape:zoom="0.38752104"
     inkscape:cx="107.09096"
     inkscape:cy="187.08661"
     inkscape:window-
     inkscape:window-
     inkscape:window-x="0"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#000000;stroke-width:0.387859"
       id="rect31"
       
       
       x="-1.7069"
       y="-1.7068989" />
  </g>
</svg>`],  type:"image/svg+xml");
const img = new Image();
img.src = URL.createObjectURL(svg);
img.onload = e => document.querySelector("canvas").getContext("2d").drawImage(img, 0, 0, 100, 400);

<canvas width="500" height="500"></canvas>