使用javascript調整圖像大小

我正在使用javascript函數輸入圖像。使用javascript調整圖像大小

這是我的HTML：

<input type="file" name="filUpload" id="filUpload" onclick="" onchange="showimagepreview(this)"> 
<br /> 
<div id="before"> 
<img id="imgprvw" alt="" class="img-thumbnail" style="width: 250px; height: 250px;" />

這是我的JavaScript：

function showimagepreview(input) { //image preview after select image 
    if (input.files && input.files[0]) { 
    var filerdr = new FileReader(); 
    filerdr.onload = function(e) { 
     url = e.target.result; 
     image = url; 
     $('#imgprvw').attr('src', url); 
     //console.log(url); 

     //$('#imgprvw').attr('src', e.target.result); 
     //url = e.target.result; 
     //$("#imgpath").val(url); 
    } 
    filerdr.readAsDataURL(input.files[0]); 
    } 
}

此代碼轉換圖像咬陣列，我需要使用咬數組來調整圖片的大小。有沒有可能的方法來做到這一點。

我會將該二進制數組傳遞給Web服務。我的圖像尺寸太高，需要很長時間，這就是爲什麼我需要轉換。

來源

2014-11-25 Saranga

如果你真的想調整圖片的大小（不只是更改網站上的大小），或許檢查出通過帆布調整：http://stackoverflow.com/questions/19262141/resize-image -with-javascript-canvas-smooth 但通常我會在後端做到這一點。 – nils 2014-11-25 09:21:38

我會將該二進制數組傳遞給Web服務。如果圖像尺寸太大，需要很長時間，這就是爲什麼我需要轉換。 – Saranga 2014-11-25 09:25:00

是的，然後通過畫布調整它。您可以使用'document.getElementById（「mycanvas」）。toDataURL（'image/png'）;'以便將PNG作爲數據URL。 – nils 2014-11-25 09:25:40

調整其大小，這樣在畫布上：

function showimagepreview(input) { //image preview after select image 
    if (input.files && input.files[0]) { 
    var filerdr = new FileReader(); 

    filerdr.onload = function(e) { 
     var img = new Image(); 

     img.onload = function() { 
     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('2d'); 
     canvas.width = 250; 
     canvas.height = canvas.width * (img.height/img.width); 
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 

     // SEND THIS DATA TO WHEREVER YOU NEED IT 
     var data = canvas.toDataURL('image/png'); 

     $('#imgprvw').attr('src', img.src); 
     //$('#imgprvw').attr('src', data);//converted image in variable 'data' 
     } 
     img.src = e.target.result; 
    } 
    filerdr.readAsDataURL(input.files[0]); 
    } 
}

我沒有測試過這還，但它應該工作。

Resize image with javascript canvas (smoothly)

來源

2014-11-25 09:35:59 nils

你試圖鏈接的問題[調整圖像與javascript canvas（smooth）]（http://stackoverflow.com/a/19262385/1960455），但它不是那樣可見的。作爲一個註釋：這個問題與鏈接的問題非常相似，所以它應該更好地標記爲重複。 – 2014-11-25 09:57:21

它很相似，但它沒有包含文件上傳並將加載的圖像添加到畫布。儘管如此，感謝代碼清理。我沒有找到簡單的縮進方法。 – nils 2014-11-25 10:01:04

我明白你的意思，我可能會錯的：但是一遍又一遍地創造答案，這只是略有不同，不會有助於保持清晰。問題是關於調整大小，而不是「如何將FileReader讀取的數據作爲圖像繪製到畫布中」或類似的東西。雖然OP可能不知道該怎麼做，但它應該是一個不同的問題恕我直言。 – 2014-11-25 10:19:39

使用javascript調整圖像大小

回答

相關問題