Convert HEIC to JPG , using php or JS

Question

Anyone tried to convert a heic to jpg?

I looked at the official repository, but I did'nt understand how it works. All examples in the repository are working. But when I try to process my photo, made on the iphone, the script refuses to process it.

Answer 1

I've had some luck recently with the conversion using libheif. So I made this library which should greatly simplify the whole process

https://github.com/alexcorvi/heic2any

The only caveat is that the resulting PNG/JPG doesn't retain any of the meta-data that were in the original HEIC.

Answer 2

I managed to convert heic to jpg with the help of heic2any js library (https://github.com/alexcorvi/heic2any/blob/master/docs/getting-started.md)

I converted the picture on client side, then gave it to the input in client side. Server is seeing it as it was originally uploaded as jpg.

    function convertHeicToJpg(input)
    {
        var fileName = $(input).val();
        var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
        if(fileNameExt == "heic") {
            var blob = $(input)[0].files[0]; //ev.target.files[0];
            heic2any({
                blob: blob,
                toType: "image/jpg",
            })
                .then(function (resultBlob) {

                    var url = URL.createObjectURL(resultBlob);
                    $(input).parent().find(".upload-file").css("background-image", "url("+url+")"); //previewing the uploaded picture
                    //adding converted picture to the original <input type="file">
                    let fileInputElement = $(input)[0];
                    let container = new DataTransfer();
                    let file = new File([resultBlob], "heic"+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
                    container.items.add(file);

                    fileInputElement.files = container.files;
                    console.log("added");
                })
                .catch(function (x) {
                    console.log(x.code);
                    console.log(x.message);
                });
        }
    }

    $("#input").change(function() {
            convertHeicToJpg(this);

     });

What I am doing is converting the heic picture to jpg, then previewing it. After that I add it to the original input. Server side will consider it as an uploaded jpg. Some delay can appear while converting, therefore I placed a loader gif while uploading.