无法维护aspectratio-What'我的代码错了

Unable to maintain aspectratio - What's wrong in my code

本文关键字：我的 代码 错了 维护 aspectratio-What      更新时间：2023-09-26

编辑：我不明白为什么不能保持绘制图像的纵横比。有人能帮忙解决这个问题吗？

我正在尝试上传一个图像，并使用imageDraw((绘制它，并将其放入一个100px 100px的画布元素中。

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画布中图像的大小因子：

// 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>
相关文章：