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

Question

Предположим, у меня есть изображение и холст. Я использую api canvas для изменения отображаемого изображения.

Теперь мне нужно иметь 2 копии изображения, оригинал и измененную копию.

псевдокод для передачи того, что я пытаюсь сделать, будет:

var img = fetchImage();

context.drawLine(0, 0, 100, 100);

var copy = context.getImage();

Я пытался найти его, но не нашел ответа.

Edit:

Под «инициализацией» я подразумеваю создание глубокой копии изображения. Итак, исходное изображение не имеет линии, измененное изображение на холсте имеет линию, теперь мне нужно 2 независимых изображения, одно с линией, а другое без.

Answer 1

Если вы работаете с URL-адресами данных изображений, попробуйте этот фрагмент

  let imageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFIklEQVR4nO2aT2wUVRzHv7+36+y2NYUCLoYDZrHLVhoVNOpBSWgk6KUxxLSEEJUjakI9STzISaIxRtSEhIPxvxeQYAKJsf6ploNRiyY2DdPZXTbpwdpVhPCnbKez8/XQNTRhp/vnzezWOJ9b+95832++773fe2/eAiEhISH/YyQIUZKRqampzmKx2K6UEsMwrp0/f/5KX1+fE0R7OvhqgGma65RSOwBsJ5kGsKpcdJHkpIh8aRjGcDKZ/MPPdnXwxYB8Ph+3bXsQwAsA7gYQ9ajqkPwNwJuxWOxEMpks+tG+DtoG5HK5FY7jHATwLIC2Wp4hOQvgSCQSeSWVSl3WjUEHLQPKPX8IwBCASJ2POyQPRyKRl1Op1JxOHDoonYdt295Fch/qf3lgYZo8XyqVBnRi0KXhEWCa5joROQ1gi2YMZ0ulUv+mTZumF68eABCPx2fXr19/WURKmm140rABlmXtJfkuGuv9xcwDOEDyT6XU4+XVo6tcdlFEJgF87brucE9Pz++abd1EQwaQjGQymQ9J7vEpjmsADAC3eJQ7AMYBvGUYxjE/V4+GcsDU1FRnuaf8ogPeLw8s5IstAI7atn0ol8ut8Kvhhgwoz9GuqhX9pw3AkOM4B/P5fNwPQa1VoEVESO6zbXuXH2INGRCPx2cBXPQjgEYQkXYAQ6ZprtPVqssAkurcuXMbi8XiXgBrdRvX5J7yuUMLrz37TeTz+dszmcxzSqmnANyBgE6SdRDBwqHrY519Qk0GWJa12bbtNwD0YRnlDZLp8fHxTmhMx6oGWJa1meR70N/xBUFXLBZrh4YBS/ZmOckcxvJ8eV/wHAEkJZPJ7CO5rZkB1YOIXHddd3U2m1WlUsmNRqNXN2zYcEVE3Jo1vApM00yLyBcAkr5EGwxzAAokKSLzJAsiMqaUOmHb9g+9vb12NQFPAyzL2k/ybV/DbR6XROQDpdSr3d3dhaUqVswBIyMjUQCPBBJac1hJcsh13SPZbDaxVMWKBiQSiU7Xde8MJramISSfdF33pbGxMc+DVkUDDMNoF5GVwcXWNATAMx0dHQ97VVg2m5qgINklIju9yisaYNv2LMlLwYXVdB7w+oZQ0YBCoXBZKZULNqbmISIJx3FurVRW0YDyFdaZQKNqLvQq8MwBrusOA8gHEk7zKSilrlQq8DQgnU5bIvIJlnDvv4KI/Ox1A+V5FhARmqZ5VETuA3AvyZr318sFEREAV0me8KxTTWRiYmJVPB6vmED+C8zPzzvT09OF5Xg1H7IcCO67Hin931mrAeDUto0XINJYMvVLx4PAtsL9o9kBAMMCfPXEqDXYah0vAhkB/d9meiHu5wC6F1rhL6A8dqov/VcrdJbC9xEwMDFhQLn78W/QZaIlt66h65dONXw34PpMdCuIxUO1RFc+Pbn9rgut0KmG7waIyBYAi74lyBkRfNQqnWoEYIB7FsBM+c8ZCF9vZM76pVONmq/GaiVWSI/OJSZ3k3iQiPzYVuhu6FTpl041fFkFBo4xcv227FZB6SER/BQrpEePD9Z/X+eXTj34MgKKCWuHEO8DspbEzFxicjeAkVbp1IN2DugfmVwDyou4cV2+llT3t0qnXrQNIPE0wK2L/nWJ5K+t0qkXrSnQPzK5BsI9oNz4qZzgWFvCqSth+aXTCH4vg1m46p3jNdzJNUmnKtqrQP/3mUGwdAAUEuq1032pz1qpUy/6yyApO78xVwHAyUd7/tY59vqiExISEhISEhISUhv/AESDVQMMfbjKAAAAAElFTkSuQmCC';

  let image = document.querySelector('img');
  image.src = imageDataUrl;

  let canvas;

  image.addEventListener('load', () => {
    canvas = document.querySelector('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);

    let margin = 10;
    context.strokeRect(margin, margin, canvas.width - margin * 2, canvas.height - margin * 2);

    console.log('new data url:', canvas.toDataURL());
  });

<div>
  <img src="https://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-l.png">
</div>

<div>
  <canvas></canvas>
</div>

Answer 2

Вы получаете изображение из нарисованного холста с помощью метода getImageData .

Или, возможно, даже toDataURL может помочь .