前端页面使用html2canvas生成图片

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Gemini_Kanon/article/details/84325342

 最近小编一直被这个问题困扰着,公司项目需求:公众号长按图片保存到手机,但是页面上相关内容都是图片和文字(前后端都有)组成,于是乎我到网上各种找办法,最后锁定了这个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.org/TR/html4/loose.dtd">

这说明该文件支持HTML4操作(具体是什么HTML版本,请参照文件头),html2canvas不支持HTML4所以会导致不好使,改成如下形式即可支持HTML5操作~

就是它的原因,小编弄了一天半的时间最后改成<!DOCTYPE html>,到此问题全部解决!

声明一下:网上好多都说用html2canvas时会遇到跨域问题,导致无法生成图片,这个问题小编不是很清楚,因为我用的这个方法直接就生成出来了,没有遇到其他的问题!

展开阅读全文

没有更多推荐了,返回首页