1.引入js

<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

2.使用

function DownLoadDomImg(el) {
html2canvas(el, {
// 页面高度
height: el.height,
// 页面宽度
width: el.width,
onrendered: function(canvas) {
var mA = document.createElement("a");
mA.href = canvas.toDataURL()
mA.setAttribute('download', 'download.png');
mA.click();
console.log(mA);
         // 如果是ie浏览器 则需要 使用ie浏览器的下载方法 进行下载 一会补充
}
});
} // 使用
DownLoadDomImg(document.getElementById("box"))

  这个时候 传入想要下载的 元素id 调用此方法的时候就可以实现下载

js 如何将dom转换为 图片(base64)的更多相关文章

  1. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  2. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  3. php将base64字符串转换为图片

    昨天用一个js插件 [链接]: http://www.erdangjiade.com/js/910.html 实行了图片裁剪并预览,不过它生产的图片资源是一个base64字符串,不好保存后来在网上找到 ...

  4. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  5. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  6. PHP的图片转base64,base64图片转换为图片并保存代码

    打卡记录 1. 图片转base64代码 /*图片转换为 base64格式编码*/ $img = 'images/avatar.jpg'; $base64_img = base64EncodeImage ...

  7. 从Base64编码转换为图片文件

    package luckyclient.utils;import java.io.FileInputStream;import java.io.FileOutputStream;import java ...

  8. Jquery 网页转换为图片

    /* html2canvas 0.5.0-alpha1 <http://html2canvas.hertzen.com> Copyright (c) 2015 Niklas von Her ...

  9. .NET将图片Base64字符串还原为图片(jpg格式)并保存到本地

    1. 了解Base64字符串的形式是:data:image/jpeg;base64,字符串 2 .Base64字符串转换为图片的代码实现: string[] str = base64Str.Split ...

随机推荐

  1. JPA javax.persistence.TransactionRequiredException

    直接说一下解决方案 Dao层,一定要是Dao层. 1 增加Transactional,必须要事务! 2 增加Modifying,告诉jpa这是修改! @Transactional @Modifying ...

  2. python并发编程之IO阻塞基础知识点

    IO模型 解决IO问题的方式方法 问题是:IO操作阻塞程序执行 解决的也仅仅是网络IO操作   一般数据传输经历的两个阶段,如图: IO阻塞模型分类: 阻塞IO 非阻塞IO 多路复用IO 异步IO(爬 ...

  3. 商誉专题RN及H5项目总结

    React(基础框架): React 是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或者网页. React.js(web网页开发):在React框架之上,发展出了React.j ...

  4. x86汇编语言实践(2)

    0 写在前面 为了更深入的了解程序的实现原理,近期我学习了IBM-PC相关原理,并手工编写了一些x86汇编程序. 在2017年的计算机组成原理中,曾对MIPS体系结构及其汇编语言有过一定的了解,考虑到 ...

  5. Java EE Expression Language

    什么是EL? 形如这样(立即执行的): ${sessionScope.cart.total} 或者这样(延迟执行的): #{customer.name} 的表达式语言(Expression Langu ...

  6. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  7. element-UI的Dialog弹出框蒙版被遮住

    类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormV ...

  8. blackbox_exporter介绍

    Blackbox Exporter是Prometheus社区提供的官方黑盒监控解决方案,其允许用户通过:HTTP.HTTPS.DNS.TCP以及ICMP的方式对网络进行探测. 1.安装部署 cd /u ...

  9. Matplotlib画正弦余弦曲线

    参考1:http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 参考2:https://matplotlib.org/api/artist_ap ...

  10. JavaScript 修改 CSS 伪类属性

    背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...