将画布的一部分复制到图像

2023-12-22

我尝试复制某一部分画布,然后将复制的部分写入图像中。这是我的(错误的)方法:

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(使用前将#替换为@)

将画布的一部分复制到图像 的相关文章

随机推荐