WebP Type Plugin

[binarykitchen]

Would be nice!

    Unsupported MIME type: image/webp

:(

[oliver-moran]

Totally agree. If there's a library out there than can read it and return it as an RGBA bitmap array then it's totally got a home here.

[webcaetano]

@oliver-moran you could mark it as help wanted

[leftstick]

Same issue^^, let's hope the library coming

[aurium]

How difficult could it be to encapsulate libWebP as Node.js addon?

[webcaetano]

@aurium https://github.com/webmproject/libwebp libwebp on github
https://github.com/lovell/sharp uses libwebp.

There`s also this project https://github.com/Intervox/node-webp

[aurium]

Nice @webcaetano! I could not fast discover how sharp uses libwebp, however it looks to be the path...

About node-webp, sadly is only a wrapper for cwebp and dwebp binaries and it can't return pixel buffer.

[CapnSpellcheck]

https://github.com/lovell/sharp uses libvips.

[riatzukiza]

Wouldn't adding those native addons as dependencies break browser support? Jimp couldn't use those as dependencies and still claim its self as "An image processing library written entirely in JavaScript for Node, with zero external or native dependencies."

[CapnSpellcheck]

If you are using Jimp in the frontend, then you're right. I don't know if the author of Jimp intends for it to be supported by browsers -- "for Node" to me means to be run on the server. Regardless, I'm doing an experimental migration to Sharp, since I don't have a concern of browsers.

[riatzukiza]

would still break the "zero native dependencies" part of the goal. The native APIs switch often, I believe it is an asset to have a library like this that does not depend on them.

[binarykitchen]

well i intend to use that on server side and do NOT want to use sharp, as it's too bloated and requires compilation upon installation which poses a risk when deploying to production.

all i want is a small and fast library able to convert webp and png images to jpeg. that's it. nothing else. nothing fancy, no compilation of any native stiff. how come it's still hard in 2018? :)

[hipstersmoothie]

@binarykitchen feel free to write a JS library the decode/encodes webP! Could be a really cool project

[hipstersmoothie]

here's the spec https://developers.google.com/speed/webp/docs/riff_container

[hipstersmoothie]

and here is the c++ code for the decoder in libwebp https://github.com/webmproject/libwebp/blob/master/src/dec/webp_dec.c

I'd be interested in doing this project with someone if they want to.

[hipstersmoothie]

or we could try to use web assembly

[hipstersmoothie]

https://medium.com/@kennethrohde/on-the-fly-webp-decoding-using-wasm-and-a-service-worker-33e519d8c21e

[andrevandal]

any update?

[ParsaGachkar]

it would be perfect to get WebP on Jimp, any updates?

[kdemarest]

I also support implementing WebP on Jimp. Bumping after six months.

[hipstersmoothie]

feel free to write a JS library the decode/encodes webP! Could be a really cool project

Since there is still no JS-based webP encoder/decoder, this still cannot be accomplished. The only way this happens is if we start to use a WASM port of the webP encoder/decoder. Happy to accept PRs, but I cannot devote the time to this endeavor myself.

I think the best path forwards to enabling webP + fixing all the memory and size issues is rewriting all the encoders/decoders to use the wasm compliled binaries of the original image type implementation (webp, jpeg, png). I tried to do this a few months ago and hit roadblocks. I might be able to try again in a few months, but no time soon

[barnabwhy]

There may be a solution to the WebP problem. I have found a workaround which, although not the most graceful method, gets the job done and allows jimp to use WebP images by converting them to png format using the webp-converter npm module. I'm not sure how this could be implemented into the jimp code though

return new Promise(async (resolve, reject) => {
    // Check if .webp, requires additional handling
    if(imgUrl.match(/(\.webp)/gi)) {
        // Get .webp image
        const file = fs.createWriteStream(__dirname+"/tmp.webp");
        const request = http.get(imgUrl, async function(response) {
            await response.pipe(file); // Save to tmp.webp
            let result = await webp.dwebp(__dirname+"/tmp.webp", __dirname+"/tmp.png", "-o"); // Convert to tmp.webp -> tmp.png
            let img = await Jimp.read(__dirname+'/tmp.png') // Read tmp.png for jimp
            fs.unlink(__dirname+"/tmp.webp", () => {}); // Remove tmp.webp
            fs.unlink(__dirname+"/tmp.png", () => {}); // Remove tmp.png
            resolve(img); // Resolve image converted to image/png
        });
        } else {
        // Read image type supported by jimp
        Jimp.read(imgUrl).then(async img => {
            resolve(img) // Resolve image
        });
    }
});

[barnabwhy]

Also I know that saving files can be an issue but in the context of the project I'm working on it's not a problem so if someone can find a way to allow it to depend solely on buffers rather than saving images that would be brilliant.
(Here is the npm link for webp-converter)

Also these are the packages I imported

var Jimp = require('jimp');
const webp = require('webp-converter');
const http = require('https');
const fs = require('fs');

[kylerchin]

Can we please support this?

[Aci-yt]

Bump, becoming more and more important with the amount of websites using webp now.

[hisham]

https://www.npmjs.com/package/@saschazar/wasm-webp seems like good pure js converter, I might try that.

[lafkpages]

Jimp definitely needs to support WebP, since it's becoming very popular lately.

[jiang-bx]

It seems like I have to use webp-converter.

[av01d]

Please add WebP support. This issue was opened in 2016. Eight years have passed, and WebP has become quite mainstream. Thanks!
I don't think a converter is needed anymore, as every modern browser supports extracting an image from canvas with the image/webp mimetype nowadays.

[mblarsen]

! I don't think a converter is needed anymore, as every modern browser supports extracting an image from canvas with the image/webp mimetype nowadays.

For most users that's definitely a win, but browsers are not the only runtime; mobile apps, backends, lambdas, etc. I don't know what the jimp policy is about support, but one could add this feature only for browsers is the support is as good as you say.

[nakedfool]

++ for WebP support!

[EthanHarsh]

Another ++ for webp support

[geekrainian]

Lol, no updates since 2016. This plugin is dead

[Aci-yt]

Still better than canvas, at least you can easily mask with images here

[hipstersmoothie]

I think there is actually hope here. I was searching npm and there are in fact encoder/decorders that we could use now!

If someone want to contribute a plugin using one of them I'd be open to it

[hipstersmoothie]

🚀 Issue was released in v1.2.0 🚀