catdad-experiments / libheif-js

🤳 libheif as an npm module
GNU Lesser General Public License v3.0
65 stars 3 forks source link

How to make browser compatible with HEIC via userscript #32

Open pyorot opened 4 days ago

pyorot commented 4 days ago

I'm curious if this has been tried before. I want to add HEIC support to a photo-viewer web app on my local machine only. I've tried to make a userscript but have no experience with these. The goal is to get it to replace any <img> tag with an HEIC source with a render of the image.

This is as far as I got. It gives the error Could not parse HEIF file Invalid input: No 'meta' box.

// ==UserScript==
// @name      heif
// @match     https://www.blank.org/
// @grant     GM_xmlhttpRequest
// @require   https://cdn.jsdelivr.net/npm/libheif-js@1.17.1/libheif/libheif.js
// ==/UserScript==

(function() {
    'use strict';
    libheif = libheif()
    const decoder = new libheif.HeifDecoder();

    GM.xmlHttpRequest({
        method: "GET",
        url: "https://github.com/tigranbs/test-heic-images/raw/refs/heads/master/image1.heic",
        onload: function(response) {
            const file = response.responseText
            console.log(file)
            const data = decoder.decode(file);
        }
    });
})();