如何使Firefox的畫布與基于Chromium的瀏覽器的行為相同？

在基于 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
   width="768"
   height="576"
   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-width="1920"
     inkscape:window-height="1016"
     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"
       width="206.87587"
       height="153.6207"
       x="-1.7069"
       y="-1.7068989" />
  </g>
</svg>

uj5u.com熱心網友回復：

這是我已經在規范中報告的互操作問題。
不幸的是，它還沒有得到太多的關注......

問題是目前還不清楚“影像”drawImage的調整大小選項應該起作用。Chrome 認為它應該以默認大小處理輸入 svg 并對其進行拉伸，Firefox 認為調整大小選項是輸出框，并將 svg 內容適應此框。

要在 Firefox 中獲取 Chrome 的行為，您可以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"
   width="768"
   height="576"
   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-width="1920"
     inkscape:window-height="1016"
     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"
       width="206.87587"
       height="153.6207"
       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>

標籤：javascript svg 火狐 帆布 铬

上一篇：Firefox列印上看不到表格邊框

下一篇：右對齊單個元素