假设我有一个图像和一个画布。我使用画布API修改显示的图像。
我现在需要有2张图片的副本,原始副本和修改过的副本。
传达我想做的伪代码是:
NY-WM-3:dprsg jennifer.s$ python manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
May 06, 2019 - 14:04:00
Django version 2.1.2, using settings 'dprsg.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[06/May/2019 14:04:08] "GET /register/ HTTP/1.1" 200 7108
我尝试搜索它,但找不到答案。
编辑:
通过“初始化”,我的意思是创建图像的深层副本。因此,原始图像没有线条,画布中的修改图像有线条,我现在需要2个独立的图像,一个带有线条,一个没有线条。
答案 0 :(得分:1)
您可以使用getImageData
method从绘制的画布中获取图像。
答案 1 :(得分: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>