javascript - return canvas as webp image - Stack Overflow

admin管理员组

文章数量:1320661

How can I return the canvas on this function as a webp image?

function capture(video) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    //var w = video.videoWidth * scaleFactor;
    //var h = video.videoHeight * scaleFactor;
    var w = 700;
    var h = 400;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        var uniq = 'img_' + (new Date()).getTime();
        canvas.setAttribute('id', uniq);
    return canvas ;
}

How can I return the canvas on this function as a webp image?

function capture(video) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    //var w = video.videoWidth * scaleFactor;
    //var h = video.videoHeight * scaleFactor;
    var w = 700;
    var h = 400;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        var uniq = 'img_' + (new Date()).getTime();
        canvas.setAttribute('id', uniq);
    return canvas ;
}

• javascript
• image
• canvas

Share Improve this question Follow edited Nov 9, 2023 at 7:25 ggorlen 57.4k88 gold badges111111 silver badges154154 bronze badges asked Nov 3, 2022 at 13:13 btgenbtgen 17511 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Canvas has a method known as .toDataURL(type, encoderOptions).

I this case the following snippet should suffice

canvas.toDataURL('image/webp');

This will give you a data url which is a base64 encoding of the image and will look something like

data:image/webp;base64,UklGRqgCAABXRUJQVlA4WAoAAAAwAAAAxwAAYwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgPAAAAAQcQEREAUKT//yWi/6lwAFZQOCBSAAAA8AcAnQEqyABkAD5tNplJpCMioSBoAIANiWlu4XXwADuh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJhYAAP7/wbAAAAAAAA==

More information for this can be found on https://developer.mozilla/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

本文标签： javascriptreturn canvas as webp imageStack Overflow