javascript HTML Canvas：缩放图像以适应而不拉伸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28047792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Canvas: Scaling image to fit without stretching?
提问by Alejandro Gorgal
Im using the code below to draw and scale an image inside a canvas. The issue being that the image rendered inside is stretched to fit.
我使用下面的代码在画布内绘制和缩放图像。问题是内部渲染的图像被拉伸以适应。
If possible, I would like it to be scaled based on width but to maintain its aspect ratio.
如果可能，我希望它根据宽度进行缩放，但要保持其纵横比。
Any ideas?
有任何想法吗？
//IMAGE LOADER
var canvas = document.getElementById('image-canvas');
var canvas2 = document.getElementById('image-canvas2');
ctx = canvas.getContext('2d');
ctx2 = canvas2.getContext('2d');
// Trigger the imageLoader function when a file has been selected
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', imageLoader, false);
function imageLoader() {
var reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,canvas.width, canvas.height);
ctx2.drawImage(img,0,0,canvas.width, canvas.height);
}
img.src = reader.result;
}
reader.readAsDataURL(fileInput.files[0]);
}
回答by Juan Mendes
You can figure out dimensions of the image by adding it to the DOM. Once you know the ratio, you can scale your image to fit within your canvas.
您可以通过将图像添加到 DOM 来确定图像的尺寸。知道比例后，您可以缩放图像以适合画布。
ratio = width / height;
width = height * ratio;
height = width / ratio;
The following should work whether an image is landscape or portrait.
无论图像是横向还是纵向，以下内容都应该起作用。
var canvas = document.getElementById('image-canvas');
var canvas2 = document.getElementById('image-canvas2');
var ctx = canvas.getContext('2d');
document.getElementById('fileInput').addEventListener('change', imageLoader, false);
function imageLoader() {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function(){
var ct = document.getElementById('measure');
ct.appendChild(img);
var wrh = img.width / img.height;
var newWidth = canvas.width;
var newHeight = newWidth / wrh;
if (newHeight > canvas.height) {
newHeight = canvas.height;
newWidth = newHeight * wrh;
}
ct.removeChild(img);
ctx.drawImage(img,0,0, newWidth , newHeight);
}
img.src = reader.result;
}
reader.readAsDataURL(fileInput.files[0]);
}/* Add image to the DOM here so user can't see it */
#measure { position: absolute; left: -10000px; top: -100000px;}
canvas { border: 1px solid red; }<canvas id="image-canvas" width="300" height="300"></canvas>
<input type="file" id="fileInput" />
<div id="measure"></div>You can play with it here
你可以在这里玩
