使用Javascript/AngularJS上傳圖像大小調整後的圖像

Question

我們正在構建一個應用程序，用戶可以上傳圖像，但是我需要在將圖像上傳到服務器之前調整圖像大小。該文件的輸入是一個輸入[type = file]，我們檢查圖像是否有效。如果有效，我們繼續以下請求：

Upload.upload({url: url, data: {file: input.x}, headers: {'Authorization': token}}); 

輸入變量是HTML中輸入字段的值。當我們不需要調整圖像大小時，此代碼很有用。不幸的是，這隻會是一個完美世界的情況。之後同樣的問題了一陣搜索，我似乎使用下面的函數已經找到了解決辦法：

var resize = function(size, url, callback) { 
    var temp = new Image(); 
    temp.onload = function() { 
     var target = { width: temp.width, height: temp.height, aspect: temp.width/temp.height }; 

     if (temp.width > temp.height) { 
      size = Math.min(temp.width, size); 
      target.width = size; target.height = size/target.aspect; 
     } else { 
      size = Math.min(temp.height, size); 
      target.height = size; target.width = size * target.aspect; 
     } 

     var canvas = document.createElement('canvas'); 
     canvas.width = target.width; canvas.height = target.height; 

     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(this, 0, 0, temp.width, temp.height, 0, 0, target.width, target.height); 

     callback(canvas.toDataURL(url.split(',')[0].split(':')[1].split(';')[0])); 
    }; temp.src = url; 
} 

這似乎是偉大的工作。我需要傳遞一個Base64字符串。所以，我包下內上傳方法：

var reader = new FileReader(); 
reader.onload = function(e) { 
    resize(1000, e.target.result, function(done) { 
     console.log(done); 
     Upload.upload({url: url, data: {file: done}, headers: {'Authorization': UserService.getToken()}}); 
    }); 
} 
reader.readAsDataURL(file); 

這樣我通過包含圖像一個Base64字符串，甚至這似乎是工作就像一個魅力。但最大的問題是，服務器需要一個真實的文件而不是Base64字符串。所以上傳本身失敗。

我在Convert Data URI to File then append to FormData上找到了應該解決這個問題的功能，但是沒有。我從鏈接添加方法後改變了方法如下：

var reader = new FileReader(); 
reader.onload = function(e) { 
    resize(1000, e.target.result, function(done) { 
     console.log(done); 
     Upload.upload({url: url, data: {file: dataURItoBlob(done)}, headers: {'Authorization': UserService.getToken()}}); 
    }); 
} 
reader.readAsDataURL(file); 

有任何影響，你知道我怎麼能再次改變Base64編碼字符串返回到一個文件？我發現大量的帖子解釋瞭如何在瀏覽器中顯示它們，但沒有解決我的問題將其作爲文件上傳。

Answer 1

對不起。但似乎dataURItoBlob函數工作正常，但blob內沒有原始文件名，所以我無法立即上傳。我改變了大小調整功能，所以它執行一次雙方的動作和這就是結果：

var resize = function(size, url, name, callback) { 
    var temp = new Image(); 
    temp.onload = function() { 
     var target = { width: temp.width, height: temp.height, aspect: temp.width/temp.height }; 

     if (temp.width > temp.height) { 
      size = Math.min(temp.width, size); 
      target.width = size; target.height = size/target.aspect; 
     } else { 
      size = Math.min(temp.height, size); 
      target.height = size; target.width = size * target.aspect; 
     } 

     var canvas = document.createElement('canvas'); 
     canvas.width = target.width; canvas.height = target.height; 

     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(this, 0, 0, temp.width, temp.height, 0, 0, target.width, target.height); 

     var type = url.split(',')[0].split(':')[1].split(';')[0]; 
     var data = canvas.toDataURL(type); 

     //callback(data); 

     var bytes = (data.split(',')[0].indexOf('base64') >= 0) ? atob(data.split(',')[1]) : unescape(dataURI.split(',')[1]); 

     var ia = new Uint8Array(bytes.length); 
     for(var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } 

     var blb = new Blob([ia], {type : type}); 
     blb.name = name; 

     callback(blb); 
    }; temp.src = url; 
}; 

上傳的文件，我做了以下內容：

VAR遞延= $ q.defer（）;

var reader = new FileReader(); 
reader.onload = function(e) { 
    resize(maxSize, e.target.result, image.name, function(done) { 
     deferred.resolve(Upload.upload({url: url, data: {file: done}, headers: {'Authorization': token})); 
    }); 
} 
reader.readAsDataURL(image); 

return deferred.promise;