將從URL提取的圖像轉換爲base64

Question

我每次通過Facebook登錄時都會抓取用戶的Facebook個人資料圖片。我想從URL中將圖像轉換爲64位。這樣做的最佳方式是什麼，同時確保用戶仍然可以在視圖（home.view）中看到他們的個人資料圖片？目前，我直接參考了URL。

這是到目前爲止我的代碼：

facebook.service.js

function FacebookService($http, config) { 
     this.getUserPicture = function(userId, token) { 
     return $http({ 
     method: 'GET', 
     url: 'https://graph.facebook.com/' + userId + '/picture?type=large&redirect=false' 
     }) 
    } 
    } 

home.controller.js

function HomeController($scope, $cordovaNativeStorage, FacebookService, $ionicLoading) { 
    if (window.cordova) { 
    // Get Facebook access token 
    $cordovaNativeStorage.getItem("facebookAccessToken").then(function(value) { 
     $scope.facebookAccessToken = value 

     // Get Facebook user picture (currently stored as a URL, would want to store it as a base 64 string which can be displayed as an image 
     FacebookService.getUserPicture($scope.facebookUserData.id).then(function(dataResponse) { 
     $scope.facebookUserPicture = dataResponse.data; 

     // Save Facebook user picture 
     $cordovaNativeStorage.setItem("facebookUserPicture", $scope.facebookUserPicture).then(function() {}, function(error) { 
      console.error("Unable to cache user data: " + result); 
      $ionicLoading.show({ 
      template: 'Unable to cache user data', 
      duration: 1500 
      }) 
     }); 
     }, function(error) { 
     console.log(error.data.error.message) 
     }) 
    }, function(error) { 
     console.log(error.data.error.message) 
    }) 
    } 
}; 

home.view.js

<img class="icon icon-home img-circle" ng-src="{{ facebookUserPicture.data.url }}"> 

Answer 1

有通過畫布（source）做到這一點的方法：

var convertImgToDataURLviaCanvas = function(url, callback) { 
    var img = new Image(); 

    img.crossOrigin = 'Anonymous'; 

    img.onload = function() { 
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var dataURL; 
    canvas.height = this.height; 
    canvas.width = this.width; 
    ctx.drawImage(this, 0, 0); 
    dataURL = canvas.toDataURL(); 
    callback(dataURL); 
    canvas = null; 
    }; 

    img.src = url; 
} 

convertImgToDataURLviaCanvas('http://some.com/images/1.jpg', function(base64_data) { 
    console.log(base64_data); 
}); 

Answer 2

你可以使用這個輔助函數來獲取一個網址，並轉換成dataURI。

function getDataUri(url, callback) { 
var image = new Image(); 

image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size 
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size 

    canvas.getContext('2d').drawImage(this, 0, 0); 

    // Get raw image data 
    callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); 

    // ... or get as Data URI 
    callback(canvas.toDataURL('image/png')); 
}; 

image.src = url; 
} 

用法：

getDataUri($scope.facebookUserPicture.url, function(dataUri) { 

// here you can set it up as the img src for the profile picture 
    $scope.profilePictureUri = dataUri; 

}); 

你也可以將此定義爲一個承諾，而不是回調。

最後，<img class="icon icon-home img-circle" ng-src="{{profilePictureUri}}">

Read more on this wonderful article by David Walash

Answer 3

這將獲取任何資源作爲BLOB和使用的FileReader將其轉換爲一個base64數據URL。如果你在哪裏使用帆布＃toDataURL你不會得到相同的base64 ...

var blob = new Blob(['Simulate a url']) 
 
var url = URL.createObjectURL(blob) 
 
console.log("original blob size", blob.size) 
 

 
fetch(url) 
 
.then(res => res.blob()) 
 
.then(blob => { 
 
    var fr = new FileReader() 
 
    fr.onload =() => { 
 
    var b64 = fr.result 
 
    console.log(b64) 
 
    console.log("base64 size: ", b64.length) 
 
    $iframe.src = b64 
 
    } 
 
    fr.readAsDataURL(blob) 
 
})

<iframe id="$iframe"></iframe>

---

有更好的方法來解決這個問題，那就是存儲原始二進制你以某種方式得到了一個blob。 Base64是要佔用3點〜更多的數據，因爲JavaScript字符串是UTF-16它會佔用2倍更多的內存...

一些好的alternetives的是IndexedDB和沙盒文件系統API