HTML 画布:缩放图像以适合而不拉伸
HTML Canvas: Scaling image to fit without stretching?
我使用以下代码在画布内绘制和缩放图像。问题是渲染在里面的图像被拉伸以适应。
如果可能的话,我希望它根据宽度进行缩放,但要保持其纵横比。
有什么想法吗?
//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]);
}
您可以通过将图像添加到 DOM 来计算图像的尺寸。知道比例后,您可以缩放图像以适合画布。
ratio = width / height;
width = height * ratio;
height = width / ratio;
无论图像是横向还是纵向,以下内容都应该有效。
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>
你可以在这里玩
相关文章:
- 如何在 html5 中同时缩放多个画布
- 缩放和撤消在画布上重做无法正常工作
- HTML5画布/CSS缩放
- D3.js在画布和svg中映射缩放行为
- 定位D3 SVG画布x/y和加载时的缩放级别
- 如何平滑地设置HTML5画布fillText()的缩放动画
- HTML画布中的2D图形和统一缩放
- 如何计算缩放后画布的新高度和宽度
- 适用于 PDF 的 PhantomJS 屏幕截图 - 画布缩放
- HTML 画布:缩放图像以适合而不拉伸
- HTML5 画布缩放再次绘制
- HTML5 画布缩放我的绘图
- HTML5画布缩放图像动画
- Html5画布缩放
- HTML5画布缩放位置
- Jquery确定有效的DPI在画布缩放图像
- HTML画布缩放问题
- Gnuplot画布:缩放时抽搐消失
- 设置画布缩放原点
- 使用画布缩放图像而不使其模糊