JavaScript更改高度和寬度不會改變SRC圖像

好吧，這是我想要做的。我要讓用戶上傳一張照片到dom中並調整它的客戶端。我需要在顯示圖像之前更改圖像的寬度，以便用戶通過$ .imgAreaSelect與其交互。然後我會去做其他的事情。JavaScript更改高度和寬度不會改變SRC圖像

但是我沒有得到正確的部分是「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/

來吧和拖放照片放進嘴裏，你就會明白我的意思。結果應該是一個更大的圖像。

來源

2014-12-02 PAT-O-MATION

你試過設置上'IMG＃photo'不是width？你有沒有試過設置風格而不是'.width'屬性？ '$（'img＃photo'）.css（「width」，「1200px」）;'？ – nnnnnn 2014-12-02 21:03:13

我認爲你的權利。我正在嘗試這個。 – 2014-12-02 21:51:24

您正在更改var image上創建的圖像引用的寬度，而不是html中的img元素。這就是原因HTML中的IMG doent改變其寬度

你應該這樣做，我認爲

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

來源

2014-12-02 21:07:17

謝謝，我會嘗試並更新我的結果。 – 2014-12-02 21:50:53

JavaScript更改高度和寬度不會改變SRC圖像

回答

相關問題