Question

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

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

Answer 1

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

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

2 个答案: