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

我试图根据画布大小调整图像大小。我的代码如下。问题是，当我尝试绘制Image（）时，它绘制得很好，但像素在图像内变形。任何帮助将不胜感激！我一直在试图用帆布的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;

来源

2013-04-12 ArinCool

此代码的工作对我来说：

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任何宽度/高度画布上进行设置。

来源

2013-04-12 13:58:04 Razouille

它仍然无法正常工作。它获取画布渲染的图像具有模糊一些文字它与在图像标签中渲染时的显示方式相反。请帮忙！！！ :( – ArinCool

你有没有工作的地方？当你在你的onload函数中打印画布的宽度/高度时，他们是否与你的图片尺寸相同？ – Razouille

我试着用我使用的代码编辑上面的问题当我动态创建画布时，我试图用所需的比例尺高度和宽度来实现，然后使用相同的高度和宽度绘制图像 – ArinCool

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

回答

相关问题