Как сохранить холст с изображением? - PullRequest
Новая
       44

Как сохранить холст с изображением?

0 голосов
/ 20 июня 2020

Я пытаюсь сохранить свой холст с изображением. Я пытался использовать toDataURL, но в данном случае это не работает. Холст предназначен для ввода изображения внутрь.

HTML

<img src="bg.png" id="toIMG" />
<canvas></canvas>
<img alt="UNCHANGED" id="getCtx">
<span>Why does the img doesn't change?</span>

JS

window.onload = function(){
  var c, ctx, img, img2;
  c = document.querySelector("canvas");
  ctx = c.getContext("2d");

  img = document.getElementById("toIMG");
  ctx.drawImage(img, 0,0, c.width, c.height);

  img2 = document.getElementById("getCtx");
  img2.src = ctx.canvas.toDataURL("image/png");
}

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Вместо того, чтобы запускать функцию при загрузке окна, запускайте ее после загрузки img. Кроме того, как указал @CrissCrossCrass, toDataURL - это метод холста, но не контекст. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <img
      id="toIMG"
      src="https://source.unsplash.com/random/120x120"
      crossorigin="anonymous"
    />
    <canvas></canvas>
    <img id="getCtx" />
    <script>
      var c = document.querySelector("canvas");
      var img = document.getElementById("toIMG");
      var img2 = document.getElementById("getCtx");
      var ctx = c.getContext("2d");
      img.onload = function() {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0, c.width, c.height);
        img2.src = c.toDataURL("image/png");
      };
    </script>
  </body>
</html>

Кроме того, вы можете установить для атрибута crossOrigin первого элемента img значение anonymous, чтобы избежать испорченного холста. Подробнее

0 голосов
/ 20 июня 2020

Я пробовал это, и на самом деле это работает. Поделитесь, если на консоли вылетает ошибка Тогда я обновлю свой ответ в зависимости от этого.

...