//文件需要引入html2canvas.js、jquery.js
function downLoadImg(){
var element = $(".orgchart"); // 这个dom元素是要生成img的div容器
var w = element.outerWidth(); // 设置该容器的宽
var h = element.outerHeight(); // 设置该容器的高
var canvas = document.createElement("canvas");
canvas.width = w; // 设置画布宽&&高
canvas.height = h ;
var offsetTop = element.offset().top; // 获得该容器的上偏移量
var offsetLeft = element.offset().left; // 获得该容器的左偏移量
var context = canvas.getContext("2d"); context.translate(-offsetLeft, -offsetTop); var opts = {
canvas: canvas,
width: w,
height: h
}
html2canvas(element, opts).then(function (canvas) {
setTimeout(function(){
let a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
a.href = canvas.toDataURL('image/png',1.0)
a.download = '下载'
a.click()
},100)
}) }

将div生成图片并下载下来的更多相关文章

  1. C# html生成图片保存下载

    最近有个需求,需要把内容生成图片,我找到一些资料可以将html页面生成图片并保存下载 下面是简单的实现 1.html页面 @{ Layout = null; } <!DOCTYPE html&g ...

  2. MVC 生成图片,下载文件(图片不存在本地,在网上下载)

    /// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...

  3. MVC 生成图片,下载文件

    /// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...

  4. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  5. 移动端js模拟截屏生成图片并下载功能的实现方案

    一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...

  6. Js实现将html页面或div生成图片

    参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...

  7. js使用html2canvas 生成图片然后下载

    1:html2canvas官网 首先去官网把这个JS下载下来 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  9. JavaWeb学习记录(二十三)——文件上传与下载

    一.导入jar包

随机推荐

  1. CentOS 7下载

    CentOS 7官方下载地址:https://www.centos.org/download/ 转载https://blog.csdn.net/yxwmzouzou/article/details/7 ...

  2. var $this = $(this)

    jQuery: What’s the Difference Between $(this), $this, and this? What about $this? $this is a little ...

  3. leetcode-hard-array-54. Spiral Matrix-NO

    mycode 思路:这种方格图一定要预先设置定位的变量,例如最大的长.宽,变化中的长.宽,在while循环中也要不断判断是否满足break条件 class Solution(object): def ...

  4. Day1_Python基础一

    一.基本认识 1.计算机基础 CPU:计算 内存:缓存 硬盘:存储 操作系统:硬件与软件的桥梁 应用程序:应用的平台 2.Python的历史 1989年龟叔,追求清晰.简单.优美的原则. 主要领域:云 ...

  5. Java学习笔记之ArrayList基本用法

    原文地址,转载请注明出处:https://blog.csdn.net/GongchuangSu/article/details/51514389 ArrayList简介 ArrayList是一个其容量 ...

  6. KVM + LinuxBridge 的网络虚拟化解决方案实践

    目录 文章目录 目录 前言 Linux bridge 的基本操作 创建 Bridge 将 veth pair 连上 Bridge 为 Bridge 配置 IP 地址 将物理网卡接口设备挂靠 Bridg ...

  7. mingw gcc 静态 static 编译 dav1d libdav1d.a

    export CC=/mingw/bin/gcc export CXX=/mingw/bin/g++ meson --prefix "/usr/local" build --bui ...

  8. Delphi导出Excel的设置操作

    procedure CreatRepSheet(SheetName:String;PageSize,PageLay:Integer); {新建Excel工作簿.进行页面设置} begin {新建Exc ...

  9. react native配置ip真机测试

    首先保证真机和pc 保证在同一个网络下 根据红色错误判断自己是什么情况 例如 提示无法连接远程服务,说明你的不在同一网络下 提示500 可能配置的ip不对 设置ip方法 摇晃手机 ---> De ...

  10. ubuntu分区建议总结

    本文为转载别人的内容,结合了其他内容,进行分区的总结.其中主要是分区表格,对于ubuntu安装时,进行分区非常有用. 无论是安装Windows还是Linux操作系统,硬盘分区都是整个系统安装过程中最为 ...