Question

我正在尝试根据画布大小调整图像大小。我的代码如下。问题在于，当我尝试drawImage（）时，它绘制得很好，但像素在图像中变形。任何帮助将非常感谢!!我一直试图做很多事情，比如使用canvas imageData操纵像素，但根本没有运气:(

var imgURL = $('img#AS0017CF5A').attr('src');
                imgH = $('img#AS0017CF5A').height();
                imgW = $('img#AS0017CF5A').width();
                $('img#AS0017CF5A').parent().attr('id','pImg');
                $('img#AS0017CF5A').hide();

                imageObj = new Image();

                imageObj.onload = function(ev) {

                   document.getElementById('pImg').innerHTML = '<canvas id="myCanvas" width="' + imgW + '" height="' + imgH + '"></canvas>';
                    var toto = document.getElementById("myCanvas");
                    var c = toto.getContext("2d");
                    c.drawImage(imageObj, 0, 0, imgW, imgH);

                   //context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imgW, imgH);                 
                };
                imageObj.src = imgURL;

Answer 1

此代码适用于我：

var img = new Image();
img.src = "icon.png";
img.onload = function()
{
    document.body.innerHTML = '<canvas id="toto" width="' + img.width + '" height="' + img.height + '"></canvas>';
    var toto = document.getElementById("toto");
    var c = toto.getContext("2d");
    c.drawImage(img, 0, 0, img.width, img.height);
}

也许是JQuery失败了正确创建了画布？

确保画布上的css设置中没有任何宽度/高度。

如何使用画布动态缩放图像

1 个答案: