JavaScript更改高度和宽度不会改变SRC图像

Question

好吧，这是我想要做的。我要让用户上传一张照片到dom中并调整它的客户端。我需要在显示图像之前更改图像的宽度，以便用户通过$ .imgAreaSelect与其交互。然后我会去做其他的事情。

但是我没有得到正确的部分是“image.width =”部分。当我将src设置为img时，在设置大小后，图像将保持相同的大小。

var readImage = function(file){ 

    var reader = new FileReader(); 
    var image = new Image(); 

    reader.readAsDataURL(file); 
    reader.onload = function(_file) { 

     image.src = _file.target.result; 
     image.onload = function() { 

      this.width = 1200; 

      $('img#photo').attr('src',this.src); 

     }; 
    }; 
}; 

下面是一个例子： http://patomation.com/dev/imagesizer2/

来吧和拖放照片放进嘴里，你就会明白我的意思。结果应该是一个更大的图像。

Answer 1

您正在更改var image上创建的图像引用的宽度，而不是html中的img元素。这就是原因HTML中的IMG doent改变其宽度

你应该这样做，我认为

$('img#photo').attr('width',this.width); 
$('img#photo').attr('src',this.src);