ImageBitmap from SVG - 一些字体大小的锯齿状文本

Posted 2023-03-24

技术标签:

【中文标题】ImageBitmap from SVG - 一些字体大小的锯齿状文本【英文标题】：ImageBitmap from SVG - Jagged Text for some Font Sizes 【发布时间】：2021-12-12 20:15:06 【问题描述】：

我正在动态创建包含透明背景上的文本的 SVG 代码。 SVG 应该在画布上绘制，字体应该来自 Google Fonts。

问题：

虽然该方法基本有效，但某些字体大小显然会产生带有createImageBitmap() 的不良 alpha 通道，从而导致可怕的锯齿状文本。

我在 Windows 10 和 Ubuntu 上的最新版本 Chrome 上都遇到了这个问题。停用 Chrome 的硬件加速不会改变任何事情。

输出图片：Text with jagged edges

简而言之，这就是代码的作用：

createImageBitmap()

function createSvg(bckgrColor1, bckgrColor2, w, h, fontSize) 
  return `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events" version="2" viewBox="0 0 $w $h"  >
    <style type="text/css">
      @font-face 
        font-family: 'Lobster';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/lobster/v23/neILzCirqoswsqX9zoKmMw.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      
    </style>
    <text x="0" y="50" font-family="Lobster" font-size="$fontSize">
      Hello World!
    </text>
  </svg>`;


const _embedAssets = async function(svgSrc) 
  const _imageExtensions = ["png", "gif", "jpg", "jpeg", "svg", "bmp"];
  const _fontExtensions = ["woff2"];
  const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
  /**
   * @uses https://***.com/a/8943487/1273551
   * @license CC BY-SA 4.0.
   */
  const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
  const allUrls = svgSrc.match(urlRegex);
  const assetUrls = allUrls.filter((url) =>
    _assetExtensions.some((extension) =>
      url.toLowerCase().endsWith(`.$extension`)
    )
  );
  const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
  const assetFetcherResults = await Promise.all(assetBase64Fetcher);
  return assetFetcherResults.reduce(
    (svgSrc, x) => svgSrc.replace(x.url, x.base64),
    svgSrc
  );
;

// Fetch asset (image or font) and convert it to base64 string representation.
const _fetchBase64AssetUrl = async function(assetUrl) 
  return new Promise(async(resolve, reject) => 
    const resp = await fetch(assetUrl);
    const blob = await resp.blob();
    const reader = new FileReader();
    reader.onloadend = (event) => 
      const target = event.target;
      if (!target) 
        return reject(`Asset with URL "$assetUrl" could not be loaded.`);
      
      const result = target.result;
      if (!result) 
        return reject(`Asset with URL "$assetUrl" returned an empty result.`);
      
      resolve(
        url: assetUrl,
        base64: result.toString()
      );
    ;
    reader.readAsDataURL(blob);
  );
;

const createImageBitmapFromSvg = async function(svgSrc) 
  return new Promise(async(resolve) => 
    const svgWithAssetsEmbedded = await _embedAssets(svgSrc);
    const svgBlob = new Blob([svgWithAssetsEmbedded], 
      type: "image/svg+xml;charset=utf-8"
    );
    const svgBase64 = URL.createObjectURL(svgBlob);
    let img = new Image();
    img.onload = async() => 
      const imgBitmap = await createImageBitmap(img);
      resolve(imgBitmap);
    ;
    img.src = svgBase64;
  );
;

const renderCanvas = async function(canvas, svgSource, width, height, color) 
  canvas.width = width;
  canvas.height = height;
  let svgEmbedded = await _embedAssets(svgSource);
  let svgImageBitmap = await createImageBitmapFromSvg(svgEmbedded);
  let ctx = canvas.getContext("2d");
  if (ctx) 
    ctx.fillStyle = color;
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 2;
    ctx.fillRect(0, 0, canvas.width, canvas.height); //
    ctx.strokeRect(0, 0, canvas.width, canvas.height); //for white background
    ctx.drawImage(svgImageBitmap, 0, 0, canvas.width, canvas.height);
  
;

const renderCanvasAlternative = async function(canvas, svgSource, width, height, color) 

  // create imagebitmap from raw svg code  
  let svgImageBitmap = await createImageBitmapFromSvg(svgSource);

  // temporary intermediate step as suggested on *** 
  const osc = await new OffscreenCanvas(width, height)
  let oscx = osc.getContext("bitmaprenderer")
  oscx.transferFromImageBitmap(svgImageBitmap);

  const svgImageBitmapFromOffscreenCanvas = osc.transferToImageBitmap();
  // const svgImageBitmapFromOffscreenCanvas2 = await createImageBitmap(osc); // results in empty bitmap

  // draw image bitmap on canvas
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext("bitmaprenderer");
  if (!ctx) throw new Error("Could not get context from canvas.");
  ctx.transferFromImageBitmap(svgImageBitmapFromOffscreenCanvas);


const bootstrap = async() => 
  // width and height for svg and canvases
  const w = "300";
  const h = "80";

  // create two svg sources, only difference is fontsize of embedded font
  const svgSourceGood = createSvg("", "", w, h, 49);
  const svgSourceBad = createSvg("#990000", "", w, h, 48);

  // draw GOOD svg in canvas
  renderCanvasAlternative(
    document.getElementById("myCanvas01"),
    svgSourceGood,
    w,
    h,
    "green"
  );

  // draw BAD svg in canvas
  renderCanvasAlternative(
    document.getElementById("myCanvas02"),
    svgSourceBad,
    w,
    h,
    "red"
  );
;

bootstrap();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div>SVG drawn in Canvas, Fontsize 49</div>
  <canvas id="myCanvas01"></canvas>
  <div>SVG drawn in Canvas, Fontsize 48</div>
  <canvas id="myCanvas02"></canvas>
  <script src="index.js"></script>
</body>

</html>

【问题讨论】：

看起来像浏览器错误。您在哪个浏览器上遇到此问题？停用硬件加速是否仍会重现该问题？（在我的装有 macOS 的计算机上，它在 Chrome 和 Firefox 中呈现良好，Safari 面对 bugs.webkit.org/show_bug.cgi?id=39059 但这只会呈现 sans-serif 而不是 web-font）。另外，请在问题本身中包含一个最小示例。您可以使用<> 图标附加实时 sn-ps，并且可以通过仅显示损坏的情况来简化示例。哦，鉴于 Safari 的错误，您可能仍想添加超时，您可以尝试通过将 svg 图像绘制到中间画布并从该画布创建 ImageBitmap 来解决该错误（仍然在Safari 有一点延迟）。 @Kaiido 我在 Windows 10 和 Ubuntu 上的最新版本的 Chrome 上都遇到了这个问题。停用 Chrome 的硬件加速不会改变任何事情。这绝对是一个错误，请在 crbug.com 上打开一个问题，并提供有关您的配置的详细信息。 【参考方案1】：

由于画布上下文也接受HTMLImageElement 作为输入，因此在这里使用createImageBitmap() 是多余的。相反，我们返回加载的 DOM <img> 本身，从而绕过 createImageBitmap()，这显然会导致锯齿状边缘。感谢@Kaiido。

const createImageFromSvg = async function(svgSrc: string): Promise < HTMLImageElement > 
  return new Promise(async resolve => 
    // replace assets with their base64 versions in svg source code 
    const svgWithAssetsEmbedded = await _embedAssets(svgSrc);

    // create blob from that
    const svgBlob = new Blob([svgWithAssetsEmbedded], 
      type: 'image/svg+xml;charset=utf-8'
    );

    // create URL that can be used in HTML (?)
    const svgBase64 = URL.createObjectURL(svgBlob);

    let img = new Image();
    img.onload = async() => 
      resolve(img);
    ;
    img.src = svgBase64;
  );
;

【讨论】：

以上是关于ImageBitmap from SVG - 一些字体大小的锯齿状文本的主要内容，如果未能解决你的问题，请参考以下文章

C# Byte[]ImageBitmap 之间的相互转换

Byte[]ImageBitmap_之间的相互转换

是否可以在没有画布的情况下从 ImageBitMap Web 对象中获取像素？

如何在 Jupyter Notebook 的同一行上显示两个 SVG 图像

d3 svg 阴影差异

SVG动画