Question

编辑：我不理解无法保持绘制图像的纵横比的原因。有人可以帮忙解决这个问题吗？

我正在尝试上传图片并使用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]);     
}

谢谢。

Answer 1

以下是如何计算尺寸因子，让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>

无法维护方面 - 我的代码出了什么问题

1 个答案: