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);