Javascript如何更改图像src的高度和宽度答案

【问题标题】：Javascript How to change height and width of an image srcJavascript如何更改图像src的高度和宽度
【发布时间】：2014-12-24 02:12:39
【问题描述】：

我正在尝试做一些非常简单的事情。我想从文档中获取图像。将其绘制到屏幕上。并且能够根据我的选择调整此图像的高度和宽度。我现在拥有的根本不会改变大小。我究竟做错了什么？我不想为此使用除 Javascript 之外的任何东西。

var ctx = document.getElementById('mycanvas').getContext('2d');
var img = new Image();

function draw(){
    img.onload = function(){
    ctx.drawImage(img,100,100);
    };

img.style.height = '300px';
img.style.width = '300px';
img.src = "test.png";
}

draw();

【问题讨论】：

您只想在屏幕上还是在画布内渲染图像？
我想在画布内渲染它
不是还有额外的右大括号'}'吗？

标签： javascript image canvas height width

【解决方案1】：

context.drawImage 有额外的参数可以为你调整大小：

var img=new Image();
img.onload=function(){
    var scaleFactor=2.00;
    ctx.drawImage(
        img,
        100,100,
        img.width*scaleFactor,img.height*scaleFactor
    );    
}
img.src='test.png'

【讨论】：