WASM-ImageMagick
WASM-ImageMagick copied to clipboard
how to convert to webp??

For license info of this project and related components see
<a href="https://github.com/knicknic/WASM-ImageMagick">https://github.com/knicknic/WASM-ImageMagick</a>
<BR>
<p>Source image: </p>
<img id="srcImage" src="rotate.png">
<BR>
<br>
<p>Rotated and enlarged image: </p>
<img id="rotatedImage">
<script src="./magick.js"></script>
<script>
let processFiles2 = function (file, args) {
if (!Module.moduleLoaded) {
return
}
stdout.splice(0, stdout.length)
stderr.splice(0, stderr.length)
exitCode = undefined;
FS.writeFile(file.name, file.content);
Module.callMain(args);
FS.unlink(file.name);
let dir = FS.open('/pictures');
let files = dir.node.contents;
let responseFiles = [];
for (let destFilename in files) {
let processed = {}
processed.name = destFilename
let read = FS.readFile(destFilename)
// cleanup read file
FS.unlink(destFilename)
processed.blob = new Blob([read])
responseFiles.push(processed)
};
return responseFiles;
};
let DoMagickCall = async function () {
let url = "rotate.png";
let sourceBytes = new Uint8Array(await (await fetch(url)).arrayBuffer());
let name = url.split('/').pop();
const command = ["convert", "-debug", "configure", name, "out.webp"];
let processedFiles = processFiles2({
'name': name,
'content': sourceBytes
}, command);
let firstOutputImage = processedFiles[0];
rotatedImage.src = URL.createObjectURL(firstOutputImage['blob']);
console.log("created image " + firstOutputImage['name'])
};
Module.onRuntimeInitialized = function () {
FS.mkdir('/pictures')
FS.currentPath = '/pictures'
Module.moduleLoaded = true
DoMagickCall()
}
</script>
You can convert png to webp directly in your browser thanks to a canvas, for instance:
// Your image is a png (or in another known format by your browser)
let img = document.querySelector('#my_image');
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.src = canvas.toDataURL('image/webp');
// Now the image is a webp...
I think ImageMagick is not very interesting for such conversion, and in fact this version was not compiled with this option.