我尝试复制某一部分画布,然后将复制的部分写入图像中。这是我的(错误的)方法:
var c = document.getElementById('MyCanvas'),
ctx = c.getContext('2d');
var ImageData = ctx.getImageData( 25, 25, 150, 150 );
var MyImage = new Image();
MyImage.src = ImageData ; // <-- This is wrong, but I mean something like this
你知道我该怎么做吗?
先感谢您。
ps:我不想复制整个画布,但是某一部分 of it.
您可以通过以下方式实现这一点......
var c = document.getElementById('MyCanvas');
var ctx = c.getContext('2d');
// draw rectangle
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#07C';
ctx.fillRect(25, 25, 150, 150);
// get image data
var ImageData = ctx.getImageData(25, 25, 150, 150);
// create image element
var MyImage = new Image();
MyImage.src = getImageURL(ImageData, 150, 150);
// append image element to body
document.body.appendChild(MyImage);
function getImageURL(imgData, width, height) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.putImageData(imgData, 0, 0);
return canvas.toDataURL(); //image URL
}
<canvas id="MyCanvas" width="200" height="200"></canvas>
apology for not giving explanation
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)