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

Question

我正在尝试根据画布大小调整图像大小。我的代码如下。问题是当我尝试 drawImage() 时，它画得很好，但像素在图像中会失真。任何帮助将不胜感激！我一直在尝试做很多事情，比如使用画布 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 中没有任何宽度/高度。