<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. 洛谷P2687 & P1108

    一道求最长下降子序列和与最长下降子序列长度相同的方案数的DP 题意: 一串数字,找出最长下降子序列,记录他的长度 \(length\) 并输出 然后找出所有长度达到 \(length\) 的下降子序列 ...

  2. 【Android初级】如何实现一个具有选择功能的对话框效果(附源码)

    我们去餐厅吃饭时,服务员都会拿菜单给我们选择点什么菜.今天就分享一个具有选择功能的简易对话框,给用户展示一个选择列表.实现思路如下: 既然有选择列表,那么这个列表的内容肯定保存在某个地方 用户选择某一 ...

  3. Jmeter的客户端实现与Keep-Alive

    Jmeter的客户端实现与Keep-Alive 目录 Jmeter的客户端实现与Keep-Alive 0. 结论 1.缘起 1.1 起因 1.2 初步尝试 1.3 Jmeter客户端实现 1.4 Ja ...

  4. Centos搭建spark

    Centos搭建spark 一.spark介绍 二.spark安装前提 三.集群规划 四.spark安装 五.修改spark环境变量 六.修改spark-env.sh 七.修改slaves 八.将安装 ...

  5. windows提权常用系统漏洞与补丁编号速查对照表

    #Security Bulletin #KB #Description #Operating System CVE-2020-0787 [Windows Background Intelligent ...

  6. C++泛型基础学习

    转载http://blog.csdn.net/xinzheng_wang/article/details/6674847 泛型的基本思想:泛型编程(Generic Programming)是一种语言机 ...

  7. 20.LVM

    1.在硬盘分好区或者部署为RAID 磁盘阵列之后,再想修改硬盘分区大小就不容易了.换句话说,当用户想要随着实际需求的变化调整硬盘分区的大小时,会受到硬盘"灵活性"的限制. 这时就需 ...

  8. UML——部署图

    一.What 概念: 1.部署图:用来展示所开发系统的硬件配置和组成.软件布局的一个网络拓扑结构图. 2.组成元素:节点.连接.(补充:处理器.设备.节点属性和操作) 2.1节点(Node):是一个物 ...

  9. ACM 模板库

    Template For ACM 一. 字符串 标准库 sscanf sscanf(const char *__source, const char *__format, ...) :从字符串 __s ...

  10. CF Hello2020 D. New Year and Conference

    D. New Year and Conference 题意 有\(2n\)个区间,分别为\([sa_1,ea_1],[sb_1,eb_1],[sa_2,ea_2],[sb_2,eb_2],\cdots ...