使用javascript上傳圖片前收縮圖片

我正在使用phonegap編寫跨平臺移動應用程序，並且我有一個文件上傳輸入，用於上傳單張圖片。使用javascript上傳圖片前收縮圖片

問題是，大部分上傳的圖片都是使用手機拍攝的，大小約爲4MB。

我想大幅縮小這些圖像，因爲我根本不需要它們。

此外，我需要他們轉換爲base64，而不是在實際的圖像文件。（我已經有使用FileReader）

任何想法如何實現這一目標？也許使用畫布或其他？

更新： 這裏是我到目前爲止有：

function shrink() { 
    var self = this; 

    var reader = new FileReader(); // init a file reader 
    var file = $('#file-input').prop('files')[0]; // get file from input 

    reader.onloadend = function() { 

     // shrink image 
     var image = document.createElement('img'); 
     image.src = reader.result; 

     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(image, 0, 0, 300, 300); 
     var shrinked = canvas.toDataURL('image/jpeg'); 
     console.log(shrinked); 
    }; 

    reader.readAsDataURL(file); // convert file to base64*/ 
}

，但我得到的是一個黑色圖像感謝

來源

2013-03-10 shaharmor

的http：//計算器.com/questions/2434458/image-resizing-client-side-with-javascript-before-upload-to-the-server（這導致http://hacks.mozilla.org/2011/01/how-to- develop-a-html5-image-uploader /） – Sygmoral 2013-03-10 22:01:41

已更新於帖子 – shaharmor 2013-03-10 22:30:54

找到了答案。

問題是我沒有在繪製之前等待圖像完全加載。

一旦我加入

image.onload = function() { 

}

跑到裏面的一切它的工作原理。

來源

2013-03-10 23:00:39 shaharmor

這是否與您的其他代碼相關？ – Zairja 2015-08-31 21:05:36

我這知道一個古老的線程，但我對在何處放置「上載」同樣的問題，這個工作對我來說...

 navigator.camera.getPicture(function (imageURI) { 
      console.log("*** capture success. uri length...", imageURI.length);    
      var image = document.createElement('img'); 
      image.onload = function() { 
       var canvas = document.createElement('canvas'); 
       var ctx = canvas.getContext('2d'); 
       ctx.drawImage(image, 0, 0, 300, 300); 
       var shrunk = canvas.toDataURL('image/jpeg'); 
       console.log(shrunk); 
       // used shrunk here 
      } 
      image.src = imageURI; // triggers the onload 
     }

拍拍

來源

2015-12-17 23:20:45 Pat

使用javascript上傳圖片前收縮圖片

回答

相關問題