Question

    $.fn.imageCanvas = function() {

    if (!document.getElementById('bgCanvas')){
        $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'}))
        var canvas = document.getElementById('bgCanvas');
        var ctx = canvas.getContext('2d');
    }
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img,0,0,438,300);
        console.log(this.width);
        console.log(this.height);
    }
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

在ctx.drawImage中我写了x，y，width，height。但帆布延伸了这张图片。如何使用原始宽度/高度进行成像

Answer 1

如果您只是想在不缩放的情况下显示图片，请使用drawImage ctx.drawImage(img,0,0);只使用x和y：

ctx.drawImage(img,0,0,362,240,0,0,362,240);

如果您想将底边和右边剪裁到指定尺寸，请使用three-argument variant：

width

前四个数字设置剪裁矩形的x / y和宽度/高度，接下来的四个数字设置绘制到画布的剪切图像矩形的x / y和宽度/高度。

修改

问题是jQuery函数将第二个参数中options对象中的height和<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>属性视为 CSS属性，不是作为DOM对象属性。如果您检查生成的HTML，您会发现：

<canvas id="bgCanvas" width="500" height="500"></canvas>

而不是你想要的，应该是：

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))

有关该问题的讨论，请参阅nine-argument variant。作为解决方案，我建议改为使用：

{{1}}

Answer 2

尝试使用我最近创建的这个库，它可以加载图像，调整它的固定宽度和放大倍数。高度或百分比并从或转换为base64或blob。

https://github.com/vnbenny/canvawork.js

希望这能帮到你！

javascript画布拉伸我的形象

2 个答案: