javascript - 如何使用 Reactjs 在新选项卡中将 Canvas 作为图像打开

Question

我目前有一个由 JsBarcode 的 react 实现生成的 Canvas 条码，称为 react-barcode。目前，我可以右键单击 Canvas 并在新选项卡中将其作为图像打开。我如何通过单击按钮来实现此功能？

我已经检查了这个问题的几个答案，但它们都使用 jquery。我正在寻找 React 或纯 js 的实现。

Answer 1

使用HTMLCanvasElement#toDataURL

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

我认为 SO 会阻止 window.open，但只需复制控制台记录的数据并将其粘贴到新选项卡中即可。

const canvas = document.getElementById("canvas");
const button = document.getElementById("click");

const context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(20, 20, 150, 100);

button.addEventListener("click", function(){
  const dataUrl = canvas.toDataURL("png");
  console.log(dataUrl);
  const win = window.open(dataUrl, '_blank');
});

<canvas id="canvas" width="100" height="100"></canvas>
<button id="click">Click</button>