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. pdfplumber库解析pdf格式

    参考地址:https://github.com/jsvine/pdfplumber 简单的pdf转换文本: import pdfplumber with pdfplumber.open(path) a ...

  2. leanote使用本地账户+坚果云同步

    1. 换机器后笔记无法显示 这是因为新建账户与原账户userid不一致. 正确的同步方式为: 下载leanote并解压,不运行,不新建账户 从坚果云同步leanote数据 创建leanote的数据目录 ...

  3. python面试题整合

    面试题整合 面试题—并发编程部分

  4. 【LUOGU???】WD与数列 sam 启发式合并

    题目大意 给你一个字符串,求有多少对不相交且相同的子串. 位置不同算多对. \(n\leq 300000\) 题解 先把后缀树建出来. DFS 整棵树,维护当前子树的 right 集合. 合并两个集合 ...

  5. 「BZOJ2733」「洛谷3224」「HNOI2012」永无乡【线段树合并】

    题目链接 [洛谷] 题解 很明显是要用线段树合并的. 对于当前的每一个连通块都建立一个权值线段树. 权值线段树处理操作中的\(k\)大的问题. 如果需要合并,那么就线段树暴力合并,时间复杂度是\(nl ...

  6. 使用lambda表达式对相同属性的实体进行合并

    List<CrmAuthorizedInfo> crmAuthorizedInfos = flowPlanInfoMapper.findAllByEncode(stationForm.ge ...

  7. luoguP3598 Koishi Loves Number Theory

    题目 题解 等比数列,最后统一除以(x-1)(这里数据都存在逆元....) (不存在逆元可以考虑表示成:x*p^y的pair形式,最后上下把p的次数相减(类似扩展Lucas)) 求:lcm(x^(ai ...

  8. 初探VUX(基本官网上无特别无干货)

    vux@2.x 推荐webpack+vue-loader方式的开发. 第一步安装cli依赖 npm install vue-cli -g 接下来创建项目注意名称是小写 cd projectPath y ...

  9. 第八周java学习总结

    学号 20175206 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章:泛型与集合框架 主要内容 泛型 链表 堆栈 散列映射 树集 树映射 重点和难点 重点:泛型和集合的使 ...

  10. sigaction 的使用

    linux内核会发射一些信号,应用程序可以捕捉信号执行特定函数 :失败:-,设置errno act:传入参数,新的处理方式.oldact:传出参数,旧的处理方式. struct sigaction结构 ...