html div保存png图片,纯JS实现将DIV中的内容转化为PNG图片
//1.将div转成svg
var data = "data:image/svg+xml," +
"" +
"" +
"
"" +
"";
var img = new Image();
img.src = data;
document.getElementsByTagName('body')[0].appendChild(img);
//2.svg转成canvas
var canvas = document.createElement('canvas'); //准备空画布
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(img, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys"; //设定下载名称
//3. 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
/**
* 获取mimeType
* @param {String} type the old mime-type
* @return the new mime-type
*/
var _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
// 加工image data,替换mime type
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
/**
* 在本地进行文件保存
* @param {String} data 要保存到本地的图片数据
* @param {String} filename 文件名
*/
var saveFile = function (data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
// 下载后的图片名
var filename = 'LoveCrystal_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData, filename);
html div保存png图片,纯JS实现将DIV中的内容转化为PNG图片相关推荐
- js把html转换成图片格式,纯JS实现将DIV中的内容转化为PNG图片
//1.将div转成svg var data = "data:image/svg+xml," + "" + "" + " &quo ...
- jsp 如何动态给图片赋值_在Excel表格中你知道如何动态引用图片吗?
上期文章为朋友们分享了如何将照片快速批量导入导出到Excel表格中,那么如何根据文字匹配对应的图片你知道吗?这篇文章就和朋友们一起学习一下! 一.根据名称批量导入图片: 上期文章为朋友们分享的批量导入 ...
- 纯js 实现简单聊天室,可发送表情、图片、发送消息时间
对项目代码有什么不懂的,欢迎留言一起探讨 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
- php 输出图片给js,如何在php中利用croppic.js对图片进行剪切并上传
如何在php中利用croppic.js对图片进行剪切并上传 发布时间:2021-01-30 16:41:02 来源:亿速云 阅读:92 作者:Leah 这篇文章将为大家详细讲解有关如何在php中利用c ...
- js实现将页面中的数据表格导出为图片,js实现导出excl表格(内含三个插件)
开发需求:拿到同事代码,同事用 layui 写了一个数据表格,但是表格里的内容 是带样式的 button .现在需要将这个表格导出,这着实让我头疼了许久. 找到的插件可以使用:canvas,试过js- ...
- js如何写html中的内容,javascript怎样获取某个标签的内容?
在我们平时的JS编程中,经常要获取标签的内容对其进行操作,有很多细节的东西容易被我们忽略,下面让我们来看一下JavaScript如何获取标签中的内容. HTML结构如下: Title 这有个 第一个p ...
- python实现将文件下内每张图片按顺序命名为txt文本文件中的内容
一.写在前面 需求:文件夹内有若干张图片,文本文件内有若干字段,希望将图片按顺序命名为文本文件中的内容,使用python简单实现. 二.源码 #rename picture train_txt='./ ...
- bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言 最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...
- 一个div 上下两行_纯CSS实现单一div的正多边形变换
纯粹利用CSS,让"单一个"div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计 ...
最新文章
- Project Server的页面如何修改Text
- javaweb学习总结(二十九)——EL表达式
- 怎么看so文件是哪个aar引进来的_手机爱奇艺下载视频存在哪个文件夹
- Wizard的动态添加
- 【多视图几何】TUM 课程 第6章 多视图重建
- 用户奖励体系有哪些反作弊的机制?
- python桌面程序臃肿_为Python应用构建最精简Docker
- ASP.NET Using 的几种用法
- 毕业设计-springboot+vue公租房租赁管理系统
- 用友NC CLOUD 工具
- 花了3个月,濒临崩溃的K8S集群有救了……
- MySQL 8.0.17的安装与图形管理软件介绍
- c/c++语言中常用的math函数
- Qt 之 事件总线模型
- 求1-1/2+1/3-1/4+.......+1/99-1/100的值
- JTAG (三) jtag实例 riscv
- 隐马尔科夫模型一(概念理解)
- all index range ref eq_ref const system 索引type说明
- matlab逆变器原理,三相SPWM逆变器的调制建模和仿真详解
- oa是什么意思?oa系统哪个好用?
热门文章
- 基于SSM在线考试系统的核心功能之一自动组卷的实现 SpringBoot版本
- 什么是脏读、幻读、不可重复读、可重复读
- 由对称性知定点一定在x轴上_高考数学易犯的72个低级错误,一定要避开!
- 教你用Python压缩图片
- 代码洁癖系列(一):什么是整洁代码
- MySQL(十一):分库分表方案-ShardingSphere
- Python集成开发工具(IDE)推荐
- php文件函数多音组词,PHP实现的简单组词算法示例
- 十一届中国大学生计算机设计大赛,我校在2018年(第十一届)中国大学生计算机设计大赛中再获佳绩...
- Prometheus监控Kafka集群