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. Luogu3768简单的数学题

    题目描述 题解 我们在一通化简上面的式子之后得到了这么个东西. 前面的可以除法分块做,后面的∑T2∑dµ(T/d)是积性函数,可以线性筛. 然后这个数据范围好像不太支持线性筛,所以考虑杜教筛. 后面那 ...

  2. 小白月赛13 小A的柱状图 (单调栈)

    链接:https://ac.nowcoder.com/acm/contest/549/H来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  3. 关于SDK_JDK_JRE_JVM的关系

    SDK JDK JRE JVM 四者的关系 一:SDK与JDK的关系(可以认为jdk只是sdk的一种子集) SDK是Software Development Kit的缩写,中文意思是“软件开发工具包” ...

  4. 使用BeautifulSoup

    下载bs4,导入BeautifulSoup pip install bs4 from bs4 import BeautifulSoup BeautifulSoup 的使用 创建对象 r = reque ...

  5. boto3库限速

    # -*- coding: utf-8 -*- import boto3 from boto3.s3.transfer import TransferConfig # from s3transfer. ...

  6. JSON循环遍历解析

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

  7. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  8. Echarts——一个简单的嵌套饼图

      </!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

  9. Linux 定时运行设置

    脚本设置位置: /etc/cron.d SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root # 每个小时的01分钟执行这个脚本 ...

  10. linux内核开发入门学习

    1. 目录结构 内核源代码下载 https://www.kernel.org arch目录 arch是architecture的缩写. 内核所支持的每种CPU体系,在该目录下都有对应的子目录.每个CP ...