首页 > 其他分享 >js实现canvas保存图片为png格式并下载到本地

js实现canvas保存图片为png格式并下载到本地

时间:2023-06-17 15:24:17浏览次数:40  
标签:canvas js MIME dlLink var document TYPE png

function exportCanvasAsPNG(id, fileName) {
    var canvasElement = document.getElementById(id);
    var MIME_TYPE = "image/png";
    var imgURL = canvasElement.toDataURL(MIME_TYPE);
    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}
for(let i = 1; i< 23; i++) { exportCanvasAsPNG("cw-pdf-" + i, "cw-pdf-" + i +".png") }

  

标签:canvas,js,MIME,dlLink,var,document,TYPE,png
From: https://www.cnblogs.com/7qin/p/17487494.html

相关文章

  • js中循环判断找到满足条件的单项后结束循环
    关于跳出循环的详细介绍可以看这篇:https://blog.csdn.net/Code_King006/article/details/130565506说下自己的业务场景:判断数组中是否有满足条件的套餐,如果有就接着判断下一个条件不再查询后续数组(也就是需要终止当前循环),否则返回false原本用的是foreach去判断,但这样写显然是有问......
  • JSON Web Token 入门教程
     JSONWebToken(缩写JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。1、用户向服务器发送用户名和密码。2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、......
  • python之json和ymal模块
    json和ymal是常用的数据交换格式,ymal可以看做是json的超集。1json格式json(JavaScriptObjectNotation)是一种轻量级的数据交换格式,常用于在不同系统之间进行数据传输和存储。它由键值对构成的集合组成,通常以文件扩展名.json命名。JSON的结构非常简单,有两种基本的数据结构:1.......
  • JS的部分对象
      自定义对象:JSON里的key值必须使用“”,不然会报错 ......
  • Vue.js 组件通信
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • js的new做了什么
    new对象底层发生了什么functionPerson(phone,age){this.age=age;this.phone=phone;this.showone=function(){};}Person.prototype.docall=function(){console.log("电话:",this.phone);};letperson=newPerson("12344",23);c......
  • 关于js单线程的问题
    为什么说js是单线程?为了搞清楚这个问题,我们需要先了解这几个问题:什么是线程?什么是进程?他们之间的关系?什么是任务队列(EventQueue),任务分类(宏任务、微任务)?什么是事件循环?为什么说js是单线程?为什么js要是单线程?接下来我们一起来看一下:什么是线程?什么是进程?他......
  • centos8使用Yum安装nodejs步骤方法、nodejs升级切换版本的方法
    先确认系统是否已经安装了epel-release包(EPEL是企业版Linux的额外软件包,是Fedora小组维护的一个软件仓库项目,为RHEL/CentOS提供他们默认不提供的软件包。):Bash#yuminfoepel-release如果有输出有关epel-release的已安装信息,则说明已经安装,如果提示没有安装或可安装,则安装......
  • tween.js简单案例
    ‘init(); animate(); functioninit(){ varoutput=document.createElement('div'); output.style.cssText='position:absolute;left:50px;top:300px;font-size:100px'; document.body.appendChild(output); v......
  • jquery根据json自动生成表格
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>导入文件</title><linkrel="stylesheet"href="/js/bootstrap.min.css"><scriptsrc="/js/jquery.min.js&q......