更改高度和宽度的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改变其宽度的原因

你应该这样做我认为

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