js实现canvas保存图片为png格式并下载到本地
canvas 保存图片
下载到本地
function base64Img2Blob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
} return new Blob([uInt8Array], {type: contentType});
}
function downloadFile(fileName, content){ var aLink = document.createElement('a');
var blob = base64Img2Blob(content); //new Blob([content]); var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt);
}
downloadFile('ship.png', canvas.toDataURL("image/png"));
js实现canvas保存图片为png格式并下载到本地的更多相关文章
- Node.js 使用http客户端得到网站的图片下载到本地
以下代码有些冗余,大家捡核心看就好. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块,提供了 ...
- js+Canvas 利用js 实现浏览器保存图片到本地
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- captcha.js一个生成验证码的插件,使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- js中时间戳转换成时间格式
js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...
- 【最简单的方法】js判断字符串是否为JSON格式(20180115更新)
前言 针对 “js判断字符串是否为JSON格式” 这个问题,在网上查了许多资料,都没找到自己想要的答案. 但是看到这个帖子<js判断字符串是否为JSON格式>后,突然灵光一闪,想到一种很简 ...
- js时间戳怎么转成日期格式
原文地址:http://www.sufeinet.com/thread-1500-1-1.html js时间戳怎么转成日期格式这个在主群里有朋友§☆釺哖蟲...o问js时间戳怎么转成日期格式 ,他的问 ...
- js将json数据以csv格式下载
摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: <!DO ...
随机推荐
- 【JS学习】慕课网9-14 删除结点操作的问题
试一试,定义clearText()函数,完成节点内容的删除. 1. 删除该节点的内容,先要获取子节点. 2. 然后使用循环遍历每个子节点. 3. 使用removeChild()删除节点. 特别要注意的 ...
- google cloud
1.win10下安装gcloud SDK 必须设置环境变量CLOUDSDK_PYTHON指向执行文件而不是目录.
- Delphi COM对象
作者:巴哈姆特 http://www.cnpack.org(转载请注明出处并保持完整) 如果没有接触过COM对象的话,你会觉得接口真的很麻烦,也许会有:“还不如直接定义一个类更方便”的想法. 的确, ...
- Vue学习笔记【15】——Vue实例的生命周期
生命周期与生命周期钩子 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期 ...
- 基于Flink和规则引擎的实时风控解决方案
案例与解决方案汇总页:阿里云实时计算产品案例&解决方案汇总 对一个互联网产品来说,典型的风控场景包括:注册风控.登陆风控.交易风控.活动风控等,而风控的最佳效果是防患于未然,所以事前事中和事后 ...
- Confluence 6 站点备份和恢复
Atlassian 推荐针对生产环境中安装使用的 Confluence 使用原始数据库工具备份策略. 在默认的情况下,Confluence 每天都会备份所有数据和附件到 XML 文件备份中.这些文件被 ...
- webpack 添加eslint代码审查
1). 添加包 npm install eslint --save-dev npm install eslint-loader --save-dev npm install eslint-plugin ...
- 原生Ajax( XHR 和 Fetch )
原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...
- postgresql修改自增序列
----删除前先解除 id 对该序列的依赖ALTER TABLE tablename ALTER COLUMN id SET DEFAULT null;DROP SEQUENCE IF EXISTS ...
- playbackRate控制音频播放倍速
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...