[英]Javascript: Variable-sized image in fixed-sized canvas
I have a fixed HTML5 canvas with dimensions 300x300. 我有一个尺寸为300x300的固定HTML5画布。 I'm resizing other images on the page to have maximum widths/heights of 300px (depending on which dimension is larger) via Javascript.
我正在通过Javascript重新调整页面上其他图像的大小,使其最大宽度/高度为300px(取决于较大的尺寸)。
This doesn't actually resize the source images, though, and when I draw them on the canvas, the original size is used. 但是,这实际上并没有调整源图像的大小,并且当我在画布上绘制它们时,将使用原始大小。
Is there a way to: 有没有办法:
AND 和
(Think making a 300x300 Photoshop file where you drop in various images and they resize to fit) (请考虑制作一个300x300 Photoshop文件,在其中放置各种图像,然后它们会调整大小以适合)
Is this even possible with Javascript/canvas? Javascript / canvas甚至可能吗?
EDIT 编辑
Here is the code I ended up using based on the accepted answer: 这是我根据公认的答案最终使用的代码:
var ssItems = [exampleUrls], //array of image paths
imgHolder = document.getElementById("img-holder");
for (var i = 0; i < ssItems.length; i++) {
var img = new Image(),
imgSrc = "/ItemImages/Large/" + ssItems[i] + ".jpg",
imgW,
imgH;
img.src = imgSrc;
img.onload = function () {
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.setAttribute("class", "img-canvas");
canvas.setAttribute("width", "300");
canvas.setAttribute("height", "300");
imgHolder.appendChild(canvas);
imgW = (canvas.height * this.width) / this.height;
imgH = (canvas.width * this.height) / this.width;
if (this.height > this.width) {
ctx.drawImage(this, canvas.width / 2 - imgW / 2, 0, imgW, canvas.height);
} else {
ctx.drawImage(this, 0, canvas.height / 2 - imgH / 2, canvas.width, imgH);
}
}
I have created the fiddle that tries to match the scenario explained above. 我创建了试图匹配上述情况的小提琴。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = 'http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg';
// calculates width and height with respect to canvas
var width = (canvas.height * image.width) / image.height;
var height = (canvas.width * image.height) / image.width;
// takes width or height full choosing the larger value and centers the image
if(image.height > image.width){
ctx.drawImage(image, canvas.width / 2 - width / 2, 0, width, canvas.height);
}else{
ctx.drawImage(image, 0, canvas.height / 2 - height / 2, canvas.width, height);
}
You can take a look into it : https://jsfiddle.net/q8qodgmn/1/ 您可以看看它: https : //jsfiddle.net/q8qodgmn/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.