无法维护aspectratio - 我的代码有什么问题 [英] Unable to maintain aspectratio - What's wrong in my code
本文介绍了无法维护aspectratio - 我的代码有什么问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
编辑：
我不明白无法保持绘制图像的宽高比的原因。有人可以帮助解决这个问题吗？
I'm not understanding the reason for not being able to maintain the aspect ratio of the drawn image. Can someone help to fix this?
我试图上传一个图像，并使用imageDraw（）绘制，并适合在100px 100px canvas元素。
I'm trying to upload an image and draw it using the imageDraw() and fit it within a 100px 100px canvas element.
html：
<div id="lbox">
<input type="file" id="uLo">
<div id="profilePic">
<canvas id="L1"></canvas><canvas id="L2"></canvas><canvas id="L3"></canvas><canvas id="L4"></canvas>
</div>
css：
#profilePic{
width: 200px;
}
#L1, #L2, #L3, #L4{
border: 1px solid;
height:100px;
width:100px;
}
js
var counter = 0;
var canvas = document.getElementById('uLo');
var oPlaceholder = document.getElementById('profilePic');
canvas.addEventListener('change', handleImage, false);
var originalCanvas = document.getElementById('L1');
function handleImage(e){
counter++;
var gEI_canvas = "L"+counter;
var canvas = document.getElementById(gEI_canvas);
var contx = canvas.getContext('2d');
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
var imageAspectRatio = img.width / img.height;
var canvasAspectRatio = canvas.width / canvas.height;
var renderableHeight, renderableWidth, xStart, yStart;
if(imageAspectRatio < canvasAspectRatio) {
renderableHeight = canvas.height;
renderableWidth = img.width * (renderableHeight / img.height);
xStart = (canvas.width - renderableWidth) / 2;
yStart = 0;
} else if(imageAspectRatio > canvasAspectRatio) {
renderableWidth = canvas.width
renderableHeight = img.height * ((renderableWidth / img.width) / 2);
xStart = 0;
yStart = (canvas.height - renderableHeight) / 2;
} else {
renderableHeight = canvas.height;
renderableWidth = canvas.width;
xStart = 0;
yStart = 0;
}
contx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
谢谢。
推荐答案
以下是如何计算尺寸因子，让drawImage适合您的100x100画布中的图像：
Here's how to calculate the sizing factor that will let drawImage fit the image in your 100x100 canvas:
// calculate the sizing factor that fits image in canvas
// while maintaining aspect ratio
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
return(Math.min((maxW/imgW),(maxH/imgH)));
}
// usage:
var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height);
ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer);
示例代码：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.src="yourImage.png";
function start(){
canvas.width=100;
canvas.height=100;
var w=img.width;
var h=img.height;
var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height);
ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer);
}
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
return(Math.min((maxW/imgW),(maxH/imgH)));
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于无法维护aspectratio - 我的代码有什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
