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

HTML5 & auto download image All In One

HTML5 & auto download image All In One

https://www.sitepoint.com/new-html5-attributes-hyperlinks-download-media-ping/

https://forums.adobe.com/thread/2569120

HTML5 Canvas - Download image from game


let aTag = document.createElement(`a`);

aTag.setAttribute(`href`, canvas.toDataURL("image/png"));

aTag.download = "YourScreenshot.png";

aTag.click();

// this.btn.addEventListener(`click`, f.bind(this));

function f(){
    aTag.click();
}

solutions

svg to canvas to image

https://codepen.io/webgeeker/full/VRMGyN

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>svg to canvas to image</title>
    <style>
        .auto-hidden{
            display: none;
            /* visibility: hidden; */
        }
    </style>
</head>
<body>
    <section>
        <svg width="500" height="100">
            <rect x="0" y="64" width="25" height="36" fill="navy"></rect><rect x="30" y="7" width="25" height="93" fill="navy"></rect><rect x="60" y="34" width="25" height="66" fill="navy"></rect><rect x="90" y="49" width="25" height="51" fill="navy"></rect><rect x="120" y="25" width="25" height="75" fill="navy"></rect><rect x="150" y="46" width="25" height="54" fill="navy"></rect><rect x="180" y="13" width="25" height="87" fill="navy"></rect><rect x="210" y="58" width="25" height="42" fill="navy"></rect><rect x="240" y="73" width="25" height="27" fill="navy"></rect><text x="0" y="61" width="25" height="36" class="high-light-color">¥12</text><text x="30" y="4" width="25" height="93" class="high-light-color">¥31</text><text x="60" y="31" width="25" height="66" class="high-light-color">¥22</text><text x="90" y="46" width="25" height="51" class="high-light-color">¥17</text><text x="120" y="22" width="25" height="75" class="high-light-color">¥25</text><text x="150" y="43" width="25" height="54" class="high-light-color">¥18</text><text x="180" y="10" width="25" height="87" class="high-light-color">¥29</text><text x="210" y="55" width="25" height="42" class="high-light-color">¥14</text><text x="240" y="70" width="25" height="27" class="high-light-color">¥9</text>
        </svg>
        <canvas id="canvas"></canvas>
    </section>
    <!-- js -->
    <script>
        const canvas = document.getElementById(`canvas`);
        const ctx = canvas.getContext(`2d`);
        // rect
        // ctx.fillStyle = `green`;
        // ctx.fillRect(10, 10, 150, 100);
        // image
        let svg = document.querySelector(`svg`);
        // let svg = document.createElement(`svg`);
        // ctx.drawImage(imageResource, dx, dy, dWidth, dHeight);
        // console.log(`svg.width =`, svg.width);
        // console.log(`vg.height =`, svg.height);
        let svgURL = new XMLSerializer().serializeToString(svg);
        let img = new Image();
        img.onload = function(){
            // console.log(`this =`, this);
            // img
            ctx.drawImage(this, 0, 0);
            callback();
        }
        img.src = `data:image/svg+xml; charset=utf8, ` + encodeURIComponent(svgURL);
        // ctx.drawImage(svg, 0, 0, svg.width, svg.height);
        // svg-to-canvas.html:39
        // Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
        // The provided value is not of type '(
        // CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas
        // )'
        const callback = () => {
            setTimeout(() => {
                // let canvas = document.getElementById("canvas");
                let base64URL = canvas.toDataURL("image/png");
                console.log(`base64URL =`, base64URL);
                // let img = document.createElement(`img`);
                // img.src = base64URL;
                // img.download;
                let aTag = document.createElement(`a`);
                aTag.setAttribute(`href`, base64URL);
                // aTag.setAttribute(`href`, canvas.toDataURL("image/png"));
                aTag.download = "svg-to-canvas.png";
                aTag.click();
                setTimeout(() => {
                    canvas.setAttribute(`class`, "auto-hidden");
                }, 1000);
            }, 1000);
        };
        // setTimeout(() => {
        //     let canvas = document.getElementById("canvas");
        //     let img = canvas.toDataURL("image/png");
        //     console.log(`img =`, img);
        //     // with the value in IMG you can write it out as a new Image like so:
        //     document.write(`<img src="${img}" />`);
        // }, 3000);
    </script>
</body>
</html>

demo

refs

©xgqfrms 2012-2020

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

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

posted @ 2019-03-12 16:06  xgqfrms  阅读(299)  评论(5)  编辑  收藏  举报