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. powerDesigner创建类及数据模型

    1.创建类图 / 2.创建类图的属性 3.创建一个类,这个是创建后的对应关系,可以给其他的地方引用 3.创建类时候的属性 name 和 code 取消关联 4.创建两个类的关系 这里有个科普知识(ht ...

  2. python 全栈开发，Day37(操作系统的发展史)

    昨日内容回顾: # C/S和B/S架构 # osi五层模型 # 应用层 # 自定义协议(struct) _ 解决黏包 # 验证客户端合法性 _ hmac os.urandom # 解决TCP协议的se ...

  3. XD308H设计超宽电压非隔离电源 MP150电源芯片

    220V转12V 220V转24V 380V转5V 3800V转12V 380V转24V 参考:https://wenku.baidu.com/view/862c19fca0c7aa00b52acfc ...

  4. keystone系列一：keystone基础

    一 什么是keystone keystone是OpenStack的身份服务,暂且可以理解为一个'与权限有关'的组件. 二 为何要有keystone Keystone项目的主要目的是为访问opensta ...

  5. Luogu3162 CQOI2012 组装 贪心

    传送门 如果提供每一种零件的生产车间固定了,那么总时间\(t\)与组装车间的位置\(x\)的关系就是 \(t = \sum (x-a_i)^2 = nx^2-2\sum a_ix + \sum a_i ...

  6. 更换pip源到国内镜像

    1.pip国内的一些镜像   阿里云 https://mirrors.aliyun.com/pypi/simple/  中国科技大学 https://pypi.mirrors.ustc.edu.cn/ ...

  7. GitFlow原理浅析

    一.Git优点 分布式存储 , 本地仓库包含了远程仓库的所有内容 . 安全性高 , 远程仓库文件丢失了也不怕 优秀的分支模型 , 创建/合并分支非常的方便 方便快速 , 由于代码本地都有存储 , 所以 ...

  8. mybatis源码-解析配置文件（四）之配置文件Mapper解析

    在 mybatis源码-解析配置文件(三)之配置文件Configuration解析 中, 讲解了 Configuration 是如何解析的. 其中, mappers作为configuration节点的 ...

  9. HTML-JS 数组 内置对象

    [JS中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合 元素在数组中的顺序,称为下标.可以使用下标访问数组的每个元素 2.如何声明一个数组 ① 使用字面量声明:var ...

  10. 5分钟入门自动化测试——你应该学会的Postman用法(2)

    前言 之前的一篇文章<你应该学会的Postman用法>,主要介绍了postman的一些高级的用法,便于日常开发和调试使用,本文的基础是对postman的基本使用以及一些高级用法有一定的了解 ...