圖像對象裁剪並在畫布中心繪製

如何裁剪圖像然後將其繪製在畫布中心？圖像對象裁剪並在畫布中心繪製

目前我有一個放置div的地方，我可以放置一個圖像，然後由JavaScript提取。然後我想要JavaScript來檢查更高（高度或寬度）。如果高度最高，我希望它是200px，寬度可以根據縱橫比進行調整。之後，我希望JavaScript在畫布中繪製圖像的中心，畫布的中心位於畫布的中心。

當前的代碼我有，這是不工作（我不知道爲什麼）：

（爲簡單起見，我剛剛通過從網絡到函數的圖像）

render('http://www.aboveandbeyond.nu/sites/www.aboveandbeyond.nu/files/news/europe_above_beyond_tour.jpg'); 



function render(src){ 

var image = new Image(); 
var canvas = document.getElementById("artworkcanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
image.onload = function(){ 

    var sourceX = 200; 
    var sourceY = 0; 
    var sourceWidth = 200; 
    var sourceHeight = 200; 
    var destWidth = sourceWidth; 
    var destHeight = sourceHeight; 
    var destX = canvas.width/2 - destWidth/2; 
    var destX = 0; 
    var destY = canvas.height/2 - destHeight/2; 
    var destY = 0; 
    var MAX_WIDTH = 200; 
    var MAX_HEIGHT = 200; 

    if (image.height == image.width) { 
     image.width = MAX_WIDTH; 
     image.height = MAX_HEIGHT; 
    } else {    
     if(image.height < image.width) { 
      console.log("height smaller"); 
      image.width *= MAX_HEIGHT/image.height; 
      image.height = MAX_HEIGHT; 
     } else { 
      image.height *= MAX_WIDTH/image.width; 
      image.width = MAX_WIDTH; 
     } 
    } 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    canvas.width = image.width; 
    canvas.height = image.height; 

    ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 
}; 

image.src = src;

}

來源

2014-11-02 Angelo A

你因爲寬度和高度，這將無法正常工作的圖像元件上設置大小爲只讀。將* canvas *大小設置爲這些最大值並使用drawImage dest。尺寸來設置新的尺寸。 – K3N 2014-11-03 16:50:47

這裏有一種方法使用的drawImage縮放版本，同時保持寬高比：

// calc scale that fits into 200x200 and also maintains aspect ratio 
    var scale=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height)); 

    ctx.drawImage(img, 
      0,0,img.width,img.height, 
      (canvas.width-img.width*scale)/2, (canvas.height-img.height*scale)/2, 
       img.width*scale, img.height*scale 
      );

enter image description here

實施例的代碼和一個演示：

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

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="http://www.aboveandbeyond.nu/sites/www.aboveandbeyond.nu/files/news/europe_above_beyond_tour.jpg"; 
 
function start(){ 
 

 
    var MAX_WIDTH = 200; 
 
    var MAX_HEIGHT = 200; 
 
    var iw=img.width; 
 
    var ih=img.height; 
 

 
    // calc scale that fits into 200x200 and also maintains aspect ratio 
 
    var scale=Math.min((MAX_WIDTH/iw),(MAX_HEIGHT/ih)); 
 
    var sw=iw*scale; 
 
    var sh=ih*scale; 
 

 
    ctx.drawImage(img, 
 
       0,0,iw,ih, 
 
       (canvas.width-sw)/2,(canvas.height-sh)/2,iw*scale,ih*scale 
 
       ); 
 

 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

來源

2014-11-03 01:00:47 markE

圖像對象裁剪並在畫布中心繪製

回答

相關問題