croping and uploading?

[ghatul]

@cstefanache I going to upload profile image for my website .I want that new cropped image for upload on server. which i was set using your module but i am not getting how to pick that new image. I saw your module return all bounds/coordinates of image and then it apply on that image tag . is your module produce newly cropped image or only return new coordinates of that image?

[cstefanache]

data1.image (from the example plnkr) contains the base64 image <- this is what you need to use for uploading. Image cropper does not handle uploading.

[ghatul]

@cstefanache data1.image is get in base64 format, there is any another way to get that image in type=file format ? . i try to upload that image on server using multipart/form data so i stuck with that....

[ghatul]

@cstefanache any hint ?

[cstefanache]

Checkout this link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

[cstefanache]

is this still an issue?

[svojislav]

I am trying to do the same and I am stuck with it. I am getting strange data on server. Content is not the same on both sides. I send data1.image like a file and in the web service I am reading it but I am always getting extra bytes. I displayed daat1.image value in a text area and I searched last part of it in received file and I am always getting something extra. I used online base64 to img to check if console.log prints the whole picture data an seems like it is. Please can you provide some help. I don't know what else to try .

[ghatul]

@cstefanache yes step which i folllow to upload profile before using ng2-img-cropper step 1.(html-tag) input id="file-upload" type="file" (change)="fileChangeEvent($event)" placeholder="Upload file"

step 2. fileChangeEvent(fileInput:any) { var inputValue = fileInput.target; this.filesToUpload = <Array> fileInput.target.files; this.dashboardService.makePictureUplaod(this.filesToUpload, []).then((result:any) => { if (result !== null) { this.fileChangeSucess(result); } step 3.
var formData:any = new FormData(); var xhr = new XMLHttpRequest(); formData.append('uploads', files[0], files[0].name);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };
        xhr.open('PUT', url, true);
        xhr.setRequestHeader('Authorization', 'Bearer ' + LocalStorageService.getLocalValue(LocalStorage.ACCESS_TOKEN));
        xhr.send(formData);
    });

step 4. i stored that uploaded image into server directory and only return that server image path each time to show profile picture.
so problem is that your =>this.data1.image in base64 i try your above given link solution. it give image in blob data image but again i stuck with that if i choose to blob image data to upload then i use reference path of that image on server to show my profile picture .which not possible..........

please share u r knowledge about this........

[leksim]

Any way forward on this? I'm stuck.

[sanidhyamangal]

I am trying to crop image captured by my webcam but cant access cropper on my Image

[jawandsingh]

So, i had this situation and i wanted to upload the image to amazon s3 bucket. What i did was converted the base64 string to a blob. a blob object can be passed in XMLHttpRequest. here is the code to convert base64 to a blob.

`convertToBlob(base64Str:string){

var binary = atob(base64Str.split(',')[1]);
var array = [];
for(var i = 0; i< binary.length; i++){
  array.push(binary.charCodeAt(i));
}

return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});

} `

Hope this helps some one.

[AmirGilboa]

@jawandsingh : your function works great! add this, and you have a File object that can be pushed to the uploader queue:

blobToFile(theBlob, fileName){ theBlob.lastModifiedDate = new Date(); theBlob.name = fileName; return theBlob; }