innostudio / fileuploader

Beautiful and powerful HTML file uploading tool. A jQuery, PHP and Node.js plugin that transforms the standard input into a revolutionary and fancy field on your page.
141 stars 25 forks source link

Heic format conversion via heic2any #71

Open DiegoWtf opened 3 years ago

DiegoWtf commented 3 years ago

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

EBakirdinov commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@innostudio i think we can close this issue :)