微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案
2017-05-25 16:01
811 查看
html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能。html2canvas 通过获取页面的 DOM 和元素的样式信息,并将其渲染成 canvas 图片,从而实现给页面截图的功能。
官网:https://github.com/niklasvh/html2canvas
遇到的问题:
参考官方的 Demo,发现所截的图失真厉害。
解决方案:
将 canvas 的宽高放大到原容器宽高的 3 倍,参考代码如下:
效果图:
完整示例下载:
CSDN下载
参考:
https://www.zhihu.com/question/48217555
官网:https://github.com/niklasvh/html2canvas
遇到的问题:
参考官方的 Demo,发现所截的图失真厉害。
解决方案:
将 canvas 的宽高放大到原容器宽高的 3 倍,参考代码如下:
<html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript" src="canvas2image.js"></script> </head> <body> <div id="to-image"> <h3>Html5页面截图 演示</h3> <div style="background-color: #abc;padding: 10px"> Hello World! <br> <div style="background: url(1.jpg) center center; width: 500px;height: 300px;"></div> <br> <a href="http://phpgo.cnblogs.com" target="_blank">http://phpgo.cnblogs.com</a> <br> <textarea id="textArea" col="20" rows="3"></textarea> </div> </div> <div style="background-color: red; padding: 10px; margin-top: 10px;"> <input id="do-image" type="button" value="开始截图"> </div> <div id="show-image"> </div> </body> </html> <script type="text/javascript"> $(document).ready(function() { $("#do-image").on("click", function(event) { var dom = $('#to-image'); var width = dom.width(); var height = dom.height(); var type = "png"; var scaleBy = 3; // 缩放比例 var canvas = document.createElement('canvas'); canvas.width = width * scaleBy; canvas.height = height * scaleBy + 60; // 60 是我处理完后发现短了一点,具体为什么不清楚,如果你也少的话,根据自己的项目调吧 canvas.style.width = width * scaleBy + 'px'; canvas.style.height = height * scaleBy + 'px'; var context = canvas.getContext('2d'); context.scale(scaleBy, scaleBy); html2canvas(dom[0], { canvas : canvas, onrendered : function(canvas) { // 放到到原来的 3 倍 $("#show-image").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type)); // 在将放大的图片用CSS再缩小,方便在手机上清晰查看 $("#show-image img").css("width", width + "px").css("height", height + "px"); } }); }); }); </script>
效果图:
完整示例下载:
CSDN下载
参考:
https://www.zhihu.com/question/48217555
相关文章推荐
- html2canvas截图如何解决图片跨域的问题?
- html2canvas页面截图图片不显示
- 使用html2canvas插件在ie11下无法生成图片
- html2canvas页面截图图片不显示
- 使用html2canvas对当前页面进行生成图片
- html2canvas同时生成多张图片出问题
- JS 使用html2canvas实现截图功能的问题记录和解决方案
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
- 解决struts2+jasperReport在生成html形式的报表时的图片问题 没有测试
- 解决jasperreports报表在HTML页面显示的PX图片的问题
- C#.net关于生成html静态页面的问题 .
- Struts2 访问Action和Jsp页面出现的路径问题解决方案之 ---- 为jsp、图片、js、css等获取Web工程的绝对路径的方法
- html页面中图片自适应容器大小且上下左右居中插件
- C#.net关于生成html静态页面的问题
- 沫沫金::完美解决jasperreports集成ssh后生成HTML图片红叉叉问题和chart不能显示问题
- 【转载】C#动态页面aspx生成静态html解决方案
- 手机端HTML网页生成 meta标签针对苹果手机页面设计问题
- C# 生成html页面出现乱码的问题
- 对于html 页面的针对于浏览器,插件等的各种问题小记录
- Windows Phone 用WebBrowser加载本地图片以及解决加载html页面出现乱码问题