Interface ImgCropperConfig output - more detail in docs

[jmpreston]

🪲 Bug report

I'm trying to figure out how to get a jpg file instead of base64 as the Output for the image cropper. The output config looks interesting for that but I need more explained how it is used.

[Enlcxx]

You can't get a jpg image, maybe we could get a blob.
For now it is only possible to obtain the image in base64, would it be fine if the result were in blob?

[jmpreston]

Well, I've spent days trying to figure out how to convert a blob into a jpg and have an open Stack Overflow issue on that posted yesterday. I've never worked with any of this before so I'm lost on this part. Your cropper is very good! I just can't figure out what to do with a dataURL. I could post it to my db but images don't belong in a db, only a reference to them. So rather stuck. It would be good if the docs helped us who were new to working with images.

[Enlcxx]

What database are you using?

[Enlcxx]

For example I am using Firebase Storage, this accepts files from File, Blob and base64, even an array of bytes.

[jmpreston]

I’m using Postgres. It will accept the object but images are supposed to be in folders, not db’s, from everything I’ve known over the years. S3 is a common setup. The issue is storage. The cropped image shows fine if I put the dataURL in a var and display it with [src]=image. I’ve heard that browsers will soon not support dataURL’s for security reasons. I would prefer to display jpg’s.

…

On Oct 22, 2019, at 11:08 AM, Enmanuel ***@***.***> wrote: For example I am using Firebase Storage, this accepts files from File, blob and base64 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#98?email_source=notifications&email_token=ABH56PMVHFBNBBBWEHHGQVTQP46QHA5CNFSM4JCRITDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB6VOXY#issuecomment-545085279>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABH56PJ65Y3QRY72KENJANDQP46QHANCNFSM4JCRITDA>.

[jmpreston]

By the way, I tried to use Discord. What a train wreck they are. Their MFA implementation is stupid. Please find another solution.

…

On Oct 22, 2019, at 11:08 AM, Enmanuel ***@***.***> wrote: For example I am using Firebase Storage, this accepts files from File, blob and base64 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#98?email_source=notifications&email_token=ABH56PMVHFBNBBBWEHHGQVTQP46QHA5CNFSM4JCRITDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB6VOXY#issuecomment-545085279>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABH56PJ65Y3QRY72KENJANDQP46QHANCNFSM4JCRITDA>.

[Enlcxx]

I think you should convert base64 to a File object, a File object is equal to the e.target.files[0] of a

e.g.

const file = dataURLtoFile(e.dataURL, e.name);
var upload = new AWS.S3.ManagedUpload({
    params: {
      Bucket: albumBucketName,
      Key: photoKey,
      Body: file,
      ACL: "public-read"
    }
  });

// from https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
function dataURLtoFile(dataurl: string, filename: string) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

[jmpreston]

I’ve looked at that but it doesn’t seem to turn the dataURL back into a binary jpg. So what this does is turns the dataURL into a file is my understanding and then I just call that file, load it into a var, and display the var in <img [src]=“var”… Interesting approach. Jim

…

On Oct 23, 2019, at 9:58 AM, Enmanuel ***@***.***> wrote: I think you should convert base64 to a File object, a File object is equal to the e.target.files[0] of a e.g. const file = dataURLtoFile(e.dataURL, e.name); var upload = new AWS.S3.ManagedUpload({ params: { Bucket: albumBucketName, Key: photoKey, Body: file, ACL: "public-read" } }); // from https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f function dataURLtoFile(dataurl: string, filename: string) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#98?email_source=notifications&email_token=ABH56PKVY47JNDCCYQ3ZYH3QQB7BPA5CNFSM4JCRITDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECCEIDY#issuecomment-545539087>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABH56POI32RGFQ3OGLW75JLQQB7BPANCNFSM4JCRITDA>.

[Enlcxx]

I don't understand that from a binary jpg. The cropped image has to be uploaded to a server, once uploaded, you can get the url to use it in the template.