如何適合畫布以包裝圖像大小

你好，我有這個畫布和圖像，但我需要做到這一點，所以帆布包裹圖像鏈接到它的大小。現在我已經把測試圖像，並把大小來修復。我希望當我把圖像畫布包裹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/

來源

2015-03-31 user1780729

如果總是加載到位置(0,0)的影像，然後就可以通過添加

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

設置畫布所加載的圖像的尺寸的尺寸

到您的start()函數的最開始。前兩行重新調整畫布大小。在調整大小後，必須更新上下文以使其正常工作。

來源

2015-03-31 13:20:15 chillichief

如何適合畫布以包裝圖像大小

回答

相關問題