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

URLをフェッチし、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として任意のリソースを取得し、base64のデータのURLに変換するためにFileReaderを使用します。あなたはどこキャンバス＃のtoDataURLを使用する場合は、

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>

---

この問題を解決するための良い方法はあり...同じBASE64を得ないだろうと、それは生のバイナリを格納することですあなたはブロブとして何らかの形で得た。 Base64では〜3倍より多くのデータを取るために行くと、2倍より多くのメモリを取るために起こっているUTF16 javascriptの文字列以降

いくつかの良いalternetives

は