Как открыть холст как изображение в новой вкладке с помощью Reactjs - PullRequest
Новая
       33

Как открыть холст как изображение в новой вкладке с помощью Reactjs

5 голосов
/ 05 марта 2019

В настоящее время у меня есть штрих-код холста, сгенерированный реализацией JsBarcode реакции, называемый реагирующий штрих-код. В настоящее время я могу щелкнуть правой кнопкой мыши холст и открыть его в виде изображения на новой вкладке. Как реализовать эту функцию одним нажатием кнопки?

Я уже проверил несколько ответов на эту проблему, но все они используют jquery. Я ищу реализацию с React или чисто JS.

1 Ответ

4 голосов
/ 05 марта 2019

Использовать HTMLCanvasElement # toDataURL

Метод HTMLCanvasElement.toDataURL () возвращает URI данных, содержащий представление изображения в формате, заданном параметром типа (по умолчанию: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>
...