【问题标题】:How to initialise an image from a canvas?如何从画布初始化图像?
【发布时间】:2019-09-24 07:54:30
【问题描述】:

假设我有一张图片和一张画布。我使用canvas api来修改显示的图像。

我现在需要 2 个图像副本,原始的和修改后的。

传达我想要做的事情的伪代码是:

var img = fetchImage();

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

var copy = context.getImage();

我已经尝试过搜索,但没有找到答案。

编辑:

“初始化”是指创建图像的深层副本。所以,原图没有线条,修改后的画布有线条,我现在需要2张独立的图片,一张有线条,一张没有。

【问题讨论】:

  • 不清楚您所说的“初始化图像”究竟是什么意思
  • 为清晰起见进行了编辑,希望现在没有歧义
  • 看看drawImage
  • 这允许我在画布上绘制图像,但我需要将画布绘制到图像上
  • 在什么上做什么并不重要)一旦你在画布上绘制了图像,你可以在上面添加任何额外的绘图(如线条)。

标签: javascript image html5-canvas


【解决方案1】:

您可以使用 getImageData method 从绘制的画布中获取图像。

或者甚至是toDataURL might be of help

【讨论】:

【解决方案2】:

如果你正在使用图像数据 URL,试试这个 sn-p

  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>

【讨论】:

    猜你喜欢
    • 2014-06-02
    • 1970-01-01
    • 2017-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多