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. 《深入理解Java虚拟机》笔记(转)

    文章来自http://www.cnblogs.com/tianchi/archive/2012/11/11/2761631.html 在C里面我们想执行一段自己编写的机器指令的方法大概如下: type ...

  2. leetcode 131. Palindrome Partitioning 、132. Palindrome Partitioning II

    131. Palindrome Partitioning substr使用的是坐标值,不使用.begin()..end()这种迭代器 使用dfs,类似于subsets的题,每次判断要不要加入这个数 s ...

  3. spring MVC 使用 hibernate validator验证框架,国际化配置

    spring mvc使用hibernate validator框架可以实现的功能: 1. 注解java bean声明校验规则. 2. 添加message错误信息源实现国际化配置. 3. 结合sprin ...

  4. PAT A1016 Phone Bills （25 分）——排序，时序

    A long-distance telephone company charges its customers by the following rules: Making a long-distan ...

  5. Android 利用属ObjectAnimator，AnimatorSet性动画绘制一个弹球，加速下落，到底部时挤压，然后减速上弹

    属性动画主要的几个类介绍: 1.ValueAnimator:这个类提供了一个简单的计时引擎运行动画动画计算值和设置目标对象.注意:使用该类时一般都是用:ObjectAnimator,而基于Object ...

  6. 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(视频总揽)

    1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(方案总揽) https://v.youku.com/v_show/id_XNDE0Njk3Njg2OA==. ...

  7. [01] AJAX

    1.概述 AJAX,"Asynchronous JavaScript And XML"的简称,即"异步的JavaScript和XML".AJAX的作用在于页面中 ...

  8. 使用Win PE修改其他硬盘中的系统注册表

    使用场景:原来装的机械硬盘系统盘为C盘,后来买了个SSD固态硬盘后,进入WinPE系统后,把原来的C盘整个复制到了固态硬盘,然后用BooticeX64.exe工具在UEFI启动中增加SSD固态硬盘中的 ...

  9. HTML 图片轮播制作工具

    下载地址:http://wowslider.com/download/wowslider-win-setup.zip?utm_source=free_downl_win&utm_medium= ...

  10. openMP多线程编程

    OpenMP(Open Muti-Processing) OpenMP缺点: 1:作为高层抽象,OpenMp并不适合需要复杂的线程间同步和互斥的场合: 2:另一个缺点是不能在非共享内存系统(如计算机集 ...