javascript - Angular 2 Image resize before upload - Stack Overflow

admin管理员组

文章数量:1026989

Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

export class WpMediaFormComponent { file: File;

resizeOptions: ResizeOptions = {
    resizeMaxHeight: 768,
    resizeMaxWidth: 438
};

selected(imageResult: ImageResult) {
    console.log(imageResult);
   this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
    let blob = this.dataURItoBlob(imageResult.resized.dataURL);
}

This then returns an object, like this:

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

I can then convert this object to a blob using this function:

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data ponent to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = decodeURI(dataURI.split(',')[1]);

        // separate out the mime ponent
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

Before doing this I was uploading the image to the server using this code:

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?

Im a little lost here.

Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

export class WpMediaFormComponent { file: File;

resizeOptions: ResizeOptions = {
    resizeMaxHeight: 768,
    resizeMaxWidth: 438
};

selected(imageResult: ImageResult) {
    console.log(imageResult);
   this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
    let blob = this.dataURItoBlob(imageResult.resized.dataURL);
}

This then returns an object, like this:

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

I can then convert this object to a blob using this function:

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data ponent to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = decodeURI(dataURI.split(',')[1]);

        // separate out the mime ponent
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

Before doing this I was uploading the image to the server using this code:

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?

Im a little lost here.

• javascript
• angular
• angular2-services

Share Improve this question Follow edited Mar 9, 2017 at 12:14 rhysclay asked Mar 9, 2017 at 6:51 rhysclayrhysclay 1,68333 gold badges2222 silver badges4343 bronze badges 4

• I am quite sure this is not possible, but would love to be proven otherwise! – Davy Commented Mar 9, 2017 at 12:34
• Oh but it is, I just took an 800kB file and posted it as 30kB, will post an update soon. All server side baby! – rhysclay Commented Mar 9, 2017 at 23:16
• Im confused now, is the resizing done on the client or server? – Davy Commented Mar 10, 2017 at 10:12
• The image is resized using the ng2-imageresize module, it's resized client side then sent to the server – rhysclay Commented Mar 11, 2017 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

So I figured it out with the help of @Brother Woodrow, and this thread: How to convert Blob to File in JavaScript

Here is my updated code, not the only thing I had to change was the selected method:

selected(imageResult: ImageResult) {
    // create a blob 
    let blob: Blob = this.dataURItoBlob(imageResult.resized.dataURL);
    // get the filename
    let fileName: string = imageResult.file.name;
    // create a file
    this.file = new File([blob], fileName);
    console.log(this.file);
    // event emitter send to container then to http post 
    this.update.emit(this.file);        
}

I can now upload 3MB and they are pushed to the server around 150kB in seconds which is great for the user especially as this app will mostly be used by mobile devices.

You'll need to convert the Data URI to a Blob, then send that back to your server. This might be helpful: Convert Data URI to File then append to FormData

Once you have the blob, it should be easy enough to use FormData and the Angular HTTP class to upload it to your server for further processing.

let formData = new FormData();
formData.append(blob);
this.http.post('your/api/url', fd).subscribe((response) => console.log(reponse);

Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

export class WpMediaFormComponent { file: File;

resizeOptions: ResizeOptions = {
    resizeMaxHeight: 768,
    resizeMaxWidth: 438
};

selected(imageResult: ImageResult) {
    console.log(imageResult);
   this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
    let blob = this.dataURItoBlob(imageResult.resized.dataURL);
}

This then returns an object, like this:

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

I can then convert this object to a blob using this function:

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data ponent to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = decodeURI(dataURI.split(',')[1]);

        // separate out the mime ponent
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

Before doing this I was uploading the image to the server using this code:

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?

Im a little lost here.

Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

export class WpMediaFormComponent { file: File;

resizeOptions: ResizeOptions = {
    resizeMaxHeight: 768,
    resizeMaxWidth: 438
};

selected(imageResult: ImageResult) {
    console.log(imageResult);
   this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
    let blob = this.dataURItoBlob(imageResult.resized.dataURL);
}

This then returns an object, like this:

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

I can then convert this object to a blob using this function:

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data ponent to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = decodeURI(dataURI.split(',')[1]);

        // separate out the mime ponent
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

Before doing this I was uploading the image to the server using this code:

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?

Im a little lost here.

• javascript
• angular
• angular2-services

Share Improve this question Follow edited Mar 9, 2017 at 12:14 rhysclay asked Mar 9, 2017 at 6:51 rhysclayrhysclay 1,68333 gold badges2222 silver badges4343 bronze badges 4

• I am quite sure this is not possible, but would love to be proven otherwise! – Davy Commented Mar 9, 2017 at 12:34
• Oh but it is, I just took an 800kB file and posted it as 30kB, will post an update soon. All server side baby! – rhysclay Commented Mar 9, 2017 at 23:16
• Im confused now, is the resizing done on the client or server? – Davy Commented Mar 10, 2017 at 10:12
• The image is resized using the ng2-imageresize module, it's resized client side then sent to the server – rhysclay Commented Mar 11, 2017 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

So I figured it out with the help of @Brother Woodrow, and this thread: How to convert Blob to File in JavaScript

Here is my updated code, not the only thing I had to change was the selected method:

selected(imageResult: ImageResult) {
    // create a blob 
    let blob: Blob = this.dataURItoBlob(imageResult.resized.dataURL);
    // get the filename
    let fileName: string = imageResult.file.name;
    // create a file
    this.file = new File([blob], fileName);
    console.log(this.file);
    // event emitter send to container then to http post 
    this.update.emit(this.file);        
}

I can now upload 3MB and they are pushed to the server around 150kB in seconds which is great for the user especially as this app will mostly be used by mobile devices.

You'll need to convert the Data URI to a Blob, then send that back to your server. This might be helpful: Convert Data URI to File then append to FormData

Once you have the blob, it should be easy enough to use FormData and the Angular HTTP class to upload it to your server for further processing.

let formData = new FormData();
formData.append(blob);
this.http.post('your/api/url', fd).subscribe((response) => console.log(reponse);

本文标签： javascriptAngular 2 Image resize before uploadStack Overflow