首頁猿問如何將圖像縮放和居中到正方形尺寸？

如何將圖像縮放和居中到正方形尺寸？

JavaScript

哈士奇WWW 2021-11-12 16:07:41

這些問題很相似，但沒有幫助：this、this、this和this。目標是將圖像繪制到方形畫布上，同時保留原始縱橫比，如果原始縱橫比不是正方形，則將圖像居中。例如，獲取附加的 1262x2688 圖像。下面的代碼將其調整為 100x100，但它扭曲了縱橫比。代碼應該： (1) 縮放圖像以適合 100x100 畫布；(2) 保持縱橫比；(3) 在畫布內垂直和水平居中圖像。 // Create canvas element. var canvas = $(document.createElement("canvas")); // Get canvas context. var context = canvas[0].getContext("2d"); // Set canvas size. canvas[0].width = 100; canvas[0].height = 100; // Write image to canvas. context.drawImage(image, 0, 0, newWidth, newHeight);圖片

查看完整描述

3 回答

滄海一幻覺

TA貢獻1824條經驗獲得超5個贊

這是我們使用的代碼：

// Create canvas element.

var canvas = $(document.createElement("canvas"));

// Get canvas context.

var context = canvas[0].getContext("2d");

// Set canvas size.

canvas[0].width = canvasWidth;

canvas[0].height = canvasHeight;

// Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.

const imageWidth = image.naturalWidth;

const imageHeight = image.naturalHeight;

// Set scale to fit image to canvas,

const scale = Math.min(canvasWidth/imageWidth, canvasHeight/imageHeight);

// Set new image dimensions.

const scaledWidth = imageWidth * scale;

const scaledHeight = imageHeight * scale;

// Draw image in center of canvas.

context.drawImage(image, (canvasWidth - scaledWidth)/2, (canvasHeight - scaledHeight)/2, scaledWidth, scaledHeight);

反對回復 2021-11-12

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

要在保留外觀的同時使圖像適合畫布，請使用以下命令

const w = image.naturalWidth;

const h = image.naturalHeight;

// Get the min scale to fit the image to the canvas

const scale = Math.min(canvas.width / w, canvas.height / h);

// Set the transform to scale the image, and center to the canvas

ctx.setTransform(scale, 0, 0, scale, canvas.width / 2, canvas.height / 2);

// draw the image offset by half its width and height to center and fit

ctx.drawImage(image, -w / 2, -h / 2, w, h);

// to reset the transform

// ctx.setTransform(1,0,0,1,0,0);

反對回復 2021-11-12

守著一只汪

TA貢獻1872條經驗獲得超4個贊

假設我的計算方式正確，以下可能有效？

ratio = image.width/image.height;

if (image.width > image.height) {

output.height = ( 100 / ratio )

output.width = 100

output.x = 0

output.y = (100 - output.height) / 2

} else {

output.height = 100

output.width = 100 * ratio

output.x = (100 - output.width) / 2

output.y = 0

}

反對回復 2021-11-12

3 回答
0 關注
185 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將圖像縮放和居中到正方形尺寸？

如何將圖像縮放和居中到正方形尺寸？

3 回答

添加回答

如何將圖像縮放和居中到正方形尺寸？