javascript画布可拉伸我的图像

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

如果只想显示图像而不进行缩放，请使用带有x和y的drawImage的三参数变体 ：

ctx.drawImage(img,0,0);

如果要将底部和右侧边缘修剪到指定的大小，请使用九参数变体 ：

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

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

编辑：

问题在于，jQuery函数将第二个参数中options对象的width和height属性视为CSS属性 ， 而不是 DOM对象属性。 如果检查生成的HTML，则会发现：

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>

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

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

有关该问题的讨论，请参见此问题。 作为解决方案，我建议改用：

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

Answer 2

尝试使用我最近创建的该库，该库可以加载图像，调整其固定宽度和高度或precentage的大小，并可以与base64或blob相互转换。

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

希望这对您有所帮助！