Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to convert to webp?? #149

Open
nenge123 opened this issue Jul 4, 2022 · 1 comment
Open

how to convert to webp?? #149

nenge123 opened this issue Jul 4, 2022 · 1 comment

Comments

@nenge123
Copy link

nenge123 commented Jul 4, 2022

屏幕截图(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>
@ppyne
Copy link

ppyne commented Sep 5, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants