fileuploader icon indicating copy to clipboard operation
fileuploader copied to clipboard

Heic format conversion via heic2any

Open DiegoWtf opened this issue 3 years ago • 3 comments

Hi. Has anyone done such a feature? Can you share a working code? https://github.com/alexcorvi/heic2any

DiegoWtf avatar May 27 '21 11:05 DiegoWtf

@DiegoWtf doing such stuff right now, did almost everything except replacing heic image by jpeg (converting to it) and saving, have u succeed? Wanna just get some advices...

EBakirdinov avatar May 12 '22 10:05 EBakirdinov

Managed to fix all the issues, here is my code.

function convertheic2jpeg(blob, fileNameFull) {
  heic2any({
    blob: blob,
    toType: "image/jpeg"
  }).then(function (resultBlob) {
    var myFile = new File([resultBlob], fileNameFull.replace(/\.[^/.]+$/, "") + '.jpeg', {
      type: resultBlob.type,
    });
    var files = api.getFiles();
    for (let i = 0; i < files.length; i++) {
      var elCurrent = files[i];
      if (elCurrent.name.replace(/\.[^/.]+$/, "") == myFile['name'].replace(/\.[^/.]+$/, "")) {   
        api.update(elCurrent, {choosed: true, file: myFile, extension: "jpeg", type: resultBlob.type, name: elCurrent['title'] + ".jpeg"});
        files[i]['choosed'] = true;
        api.updateFileList();
        break;
      };
    };
  }).catch(function (x) {
    console.log([x.code, x.message]);
  });
};

"FileNameFull" var is the name of the file with !!HEIC extension!!

FileUploader has callback "beforeSelect", there i call heic2any function. If u want to add some loader u need "onSelect" callback.

beforeSelect: function(files, listEl, parentEl, newInputEl, inputEl) {
  for (let i = 0; i < files.length; i++) {
    var file = files[i];
    var fileFullName = file['name'];
    var fileExt = fileFullName.substr(fileFullName.lastIndexOf('.') + 1);
    var fileName = fileFullName.replace(/\.[^/.]+$/, "");

    if (fileExt.toLowerCase() == "heic") {
      var r = (Math.random() + 1).toString(36).substring(6);

      Object.defineProperty(files[i], 'name', {
        writable: true,
        value: `${fileName}${r}.${fileExt}`
      });

      convertheic2jpeg(files[i], files[i]['name']);
    }
  }
  return true;
},

EBakirdinov avatar May 13 '22 07:05 EBakirdinov

@innostudio i think we can close this issue :)

EBakirdinov avatar May 13 '22 07:05 EBakirdinov