javascript - 如何调整 Canvas 以包裹图像尺寸

Question

您好，我里面有这个 Canvas 和图像，但我需要制作它，以便 Canvas 包裹与其大小链接的图像。现在我已经放置了测试图像并修复了大小。我希望当我放置并对 Canvas 进行成像时，将其包裹成图像的 100% 宽度 100% 高度。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}

var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){

ctx.drawImage(img,0,0);

var d=ctx.getImageData(0,0,cw,ch).data;

for(var i=0;i<d.length;i+=4){
if(d[i+3]>200){
  var px=parseInt(i/4);
  var pixelY=parseInt(px/cw);
  var pixelX=px-pixelY*cw;
  var boxX=parseInt(pixelX/boxWidth);
  var boxY=parseInt(pixelY/boxHeight); 
  boxes[boxY*boxCols+boxX]=true;
 }
  }

 ctx.globalAlpha=0.25;
 ctx.fillStyle='red';

 for(var i=0;i<boxes.length;i++){
 var y=parseInt(i/boxCols);
 var x=i-y*boxCols;
 if(boxes[i]==true){
  ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
 }
 }

ctx.globalAlpha=1.00;
ctx.fillStyle='black';

}

https://jsfiddle.net/kdichev/Lmqdrkp2/

Answer 1

如果您总是将图像加载到位置(0,0)，那么您可以通过添加

将 Canvas 的大小设置为加载图像的大小

  canvas.width = img.width;
  canvas.height = img.height;
  ctx=canvas.getContext("2d");

到 start() 函数的最开始处。前两行调整 Canvas 大小。调整大小后，必须更新上下文才能正常工作。