将div生成图片并下载下来
//文件需要引入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生成图片并下载下来的更多相关文章
- C# html生成图片保存下载
最近有个需求,需要把内容生成图片,我找到一些资料可以将html页面生成图片并保存下载 下面是简单的实现 1.html页面 @{ Layout = null; } <!DOCTYPE html&g ...
- MVC 生成图片,下载文件(图片不存在本地,在网上下载)
/// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...
- MVC 生成图片,下载文件
/// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...
- 通过JS将BSAE64生成图片并下载
HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...
- 移动端js模拟截屏生成图片并下载功能的实现方案
一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...
- Js实现将html页面或div生成图片
参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...
- js使用html2canvas 生成图片然后下载
1:html2canvas官网 首先去官网把这个JS下载下来 <!DOCTYPE html> <html lang="en"> <head> & ...
- js中保存成图片并下载
1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...
- JavaWeb学习记录(二十三)——文件上传与下载
一.导入jar包
随机推荐
- CentOS 7下载
CentOS 7官方下载地址:https://www.centos.org/download/ 转载https://blog.csdn.net/yxwmzouzou/article/details/7 ...
- var $this = $(this)
jQuery: What’s the Difference Between $(this), $this, and this? What about $this? $this is a little ...
- leetcode-hard-array-54. Spiral Matrix-NO
mycode 思路:这种方格图一定要预先设置定位的变量,例如最大的长.宽,变化中的长.宽,在while循环中也要不断判断是否满足break条件 class Solution(object): def ...
- Day1_Python基础一
一.基本认识 1.计算机基础 CPU:计算 内存:缓存 硬盘:存储 操作系统:硬件与软件的桥梁 应用程序:应用的平台 2.Python的历史 1989年龟叔,追求清晰.简单.优美的原则. 主要领域:云 ...
- Java学习笔记之ArrayList基本用法
原文地址,转载请注明出处:https://blog.csdn.net/GongchuangSu/article/details/51514389 ArrayList简介 ArrayList是一个其容量 ...
- KVM + LinuxBridge 的网络虚拟化解决方案实践
目录 文章目录 目录 前言 Linux bridge 的基本操作 创建 Bridge 将 veth pair 连上 Bridge 为 Bridge 配置 IP 地址 将物理网卡接口设备挂靠 Bridg ...
- mingw gcc 静态 static 编译 dav1d libdav1d.a
export CC=/mingw/bin/gcc export CXX=/mingw/bin/g++ meson --prefix "/usr/local" build --bui ...
- Delphi导出Excel的设置操作
procedure CreatRepSheet(SheetName:String;PageSize,PageLay:Integer); {新建Excel工作簿.进行页面设置} begin {新建Exc ...
- react native配置ip真机测试
首先保证真机和pc 保证在同一个网络下 根据红色错误判断自己是什么情况 例如 提示无法连接远程服务,说明你的不在同一网络下 提示500 可能配置的ip不对 设置ip方法 摇晃手机 ---> De ...
- ubuntu分区建议总结
本文为转载别人的内容,结合了其他内容,进行分区的总结.其中主要是分区表格,对于ubuntu安装时,进行分区非常有用. 无论是安装Windows还是Linux操作系统,硬盘分区都是整个系统安装过程中最为 ...