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学习】慕课网6-11编程联系 简单计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById( ...
- webpack配置(使用react,es6的项目)
const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('h ...
- Java HashMap问题
1:map集合简述: 我们常用的集合实现类有HashMap.LinkedHashMap.TreeMap,HashTable.HashMap根据key的hashCode值来保存value ...
- SpringBoot 2.x 使用 JWT(JSON Web Token)
一.跨域认证遇到的问题 由于多终端的出现,很多的站点通过 web api restful 的形式对外提供服务,采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于 cookie 的 S ...
- java 获取String出现最多次数的字段
package hello; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator ...
- PHP ftp_close() 函数
定义和用法 ftp_close() 函数关闭 FTP 连接. 语法 ftp_close(ftp_connection) 参数 描述 ftp_connection 必需.规定要关闭的 FTP 连接. 实 ...
- 线性基思想+贪心——cf1249C
/*1+3+9+...+3^n<3^(n+1),按这个思路贪心一下就好*/#include<bits/stdc++.h> using namespace std; #define l ...
- Delphi 实现最近打开文件记录菜单
unit UntOpenMenu; //download by http://wwww.NewXing.com interface uses Windows, Messages, SysUtils, ...
- delphi 多线程3
多线程程序设计 我们知道,win95或winNT都是“多线程”的操作系统,在DELPHI .中,我们可以充分利用这一特性,编写出“多线程”的应用程序. 对以往在DOS或16位windows下写程序的 ...
- centos 安装 ImageMagick
ImageMagick很好用,shell下可以批量对图片做处理,很赞!~ 编译安装 wget http://www.imagemagick.org/download/ImageMagick.tar.g ...