//文件需要引入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. 品 SpringBootApplication 注解源码

    @SpringBootApplication 由以下三个注解构成: @SpringBootConfiguration@EnableAutoConfiguration@ComponentScan 一:@ ...

  2. C++入门经典-例3.25-使用循环输出闰年

    1:代码如下: // 3.25.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  3. JS基础_强制类型转换

    强制类型转换 将一个数据类型强制转换为其他的数据类型 类型转换主要指,将其他数据类型,转换为 string.number.boolean 1.将其他数据类型转换为string(返回值是强转后类型的值) ...

  4. MongoDB中的_id和ObjectId

    ObjectId是"_id"的默认类型.它设计成轻量型的,不同的机器都能用全局唯一的同种方法方便地生成它. 这是MongoDB采用ObjectId,而不是其他比较常规的做法(比如自 ...

  5. 黑马lavarel教程---3、数据库和视图注意点

    黑马lavarel教程---3.数据库和视图注意点 一.总结 一句话总结: 使用其实都很简单,MVC的框架都很像,用的时候直接可以去看手册,这样才能记得住 1.数据库删除操作注意? 删非删:很多网站的 ...

  6. Laravel框架之获取URL地址

    1. 使用 Request 类: $url = Request::getRequestUri(); 2. 使用 $request 对象: public function show(Request $r ...

  7. elk5.0 版本遇到的安装问题

    问题1:max_map_count不够大 max virtual memory areas vm.max_map_count [65536] likely too low, increase to a ...

  8. PDS常用快捷键

    绿色在Layout和Router中共用 1.PDS常用快捷键:2019-07-28 17:06:07 快捷键 说明 备注 shiftt + 左键双击 布线状态下,进行过孔放置   ctrl + 左键双 ...

  9. redis cluster 集群 安装 配置 详解

    redis cluster 集群 安装 配置 详解 张映 发表于 2015-05-01 分类目录: nosql 标签:cluster, redis, 安装, 配置, 集群 Redis 集群是一个提供在 ...

  10. Ubuntu 防火墙常用配置操作(ufw)【适用于 Debian 及其衍生版---Linux Mint、Deepin 等】-转

    Ubuntu 防火墙常用配置操作(ufw)[适用于 Debian 及其衍生版---Linux Mint.Deepin 等] 点击访问