最近小编一直被这个问题困扰着,公司项目需求:公众号长按图片保存到手机,但是页面上相关内容都是图片和文字(前后端都有)组成,于是乎我到网上各种找办法,最后锁定了这个html2canvas前端生成图片(canvas画布)的方法,但是问题随之而来,网上各种大佬的代码不是少这就是少那,对于刚入行半年的萌新来说有的根本看不懂,但是皇天不负有心人最后我终于找到了一篇代码解决了这个事情,接下来把代码放上来~
首先引入两个js文件:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
HTML代码:
<div id="app_name" >我是大帅哥</div>
<hr />
<div id="div1">
<img src="/image/ercode.jpg" style="width: 100%;" />
<table>
<tr>
<td>
<p>123</p>
<p>123</p>
<p>123</p>
</td>
<td align="center">
<img src="img/index.jpg" height="80" />
</td>
</tr>
<tr>
<td colspan="2">
<span>● 帅哥名言 </span><br />
<span>1.我是最帅的;</span><br />
<span>2.我是最帅的;</span><br />
<span>3.我是最帅的;</span><br />
<span>4.我是最帅的;</span><br />
</td>
</tr>
<tr align="center">
<td colspan="2" class="weixin-tip">
此处是动态生成的二维码
</td>
</tr>
<tr align="center">
<td colspan="2" style="font-size: 14px;">啦啦啦</td>
</tr>
<tr align="right">
<td></td>
<td>
<img src="img/index.jpg" height="30" style="padding-right: 20px;" />
</td>
</tr>
<tr align="right">
<td></td>
<td>
<span>来自好友我是大帅哥的分享</span>
</td>
</tr>
</table>
</div>
<!-- 此处是需要生成图片的地方 -->
<div id="imgDiv" style="position: absolute;">
<img class="imgDiv_img" src="" style="width: 100%;" />
</div>
JS代码:
<script type="text/javascript">
$(function() {
html2canvas(document.querySelector("#div1")).then(function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$(".imgDiv_img").attr("src",imgUri)
})
});
</script>
简单介绍一下html2canvas,将你要生成图片的部分抓取到canvas中,然后调用canvas.toDataURL()方法,将抓取到的页面内容转换成base64字符串赋值给img标签的src属性中,转换成图片显示出来~
具体HTML代码可由各位随意编写,JS代码与我保持一致肯定让你成功,但是别什么都抄,id名字什么的可都写自己的奥,要是因为这种原因来抱怨小编的,小编概不接受!!!
另外还有一个坑小编得告诉大家一下(小编和这个坑抗争了一天半的时间,真是气死我也):
在HTML文件中编辑完代码在PC浏览器、手机浏览器、微信内置浏览器调试都没问题;
在前端页面编辑器里编写的JSP文件在PC浏览器、手机浏览器、微信内置浏览器调试也没问题;
但是!!!如果你用eclipse(小编一直在用eclipse其他的不清楚)中新建的JSP文件编辑后再调试就无法生成想要的图片,这是为什么呢,小编告诉你:
在eclipse中生成的JSP文件有一个文件头,大家应该都知道:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
这说明该文件支持HTML4操作(具体是什么HTML版本,请参照文件头),html2canvas不支持HTML4所以会导致不好使,改成如下形式即可支持HTML5操作~
就是它的原因,小编弄了一天半的时间最后改成<!DOCTYPE html>,到此问题全部解决!
声明一下:网上好多都说用html2canvas时会遇到跨域问题,导致无法生成图片,这个问题小编不是很清楚,因为我用的这个方法直接就生成出来了,没有遇到其他的问题!
更多推荐
前端页面使用html2canvas生成图片
发布评论