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. maven 仓库配置 pom中repositories属性

    文章转自http://blog.csdn.net/zlgydx/article/details/51130627 什么是Maven仓库在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录 ...

  2. centos7搭建logstash

    前两节已经成功完成ek的搭建,还剩最后的一个日志上传的功能 依次执行如下命令 cd /home/elk wget https://artifacts.elastic.co/downloads/logs ...

  3. 看不懂霍尔效应的直接看视频https://www.bilibili.com/video/av11446173/

    霍尔效应: 有些手机带有皮盖,就是皮盖打开的时候手机自动亮屏,皮盖和上的时候手机自动黑屏,利用的就是霍尔传感器,其实皮盖里面就是有个小磁铁而已: 当然了霍尔效应的电压也就几个毫伏,很小,所以得放大才能 ...

  4. java StringBuilder和StringBuffer 用法

    可变的字符串,兄弟关系StringBuilder:效率高,安全性低StringBuffer:效率低,安全性高 StringBuilder 的常用方法的使用,StringBuffer用法一样. publ ...

  5. odoo中的ORM操作

    ORM方法简介 OpenERP的关键组件, ORM是一个完整的对象关系映射层,是开发人员不必编写基本的SQL管道. 业务对象被声明继承字models.Models的python类. 这让业务对象在OR ...

  6. .NET Core 3.0 跟踪

    Preview1: https://blogs.msdn.microsoft.com/dotnet/2018/12/04/announcing-net-core-3-preview-1-and-ope ...

  7. 校内模拟赛 虫洞(by NiroBC)

    题意: n个点m条边的有向图,每一天每条边存在的概率都是p,在最优策略下,询问从1到n的期望天数. 分析: dijkstra. 每次一定会优先选dp最小的后继走,如果这条边不存在,选次小的,以此类推. ...

  8. 51nod 1295 XOR key 可持久化01字典树

    题意 给出一个长度为\(n\)的正整数数组\(a\),再给出\(q\)个询问,每次询问给出3个数,\(L,R,X(L<=R)\).求\(a[L]\)至\(a[R]\)这\(R-L+1\)个数中, ...

  9. [JSOI2016]病毒感染[dp]

    题意 有 \(n​\) 个村庄按标号排列,每个村庄有一个死亡速度 \(a_i​\) 表示每天死 \(a_i​\) 人(除非你治好这个村庄). 你从 1 号村庄出发,每天可以选择向相邻的村庄进发或者治愈 ...

  10. Docker 快速验证 HTML 导出 PDF 高效方案

    需求分析 项目中用到了 Echarts,想要把图文混排,当然包括 echarts 生成的 Canvas 图也导出 PDF. 设计和实现时,分析了 POI.iText.freemaker.world 的 ...