HTML5 & auto download image

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>

HTML5 & auto download image的更多相关文章

  1. html5的download下载标签

    Html5的下载标签download <a href="files/1.jpg" download="1.jpg">Download</a&g ...

  2. HTML5 & how to download SVG in js

    HTML5 & how to download SVG in js how to download SVG in js http://dinbror.dk/blog/how-to-downlo ...

  3. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  4. download & excel & blob

    download & excel & blob Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob FileReade ...

  5. Node.js Spider

    Node.js Spider How To Write a Spider using JavaScript, in order to auto download some svg images for ...

  6. Linux内核补丁批量自动下载工具

    Linux kernel官网cgit工具不支持按变更代码进行补丁搜索,想到个办法就是把补丁都抓下来,这样可以在本地搜索.花了2个小时写了个小工具,话不多说,直接看效果: E:\docs\TOOLS\p ...

  7. fabric devenv Vagrantfile配置

    Vagrantfile文件只会在第一次执行vagrant up时调用执行,其后如果不明确使用vagrant reload,则不会被强制重新加载. # This is the mount point f ...

  8. [PHP] php实现文件下载

    1. 设置超链接的href属性 <a href="文件地址"></a> 如果浏览器不能解析该文件,浏览器会自动下载.而如果文件是图片或者txt,会直接在浏览 ...

  9. 让资源可以下载a

    第一种方式------不存在任何兼容性 <a href='x.zip'>下载</a> 将要链接的资源进行打包即可 第二种方式----存在兼容性,目前只有Chrome 和Fire ...

随机推荐

  1. 遇到的web请求错误码集合与解释

    302 临时移动.与301类似.但资源只是临时被移动.客户端应继续使用原有URI

  2. numpy的shape 和 gt的x、y坐标之间容易引起误会

    用numpy来看shape,比如np.shape(img_data),会得到这样的结果(600,790,3) 注意:600不是横坐标,而是表示多少列,790才是横坐标 用numpy测试就可以看出: & ...

  3. nodejs中引用其他js文件中的函数

    基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...

  4. 【Codeforces Round 1120】Technocup 2019 Final Round (Div. 1)

    Codeforces Round 1120 这场比赛做了\(A\).\(C\)两题,排名\(73\). \(A\)题其实过的有点莫名其妙...就是我感觉好像能找到一个反例(现在发现我的算法是对的... ...

  5. 最近开始学习Cesium，学习学习。

    最近开始学习Cesium,学习学习.

  6. SkylineGlobe 支持火狐和谷歌浏览器的可运行示例代码

    示例代码: <html> <head> <title>3dml的Feature对象选中和隐藏</title> <script type=" ...

  7. pycharm 取消 rebase 操作

    291/5000 取消rebase操作从主菜单中选择VCS | Git | 中止重新定位(abrot rebasing)如果rebase在两个或多个本地存储库中启动,则会显示“中止重新排序”对话框. ...

  8. 图解IIS8上解决网站第一次访问慢的处理（转载）

    本篇经验以IIS8,Windows Server 2012R2做为案例.IIS8 运行在 Windows Server 2012 and Windows 8 版本以上的平台上.IIS中应用程序池和网站 ...

  9. .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上

    转帖:https://blog.csdn.net/WPwalter/article/details/78067293 另参考:https://www.cnblogs.com/worksguo/arch ...

  10. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...