javascript canvas 拉伸我的图像答案

【问题标题】：javascript canvas stretches my Imagejavascript canvas 拉伸我的图像
【发布时间】：2012-10-26 15:56:54
【问题描述】：

    $.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。但是画布拉伸了这个图像。如何使用原始宽度/高度进行图像

【问题讨论】：

1) width 和 height 不带单位。他们应该只是500。 2) 如果您还通过 CSS 应用宽度/高度，它们可能会倾斜画布绘图。应该避免这种情况。

标签： javascript jquery image canvas drawimage

【解决方案1】：

如果您只是想在不缩放的情况下显示图像，请使用 drawImage 的 three-argument variant 和仅 x 和 y：

ctx.drawImage(img,0,0);

如果您想将底部和右侧边缘裁剪为您指定的大小，请使用nine-argument variant：

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>

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

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

【讨论】：

我已经这样做了，但 Canvas 再次拉伸图像...... :(
简单的三参数版本是否也缩放您的图像？绝对不应该。如果是这样，您的画布可能存在 CSS 问题。确保您没有应用影响画布 CSS 宽度或高度的样式。
common.css 为空，在 html 中我不使用 css
事实证明，jQuery 实际上是在设置 CSS 属性，这与您的预期相反。有关该问题的讨论，请参阅this question。我用新的解决方案编辑了我的答案。

【解决方案2】：

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

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

希望对您有所帮助！

【讨论】：