微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案
2024-08-28 23:51:13
html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能。html2canvas 通过获取页面的 DOM 和元素的样式信息,并将其渲染成 canvas 图片,从而实现给页面截图的功能。
官网: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>
效果图:
完整示例下载:
参考:
https://www.zhihu.com/question/48217555
最新文章
- Some Link: Java Reflection
- ASP.NET ZERO 学习 HangFire的使用二
- nodepad++快捷键收集
- Vmware vsphere 网络架构
- 【ZOJ】3329 One Person Game
- Redis基础知识之——自定义封装单实例和普通类Redis
- SRM 598 DIV1
- linux sed 使用
- Agg vs. Cairo 二维绘图引擎之比较和选择 .
- “最美天气”版本II
- s:textarea 标签不能改变大小的解决方案
- 【Linux 操作系统】 Secure CRT 终端配置 -- 配置语法高亮 光标 和 字体
- (n)e(m)
- 吴裕雄 python 数据可视化
- HDU - 5073 Galaxy(数学)
- [转]epoll详解
- VSTO:使用C#开发Excel、Word【2】
- jQuery插件实例四:手风琴效果[无动画版]
- Swift3 JSON字符串和字典互转(JSON字符串转字典和字典转JSON字符串)
- kafka-python的API简单介绍