如何使用 Reactjs 在新选项卡中将画布作为图像打开

Question

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

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

Answer 1

使用HTMLCanvasElement#toDataURL

HTMLCanvasElement.toDataURL() 方法返回一个数据 URI，其中包含以 type 参数指定的格式（默认为 PNG）的图像表示。 返回的图像的分辨率为 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>

Answer 2

如果图像数据大于 git 允许的最大值，则使用以下代码显示

function openImage(base64URL){
    var win = window.open();
    win.document.write('<iframe src="' + base64URL  + '" frameborder="0" style="border:0; 
   top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen> 
   </iframe>');
}