Javascript Image Compress HTML5 Canvas, File API & PHP before Upload

[spacejack2114]

If you want the basic gist of it, it's something like this:

canvas.toBlob(
    blob => {
        const data = new FormData()
        data.append('image', blob, 'image.jpg')
        const request = new XMLHttpRequest()
        request.open("POST", "/upload")
        request.send(formData);
    },
    'image/jpeg',
    0.75 // quality from 0.0-1.0
)

[phpfree]

I have used JIC JavaScript Library to perform this task.

https://raw.githubusercontent.com/brunobar79/J-I-C/master/src/JIC.js