xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js download canvas image All In One

js download canvas image All In One


// const dataURL = temp.toDataURL('image/png');

const canvas = document.querySelector(`#canvas_image`);

const dataURL = canvas.toDataURL('image/png');

document.write(`<img src="${dataURL}" />`);

https://www.fotor.com/photo-editor-app/editor/basic

demo

// svg to canvas to image

const callback = () => {
    setTimeout(() => {
        const canvas = document.getElementById("canvas");
        const base64URL = canvas.toDataURL("image/png");
        const aTag = document.createElement(`a`);
        aTag.setAttribute(`href`, base64URL);
        aTag.download = "svg-to-canvas.png";
        aTag.click();
        setTimeout(() => {
            canvas.setAttribute(`class`, "auto-hidden");
        }, 0);
    }, 1000);
};

refs

https://www.cnblogs.com/xgqfrms/p/11278677.html

https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image

https://stackoverflow.com/questions/59248058/canvas-todataurlimage-svgxml-returning-dataimage-pngbase64



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(46)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
历史上的今天:
2021-05-12 前端可视化布局生成器 All in One
2020-05-12 DDD
2020-05-12 skills share & free videos
2020-05-12 Dark Web & 暗网 & Tor
2020-05-12 CV
2020-05-12 域名
2020-05-12 召回 & 召回算法 All In One
点击右上角即可分享
微信分享提示