<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. Centos7部署FytSoa项目至Docker——第一步:安装Docker

    FytSoa项目地址:https://gitee.com/feiyit/FytSoaCms 部署完成地址:http://82.156.127.60:8000/ 先到腾讯云申请一年的云服务器,我买的是一 ...

  2. Spring Boot 整合 Freemarker

    Spring Boot 整合 Freemarker 1.Freemarker 简介 2.Spring Boot 整合 Freemarker 2.1 创建工程 2.2 创建类 2.3 其他配置 原文地址 ...

  3. JS 实现一个实时动态校验,将输入格式错误的显示为红色背景

    功能描述: 源码: 功能描述: 实时动态校验,如果输入的格式错误,将弹窗提示输入格式错误并将背景展示为红色. 源码: 前台: <hy:formfield name="cxfdl&quo ...

  4. redis学习教程五《管道、分区》

    redis学习教程五<管道.分区>  一:管道 Redis是一个TCP服务器,支持请求/响应协议. 在Redis中,请求通过以下步骤完成: 客户端向服务器发送查询,并从套接字读取,通常以阻 ...

  5. TCP IP SOCKET 笔记

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...

  6. oracle根据日期计算星期几

    工作中用到的,在存储过程中的语句,简单记下: /** 判断输入日期是星期几 */ select decode(to_char(to_date(iv_date,'yyyy-mm-dd'), 'day') ...

  7. 翻译:《实用的Python编程》README

    欢迎光临 大约 25 年前,当我第一次学习 Python 时,发现 Python 竟然可以被高效地应用到各种混乱的工作项目上,我立即被震惊了.15 年前,我自己也将这种乐趣教授给别人.教学的结果就是本 ...

  8. 2019牛客暑期多校训练营(第一场)A Equivalent Prefixes

    传送门 题意: 先输入一个n,代表两个数组里面都有n个数,然后让你从中找到一个p<=n,使其满足(1<=l<=r<=p<=n)可以让在(l,r)这个区间内在两个数组中的的 ...

  9. K - Japan(线段树)

    Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...

  10. HDU -1506 Largest Rectangle in a Histogram&&51nod 1158 全是1的最大子矩阵 (单调栈)

    单调栈和队列讲解:传送门 HDU -1506题意: 就是给你一些矩形的高度,让你统计由这些矩形构成的那个矩形面积最大 如上图所示,如果题目给出的全部是递增的,那么就可以用贪心来解决 从左向右依次让每一 ...