1
如何裁剪图像然后将其绘制在画布中心?图像对象裁剪并在画布中心绘制
目前我有一个放置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;
}
你因为宽度和高度,这将无法正常工作的图像元件上设置大小为只读。将* canvas *大小设置为这些最大值并使用drawImage dest。尺寸来设置新的尺寸。 – K3N 2014-11-03 16:50:47