alexcorvi / heic2any Goto Github PK

Thank you for the tool!
I had an error adding the library to my component.
"ERROR in ./node_modules/heic2any/dist/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\projects\myproject\node_modules\heic2any\dist'"

Can you suggest how to fix it?

I am using the library to upload images to the server. very occasionally a client uploads an image and it appears distorted.
searching about the problem I found this:

filecoin-project/slate#200

The exact same thing happens to me in the image.

Hi,
I'm getting this error:

Content Security Policy: The page’s settings blocked the loading of a resource at
blob:https://localhost/e674b31d-9638-6947-880b-d26cbd237e8d (“worker-src”).

what could be the reason and the solution?

Hi, I am trying to convert this image with transparent background to png, unfortunately the result is that the background is black, is there any way to solve this?

Orig image is: https://transfer.sh/uR1GVKkW7g/image4.heic

Converted file size from regular image shot by Iphone camera is 10 times larger in result comparing 1.8mb & 16mb in result.

The heic2any library uses a web worker to convert HEIC files. After converting a file, the worker remain in memory until page refresh. It leaks about 70Mb on my machine.

Proposed fix: chebum@39327e2

It terminates web worker after 10 seconds of inactivity.

Fixed heic2any.js is available here: https://github.com/chebum/heic2any/tree/master/dist

The fix also includes pull request #27

When including this package in my vue3 app, I get the following error:
Uncaught SyntaxError: Invalid or unexpected token (at

Which points to this line: https://github.com/alexcorvi/heic2any/blob/3428539e643e112323a5b8a2c77c6402cb1372f6/dist/heic2any.js#L21

The workerString is too big, but here is the specific spot it is failing on:
isWindows:!(bA=\"data:application/octet-stream;base6

I think this workerString should be a dependency. Where is it's sourcecode? This one single line is 1.3MB in size...

Here is a sample file
Link for file

Getting "ReferenceError: Blob is not defined" error when doing a build in NextJS. Works fine in development and my .heic image is converted on the client side like I want but when doing a build to deploy it to production I get this error.

Here is where I use it in my code:

  const onDrop = useCallback(async (files) => {
    setFiles(
      await Promise.all(
        files.map(async (file) => {
          let result;
          if (file.type === "image/heic") {
            setConvertingImage(true);
            result = await heic2any({
              blob: file,
              toType: "image/jpeg",
            });
            setConvertingImage(false);
          } else {
            result = file;
          }

          return Object.assign(file, {
            preview: URL.createObjectURL(result),
          });
        })
      )
    );
  }, []);

I'm thinking it may have to do with the fact that NextJS is Server Side Rendered and when heic2any is executed on the server something funny happens?

Is there a way to reduce bundle size? When I run npm run build on this code, I got 1.15MB zipped size

I having this issue while running this code:

const a = fetch(pickerResult.fileCopyUri)
          .then(res => res.blob())
          .then(blob => {
            console.info(blob);
            return heic2any({
              blob,
              toType: 'image/jpeg',
              quality: 0.5, // cuts the quality and size by half
            });
          })
          .then(conversionResult => {
           // conversionResult is a BLOB
           // of the JPEG formatted image
           // with low quality
           })
          .catch(e => {
            console.error('Error at onPressStart()', e);
            // see error handling section
          });

console log:

 ERROR  ReferenceError: Property 'Worker' doesn't exist, js engine: hermes

at file heic2any.js (23:33)

Hi,

The description indicates that the library can be used asynchronously using web workers.

When importing a library into a web worker, I got an error:
Uncaught ReferenceError: window is not defined.

Is there a solution?

参数为：
toType: 'png',
quality: 1

heic2jpg-color-bug.zip

I tried to convert heic file to image/gif
but this error message happens.
what should I do?

I'm doing:

        const heicReader = new FileReader();

        heicReader.onload = async () => {
          const heicImageString = heicReader.result;

          const { download_url } = await uploadPhotoToGcs({
            base64: heicImageString,
            type: 'image/png',
          });
          this.onSubmitImageMessage(download_url);
        };

        const blobUrl = URL.createObjectURL(imageData);
        const blobRes = await fetch(blobUrl);
        const imgBlob = await blobRes.blob();
        const convertedFile = await heic2any({ blob: imgBlob });

        heicReader.readAsDataURL(convertedFile);
        return;

And the heicReader.readAsDataURL(convertedFile); complains about:

const convertedFile: Blob | Blob[]
Argument of type 'Blob | Blob[]' is not assignable to parameter of type 'Blob'.
  Type 'Blob[]' is missing the following properties from type 'Blob': size, type, arrayBuffer, stream, text

We are using heic2any in our Angular 11 project, and we love it since it solved the issues we had with images uploaded from iOS.

But using commonJS can raise some drawbacks that we would like to avoid. So I am wondering if you have any plans of creating an ECMAscript version of heic2any... e.g. heic2any-es?

This is the warning I get when compiling the Angular project:

Warning: /home/xyz/myApp/src/app/_components/message-composer/message-composer.component.ts depends on 'heic2any'. 
CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I know this warning is not the end of the world, but I like to keep things clean :-)

Hi!

Thanks for creating this library, I've been tearing my hair out wondering how to display heic images, but I am having some issues using the library locally.

Here is a repo that you can run locally and check what the issue is, and this is the code where I try to convert the image:

  useEffect(() => {
    const heic2any = require('heic2any');
    if (typeof window !== 'undefined') {
      fetch('https://alexcorvi.github.io/heic2any/demo/14.heic')
        .then((res) => res.blob())
        .then((blob) =>
          heic2any({
            blob,
          })
        )
        .then((conversionResult) => {
          setImg(URL.createObjectURL(conversionResult));
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }, []);

Essentially, when I try use URL.createObjectURL, the url that is created for the image returns a 404 page not found when I try to open it.

Would appreciate any help with this!

I'm curious why this converts to GIF (which is not designed for photos) rather than to JPEG (which is what most people want).

Either JPG should be the default or there should be a pull-down to allow people to select.

• Enhancement (I can't give this issue a label)

The following code creates a new function reference and never frees it.

Subsequent calls to heic2any will create a new instance of the message handler. Both handlers will be called. Converting Nth image will create Nth event handler and all N handler will receive message notifications.

Proposed fix: chebum@c6fab0a

Fixed heic2any.js is available here: https://github.com/chebum/heic2any/tree/master/dist

The fix also includes pull request #27

We have a strict Content Security Policy and unfortunately that prevents me from using heic2any. The code contains 2 references to new Function.

Wondering if that can be solved?

I've found a couple of .heic images that break your script, I've attached them below.

For one of them, the is_primary function throws a null pointer exception, and the other file just complains format not supported.

bad images.zip

Hi , I'm trying to implement heic2any in my project , but the very first thing that blocks me from moving on is the error in my log that shows Reference error : Blob is not defined .

I have no idea how to fix this and can't find related resources online .

Really appreciate if someone could help!

Thanks

Hello, thanks for creating this heic2any library for us.

I'm using nuxtjs, and running the nuxt build command to minify and prepare the project source code for a production deploy. See: https://nuxtjs.org/guide/commands#server-side-rendered-deployment-universal-ssr-

This is the minimal code I'm using at the moment:

var heic2any = require('heic2any');
file = await heic2any({
    blob: file,
    toType: "image/jpeg",
    quality: 0.75,
});

In dev-mode is works fine, though once in production mode my whole browser freezes and my cpu usage goes through the roof. This happens on all browsers and can be reproduced on other people's devices as well.
Also, there is no errors in the console

( Mac High Sierra 10.13 - on Firefox, Chrome, and Safari)

Also, on mobile IOS devices via Safari, it still breaks, though the image conversion breaks and the resulting output image is a broken image. See below:

Any idea whats going on?

Hi, #@alexcorvi
can you please help me out with this library to be used in server-side Rendering Cases as no Single-page Application Supports Meta-Sharing without server-side rendering. So can you help me in just adding few checks for Browser Side Rendering?

I'm getting the below error when triging to use it in an angular application. Any reason why & if it's supposed to be used in that way?

What I did:
Import in package.json
"heic2any": "0.0.2"
In a component, copy the exact code from the typescript tutorial.

index.js:1 Uncaught TypeError: Cannot assign to read only property 'stack' of object 'Error: No such file or directory'
    at index.js:1
    at Array.forEach (<anonymous>)
    at Object.ensureErrnoError (index.js:1)
    at Object.staticInit (index.js:1)
    at Object.<anonymous> (index.js:1)
    at Object../node_modules/heic2any/dist/index.js (index.js:430)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/image-converter/image-converter.component.ts (main.js:588)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app-routing.module.ts (main.js:341)

20240320-134430.heif.zip

One of the problems i see is that this library can not change the file dimensions.
It processes 4k image to 4k image. Could be cool if it could also rescale the image size

Here is my convertHeic function:

export async function convertHeic(heicFile: File) {
  const heic2any = require("heic2any");
  const convertedBlob = await heic2any({ blob: heicFile });
  const convertedFile = new File([convertedBlob], `${uuidv4()}.png`, {
    type: "image/png",
  });
  return { convertedBlob, convertedFile };
}

Here is my convertedFile:

convertedFile = {
    lastModified: 1702502344687,
    name: "23b275b5-b261-4fa2-b240-3c878d9047b8.png",
    size: 213143,
    type: "image/png",
    webkitRelativePath: ""
}

Working beautifully on Chrome. Breaks on Safari --> photo simply displays as a transparent box.

Using NextJS.

@alexcorvi any thoughts?

we use heic2any to change heic to jpeg in Android 13, but get an error: ERR_LIBHEIF format not supported.

in our test, heic image is validate.
we have no idea about which type of heic image will get this error.

is there any unsupported heic image with heic2any?

Most of the heic work well . However some of heic file can convert successfully but converted image become slant.

This is converted result.

This is original image.

Original_Image.zip

How many channels does resulted image have?
After converting file with heic2any I send it to machine learning script on server & it is constantly returns error with reason: Image should have at least 3 channels

Converting a 1.6mb HEIC image is taking about 5 seconds. Is this normal? And is there any way to speed it up?

My code:
...
const start = window.performance.now();
let image = await heic2any({ blob:file });
const stop = window.performance.now();
console.log('Elapsed time for heic2any: ${(stop - start) / 1000}s');
...

Result in console log:
Elapsed time for heic2any: 5.121s

For the sake of comparison, I tried converting the same image to PNG before uploading, which resulted in a 14.6mb file and it still only took 0.1 seconds for the entire upload.

Hello, it's me again.
Wish you a good day.
Today I have a problem with IE. It looks like heic2any does not support IE 11. I also tried running your demo in IE 11 and also encountered an error. I wish you could review it
Thank!

It looks like call to heic2any in Chrome for android never finishes execution. Same on iOS.

const jpegBlob = await heic2any({
// required: the HEIF blob file
blob: file,
// (optional) MIME type of the target file
// it can be "image/jpeg", "image/png" or "image/gif"
// defaults to "image/png"
toType: 'image/jpeg',
// conversion quality
// a number ranging from 0 to 1
quality: 0.5,
});

Did anyone manage to make it work on mobile browsers?

myHeicFile.zip
我的heic图片转换完后是这个样子的？是否是因为图片的编码不同还是有些必要的参数我没有填写？

十分感谢

Here is machine translation：

What does my Heic image look like after conversion? Is it because the encoding of the images is different or are there some necessary parameters that I did not fill in?

Test Device: iPhoneXR, iPhone13 Pro

I test it via your demo, the same bug happens as my program, I don't know how to solve this.

I am aware that this runs in the browser, whereas ImageMagick doesn't. However, I'm curious how the output compares to ImageMagick ("convert" / "mogrify" on command line). Thank you.

Showing this error in your demo while uploading that particular image.
Here I attach the console error that occurs while i am try to upload.

@alexcorvi Can you please look into this issue at the earliest

Here is the file that I tried to convert to jpeg (please unzip it to get the original HEIC image) and output jpeg does not contain EXIF GPS data.

cheers.heic.zip

The code is as follows:

        const HEICBlobFile: Blob = await this.makeImageIntoBlob(heicImagePath);

        const JPEGBlobFile: Blob = await heic2any({
            // required: the HEIF blob file
            blob: HEICBlobFile,
            // (optional) MIME type of the target file
            // it can be "image/jpeg", "image/png" or "image/gif"
            // defaults to "image/png"
            toType: 'image/jpeg',
            // conversion quality
            // a number ranging from 0 to 1
            quality: 0.8
        });

and then I save the jpeg file and it has no GPS data in EXIF.

It works on Chrome browser on my laptop but does not wok on Safari on iPhone. Does it expected behavior?

the photo type is HEIC, but heic2any is not support😭
heic-source

Hi,

I have also tried this plugin on Edge browser but this is coming as a outcome- "TypeError: Object doesn't support property or method 'toBlob'"

Any Suggestions would be appreciated!!!

Hi,
I'm the libheif author on which your wrapper is based and I'm afraid that your wrapper code is violating the usage terms of libheif.
Libheif is released under the LGPL license. You have integrated the code compiled to JavaScript verbatim into your repository, and released that with the incompatible MIT license.
Moreover, there is no mention that your wrapper uses libheif (and libde265), which violates at least against section 4a) of the LGPL.

I am fine that you use libheif and provide a wrapper for it, but to be compliant, you have to do at least these two things:

• Conform to section 3, 4, and 5 of the LGPL. In particular, place a prominent note that your code makes use of the libheif and libde265 libraries and include its licensing terms.
• You also have to change your license from MIT to GPL as there is no way for the end user to replace libheif.