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