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. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...

  2. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  3. P1438 无聊的数列 (差分+线段树)

    题目 P1438 无聊的数列 解析: 先考虑修改,用差分的基本思想,左端点加上首项\(k\),修改区间\((l,r]\)内每个数的差分数组都加上公差\(d\),最后的\(r+1\)再减去\(k+(r- ...

  4. 【CF1146】Forethought Future Cup - Elimination Round

    Forethought Future Cup - Elimination Round 窝也不知道这是个啥比赛QwQ A. Love "A" 给你一个串,你可以删去若干个元素,使得最 ...

  5. input密码框输入后设置显示为星号或其他样式

    预览效果 核心代码 <div class="text-input" :class="right?'textinput-right':''"> < ...

  6. 1.0--->刚开始看这里

    PyQt5使用笔记 创建一个小窗口 import sys from PyQt5.QtWidgets import * #程序实例化 app = QApplication(sys.argv) # #创建 ...

  7. CF1129B 【Wrong Answer】

    既然 $ n \leq 2000$ 那我们就假使所有的 $n = 2000 $ 主要是为了方便.再使 \(x = \sum_{i=1} ^ {1999}\) 以及 $a_1=a_2=a_3=...=a ...

  8. cookie session token

    HTTP    HTTP是无状态(stateless)的网络协议.HTTP协议自身不对请求和响应之间的通信状态进行保存.也就是说HTTP协议对于发送过的请求或响应都不做持久化处理. 为了实现保持状态功 ...

  9. Python菜鸟快乐游戏编程_pygame(5)

    Python菜鸟快乐游戏编程_pygame(博主录制,2K分辨率,超高清) https://study.163.com/course/courseMain.htm?courseId=100618802 ...

  10. showdoc 文档管理系统

    ==========================showdoc 简介==========================在线文档管理系统很多, 比如阿里的语雀.腾讯的 TAPD 平台也包括文档管理 ...