WASM-ImageMagick icon indicating copy to clipboard operation
WASM-ImageMagick copied to clipboard

how to convert to webp??

Open nenge123 opened this issue 3 years ago • 1 comments

屏幕截图(2)

    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>

nenge123 avatar Jul 04 '22 17:07 nenge123

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.

ppyne avatar Sep 05 '22 16:09 ppyne