如何让putImageData覆盖整个画布

Question

我使用画布中的getImageData，并使用putImageData将其显示在另一个画布上。但是它不会覆盖整个canvas.It，在它的原始size.Is中显示图片，有一种方法可以让裁剪后的图片覆盖整个canvas.Thank，你在advance.Both画布中的尺寸是300 x 300。

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var imgData = ctx.getImageData(tx,new_ty ,x, new_y);
ctx2.putImageData(imgData, 0, 0);

Answer 1

在这段代码中，您可以看到如何使用css缩放另一个画布(我使用字符串而不是图像来避免CORS)

如果您想使用最近邻或像素化，我还添加了一个类

​

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var w = 150;
var h = 70;

c.width = w;
c.height = h;

ctx.font = "50px Arial";
ctx.fillText('Image',0,50);

var x = 5;
var y = 15;

var cw = 60;
var ch = 35;

c2.width = cw;
c2.height = ch;

var scale = 2;

c2.style.width = scale*cw+'px';
c2.style.height = scale*ch+'px';

var imgData = ctx.getImageData(x,y,cw,ch);
ctx2.putImageData(imgData, 0, 0);

document.querySelector('input[name=pixelate]').addEventListener('change',()=>{c2.classList.toggle('pixelate')});

canvas {
  border: 1px solid #333;
}
.pixelate {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

<canvas id="area_c"></canvas>
<canvas id="area_c2"></canvas>
<input name="pixelate" type="checkbox"><label for="pixelate">Pixelate</label>

​