HTML5 canvas drawImage，如何保留图像源大小

Question

function getImageBase64Data(_id)
{   
    var c = document.createElement('CANVAS');
    var ctx = c.getContext("2d");
    var img = document.getElementById(_id);
    ctx.drawImage(img, 0, 0);
    var dataURL = c.toDataURL();
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

我正在使用HTML5 canvas获取base64编码的图像数据。 但是，与使用外部软件编码原始图像文件相比，生成的base64编码字符串是不同的并且较小。

我怀疑在画布上绘制的是页面上呈现的调整大小/压缩后的图像数据，而不是原始源数据。 是这种情况，如何获得图像的原始字节？ 至关重要的是，原始字节不得以任何方式进行操作。

Answer 1

要使其不压缩显示，请更改画布本身的高度/宽度：

var img = new Image(); // var img = document.getElementById(_id);
img.onload = function() {
    var c = document.createElement('canvas');
    c.width = img.width;
    c.height = img.height;
    // ... other stuff        
};