Question

我正在尝试复制动态上传的图片。我正在使用drawImage（）来做到这一点。如何在保持宽高比的同时使用drawImage（）复制动态上传的图像？

HTML：

<button id="button1">Picture</button>
<div id="main">
    <img id="profile_pic" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/CocaColaBottle_background_free.png/200px-CocaColaBottle_background_free.png">
</div>
<div id="lgt_1">
    <div>
        <canvas id="lcv_1" class="drw"></canvas>
    </div>
</div>

JS：

$("#button1").click(function(){
    alert("sdfsfsdf")
    var ctx = $('#lcv_1').get(0).getContext('2d');
    var img = $('#profile_pic').get(0);
    ctx.drawImage(img,0,0,75,75);
 });

如果还有其他更好的方法，我愿意接受这些想法。

Answer 1

你可以保持身高;图像宽度：

$("#button1").click(function(){
  alert("sdfsfsdf")
  var ctx = $('#lcv_1').get(0).getContext('2d');
  var img = $('#profile_pic').get(0);
  ctx.drawImage(img,0,0,img.width, img.height);
});

Answer 2

您可以做的是计算在可用区域内拟合图像所需的比例。如果图像太高或太宽，这应该有用。

它还会放大较小的图像以适应该区域，因此，如果您不想要的话，只需将比例限制为1.

var areaWidth = 300,
    areaHeight = 150;
var scale = Math.min(areaWidth / img.width, areaHeight / img.height);
ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);

修改：Tested out on your fiddle

Answer 3

试试这个：

将图像宽度和高度乘以所需的百分比：

$("#button1").click(function(){
    var ctx = $('#lcv_1').get(0).getContext('2d');
    var img = $('#profile_pic').get(0);
    ctx.drawImage(img,0,0, img.width * 0.50, img.height * 0.50);
 });

http://jsfiddle.net/2uxj0v6u/3/

Answer 4

我将图像集中在画布上，保持纵横比更新了fiddle。

 $("#button1").click(function(){
        //alert("sdfsfsdf")
        var ctx = $('#lcv_1').get(0).getContext('2d');
        var img = $('#profile_pic').get(0);
        var width = ctx.canvas.width;
        var height = ctx.canvas.width * (img.height / img.width);
        if (height > ctx.canvas.height) {
            height = ctx.canvas.height;
            width = ctx.canvas.height * (img.width / img.height);
        }
        ctx.drawImage(img,(ctx.canvas.width - width) / 2, (ctx.canvas.height - height) / 2, width, height);
  });

复制动态上传的图像

4 个答案: