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. nginx的限流问题

    nginx的限流问题 http{ limit_req_zone $binary_remote_addr zone=req_one:10m rate=100r/s;server{ listen 8080 ...

  2. BZOJ2300[HAOI2011]防线修建——非旋转treap+凸包(平衡树动态维护凸包)

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...

  3. 函数中的this与argument对象,以及argument中的callee与caller属性

    相关阅读:https://segmentfault.com/a/1190000015438195 相关阅读: https://zhuanlan.zhihu.com/p/23804247 相关阅读: h ...

  4. Python3 找不到库

    import sys sys.path.append('/usr/local/lib64/python3.6/site-packages')sys.path.append('/usr/local/li ...

  5. 浅析Spring

    一:什么是Spring Spring是一个开源的框架,是为了解决企业应用程序开发复杂性由RodJohnson创建的.虽然Spring是为企业级应用推出的,但是所有的Java系统开发都可以使用Sprin ...

  6. Intellij IDEA 14中使用MyBatis-generator 自动生成MyBatis代码

    一:项目建立好及其基本的测试好 二:在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 <build> <finalName&g ...

  7. gcc编译C源文件

    gcc编译C程序的主要过程是:预处理---编译---汇编---连接,其中:(以名为hello.c的源文件为例) 预处理:对各种预处理指令(#开头,如#include,#define)进行处理,以及删除 ...

  8. Spring Boot学习总结三

    1,mybatis在spring boot下的2种使用模式 无配置文件注解版 application.properties添加相关配置 mybatis.type-aliases-package=com ...

  9. gzy的摄影梦

    好像当身高180的摄影师啊. 记录一下素材,等自己有相机了,就一一实现. 竟然有人在看哎. 一袭红衣的女子,将手伸出窗外,开心的看这漫天大雪. 今天的晚霞,近处是蓝色,颜色逐渐变淡,一直延伸到远处.( ...

  10. JSON循环遍历解析

    使用递归方式遍历JSON,解析JSON用的是:net.sf.json, alibaba.fastjson测试可用 @Test public void test() { String json = &q ...