I want to convert Blob URL to image.
example blob url :
“blob:http://localhost:8100/df8119f0-ebf8-463f-a7dc-21b430e105c9”
this is ionic 3 code
.ts code
import { DomSanitizer, SafeResourceUrl, SafeUrl } from ‘@angular/platform-browser’;
constructor( private sanitizer: DomSanitizer)
let blob=‘blob:http://localhost:8100/df8119f0-ebf8-463f-a7dc-21b430e105c9’
this.img=this.sanitizer.bypassSecurityTrustResourceUrl(blob)
html
<img [src]=“img” >
Sorry, It’s not an image file. I want the image file. please…
sorry but i don’t understand what you say
I will send image file only to api of azure. So I want to convert blob url to image file for send file image to api.
I don’t know what “api of azure” is, but any reasonable service that is expecting to get giant amounts of data posted to it should have the ability to accept multipart form data, so look for documentation about how to do that.
This is a bad idea for several reasons, most of all just sheer inefficiency. FormData
is designed to transport Blob
s. You already have the data in the most efficiently-transmitted format. Just send it. Follow the patterns in the MDN documentation for FormData
.
Actually it is like uploading an image to a normal api, but I just want to convert the blob url to an image file.
Let’s say your Blob
is 12 megabytes.
What I am proposing:
- make a
FormData
object, give it a pointer to theBlob
, feed it toHttpClient
Scorecard:
Amount of memory needed on JavaScript side: negligible
Total RAM usage of webview: 12MB
Base64 encoding overhead: zero
Amount of data slung across JavaScript / native bridge: zero
Amount of device filesystem used and needing cleanup management: zero
Time spent waiting on device filesystem: zero
Network bandwidth used: 12MB
What you seem to be insisting on:
- read the
Blob
into a JavaScript variable - encode that using base64
- pass that across the JavaScript/native bridge
- decode the base64
- write the results to the native filesystem
- read from the native filesystem
- convert that to base64
- send that back over the bridge
- now allocate a new JavaScript variable
- send the base64 data up to the backend API
Scorecard:
Amount of memory used on JavaScript side: 32MB (two copies of base64-bloated 12MB)
Total RAM usage of webview: 68MB (one encoded and one binary copy on each side of the bridge, plus one more binary copy already sitting in the Blob
)
Base64 encoding overhead: 3 trips of 12MB
Amount of data slung across JavaScript / native bridge: 32MB
Amount of device filesystem used and needing cleanup management: 12MB
Time spent waiting on device filesystem: 12MB read, 12MB write
Network bandwidth used: 16MB
Can I resize the image file from the converted image?
example coding?..
Already given in the MDN link.
uploadPicture() {
const options: CameraOptions = {
quality: 100,
targetHeight: 200,
targetWidth: 200,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
this.selectedPhoto = this.dataURItoBlob('data:image/jpeg;base64,' + imageData);
this.upload(this.selectedPhoto);
}, (err) => {
console.log('error', err);
});
}
dataURItoBlob(dataURI) {
// codej adapted from:
// http://stackoverflow.com/questions/33486352/
//cant-upload-image-to-aws-s3-from-ionic-camera
let binary = atob(dataURI.split(',')[1]);
let array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
};
Again, why round-trip to base64 and back?
getPhotoBlob(): Observable<Blob> {
return from(this.camera.getPicture({destinationType: CameraResultType.Uri})).pipe(
map(camphoto => camphoto.webPath),
switchMap(uri => this.http.get(uri, {responseType: "blob"}));
}
getPhotoBlob().subscribe(photo => this.upload(photo));