前端页面使用html2canvas生成图片

最新推荐文章于 2024-06-13 18:29:48 发布

Gemini_Kanon

最新推荐文章于 2024-06-13 18:29:48 发布

阅读量8.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Gemini_Kanon/article/details/84325342

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

最近小编一直被这个问题困扰着，公司项目需求：公众号长按图片保存到手机，但是页面上相关内容都是图片和文字（前后端都有）组成，于是乎我到网上各种找办法，最后锁定了这个html2canvas前端生成图片（canvas画布）的方法，但是问题随之而来，网上各种大佬的代码不是少这就是少那，对于刚入行半年的萌新来说有的根本看不懂，但是皇天不负有心人最后我终于找到了一篇代码解决了这个事情，接下来把代码放上来~

首先引入两个js文件：

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时会遇到跨域问题，导致无法生成图片，这个问题小编不是很清楚，因为我用的这个方法直接就生成出来了，没有遇到其他的问题！

Gemini_Kanon

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
前端页面使用html2canvas生成图片

最近小编一直被这个问题困扰着，公司项目需求：公众号长按图片保存到手机，但是页面上相关内容都是图片和文字（前后端都有）组成，于是乎我到网上各种找办法，最后锁定了这个html2canvas前端生成图片（canvas画布）的方法，但是问题随之而来，网上各种大佬的代码不是少这就是少那，对于刚入行半年的萌新来说有的根本看不懂，但是皇天不负有心人最后我终于找到了一篇代码解决了这个事情，接下来把代码放上来~...
复制链接

扫一扫

专栏目录