<script>

    $(function () {
var content = document.getElementById("shareImages");
content.style.display = 'block';
function convert2canvas() {
var cntElem = document.getElementById("shareImages");
var shareContent = cntElem;
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 1;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
useCORS: true
}; html2canvas(shareContent, opts).then(function (canvas) { var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false; var img = new Image();
img.src = canvas.toDataURL("image/jpg");
// document.body.appendChild(canvas);
document.body.appendChild(img); console.log(width);
img.style.width = width + 'px';
img.style.height = height + 'px';
document.body.appendChild(img);
});
}; convert2canvas();
content.style.display = 'none';
})
</script>

  

html2Canvas to Images的更多相关文章

  1. 使用html2canvas实现浏览器截图

    最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...

  2. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  3. 使用html2canvas实现批量生成条形码

    /*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...

  4. 使用html2canvas实现网页截图并嵌入到PDF

    以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...

  5. html2canvas插件对整个网页或者网页某一部分截图并保存为图片

    html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整 ...

  6. html2canvas根据DOM元素样式实现网页截图

    html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...

  7. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

  8. html2canvas 踩坑总结

    需求:将html表格导出为图片,表格可以自己编辑数据,并适配各种屏幕大小.上网搜了下,找到了html2canvas,一开始使用的是最新版0.5.0,最终因为需要支持自定义div编辑框自动换行选择了v0 ...

  9. html2canvas 网页截图 下载 上传

    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  10. html2canvas页面截图图片不显示

    前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...

随机推荐

  1. ECMAScript6常用新特性总结

    一.let声明变量 1.基本用法: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 如下代码: { let a = 10; var ...

  2. 从零搭建一个IdentityServer——初识OpenIDConnect

    上一篇文章实现了IdentityServer4与Asp.net core Identity的集成,可以使用通过identity注册功能添加的用户,以Password的方式获取Access token, ...

  3. Java执行Dos-Shell脚本

    Java执行Dos-Shell脚本 1.介绍 2.调用shell脚本 2.1 获取键盘输入 2.2 构建指令 2.3 Java代码 3.Java调用Shell并传入参数 4.Java调用远程的Shel ...

  4. Spring5源码,Spring Web中的处理程序执行链

    一.什么是Spring中的处理程序执行链? 二.HandlerExecutionChain类 三.自定义处理程序执行链 Spring的DispatcherServlet假如缺少几个关键元素将无法分派请 ...

  5. 第2层交换和生成树协议(STP)__MAC地址表

    1.MAC(Media Access Control, 介质访问控制)地址是识别LAN节点的标识.网卡的物理地址通常是由网卡生产厂家烧入网卡的EPROM(一种闪存芯片,通常可以通过程序擦写),它存储的 ...

  6. SPOJ - PHRASES Relevant Phrases of Annihilation

    传送门:SPOJ - PHRASES(后缀数组+二分) 题意:给你n个字符串,找出一个最长的子串,他必须在每次字符串中都出现至少两次. 题解:被自己蠢哭...记录一下自己憨憨的操作,还一度质疑评测鸡( ...

  7. 【noi 2.6_2988】计算字符串距离(DP)

    题意: 给两个字符串,可以增.删.改,问使这两个串变为相同的最小操作数. 解法:(下面2种的代码主要区别在初始化和,而状态转移方程大家可挑自己更容易理解的方法打) 1.f[i][j]表示a串前i个和b ...

  8. Educational Codeforces Round 88 (Rated for Div. 2) E、Modular Stability 逆元+思维

    题目链接:E.Modular Stability 题意: 给你一个n数,一个k,在1,2,3...n里挑选k个数,使得对于任意非负整数x,对于这k个数的任何排列顺序,然后用x对这个排列一次取模,如果最 ...

  9. Codeforces Round #307 (Div. 2) B. ZgukistringZ

    Professor GukiZ doesn't accept string as they are. He likes to swap some letters in string to obtain ...

  10. Codeforces Round #643 (Div. 2) D. Game With Array (思维,构造)

    题意:给你两个正整数\(N\)和\(S\),构造一个长度为\(N\)并且所有元素和为\(S\)的正整数数组,问是否能找到一个\(K (0\le K \le S)\)使得这个数组的任意_子数组_的和都不 ...