鲁达 本功能主要用于截图分享功能
主要利用了H5的canvas功能，分为 2个js文件 和canvas2image.js
项目源码的压缩包会在文章的最底部分享给大家。
界面代码如下：
<!DOCTYPE html>
<html xmlns=";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html2image</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./"></script>
<script src="./canvas2image.js"></script>
<script>
$(document).ready(function () {
$("#saveAsImage").click(function (e) {
saveHtml2Image("div1", 1);
});
});
function saveHtml2Image(objId, scale) {
document.body.scrollTop = 0;
var obj = $("body");
var width = obj.width();;
var height = obj.height();
var scaledCanvas = document.createElement("canvas");
=width;
= height;
= width + "px";
= height + "px";
var scaledContext = ("2d");
(1, 1);
var width = $(window).width();
var height = $(window).height();
html2canvas(obj, {
canvas: scaledCanvas,
width: width,
height: height,
background: "rgba(255,255,255,1)",
allowTaint:true,
onrendered: function (canvas) {
var dataUrl = Canva(canvas, parseInt(width * scale), parseInt(height * scale));
obj.html("<img src='"+dataUrl+"' crossOrigin = 'anonymous'>")
}
});
}
</script>
</head>
<body id="div1" style="width:400px">
<div style="color:red;padding:10px 10px;" style="width:400px">
<div>
<span>
我要变图片
</span>
</div>
<div style="clear:both;"></div>
<div>
<span>
我要变图片
</span>
</div>
<div style="clear:both;"></div>
<input type="button" value="saveHtmlAsImage" id="saveAsImage" />
<a href="" id="downloadImage" style="display:none;">downloadImage</a>
</div>
</body>
</html>
源码分享：云盘链接审核失败，请私信我