How can I convert BLOB data:application/octet-stream;base64 to data:image/png;base64 ?

The image are shown anyway but the browser doesn't let me to open the image in new tab with right click.

$http({
    url: image,
    responseType: 'blob'
}).then((resp)=>{
    var reader = new FileReader();
    reader.onload = function(){
        $scope.model.view.image = reader.result;
    };
    reader.readAsDataURL(resp.data);
});

How can I convert BLOB data:application/octet-stream;base64 to data:image/png;base64 ?

The image are shown anyway but the browser doesn't let me to open the image in new tab with right click.

$http({
    url: image,
    responseType: 'blob'
}).then((resp)=>{
    var reader = new FileReader();
    reader.onload = function(){
        $scope.model.view.image = reader.result;
    };
    reader.readAsDataURL(resp.data);
});

• javascript
• angularjs

• result.replace('data:application/octet-stream', 'data:image/png') ? – Felix Kling Commented Oct 24, 2017 at 22:56
• 1 haha, definitely not – Stepan Rafael Commented Oct 24, 2017 at 23:10
• Why not? jsfiddle/cb78q272 – Felix Kling Commented Oct 24, 2017 at 23:16
• Looks like was replaced but I need a more clearly method instead of put the browser to find a pattern in that long result. To run this action consecutively maybe the browser get LAG(like my console), but thank you very much ! :) – Stepan Rafael Commented Oct 24, 2017 at 23:43

1 Answer 1

Don't use base64, will be problematic if it's a very long url... instead use the URL.createObjectURL

window.URL = window.URL || window.webkitURL

$http({
  url: image,
  responseType: 'blob'
}).then(blob => {
  // change the type
  blob = new Blob([blob], {type: 'image/png'})
  $scope.model.view.image = URL.createObjectURL(blob)
})