首先引入html2canvas.min.js、canvas2image.js和base64.js插件。
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<!-- html2canvas将Dom节点在Canvas里边画出来 -->
<script src="js/html2canvas.min.js"></script>
<!-- 将canvas图片保存成图片 -->
<script src="js/canvas2image.js"></script>
<script src="js/base64.js"></script>然后在<body>里设置好需要转换成canvas的元素，例如：id="content"。
<div id="content" style="width:188px;height:300px;border:1px solid #22b4f6;float:left;text-align:center;">
<p><img width="50" height="50" src="images/pic.jpg" alt="头像"></p>
<p>昵称：richer</p>
<p>专业：前端 + 后端</p>
<p>语言：html、php、mysql</p>
<p>脚本：javascript</p>
<p><input type="text" class="tx" placeholder="微信公众号开发"></p>
<p><input type="button" class="bt" value="网站微站开发"></p>
</div>通过给按钮绑定对应的事件来触发canvas的生成动作。
/*生成canvas图形*/
// 获取按钮id
var btnSave = document.getElementById("btnSave");
// 获取内容id
var content = document.getElementById("content");
// 进行canvas生成
btnSave.onclick = function(){
html2canvas(content, {
onrendered: function(canvas) {
//添加属性
canvas.setAttribute('id','thecanvas');
//读取属性值
// var value= canvas.getAttribute('id');
document.getElementById('images').innerHTML = '';
document.getElementById('images').appendChild(canvas);
}
});
}1、html2canvas.min.js和canvas2image.js均为目前最新版本
2、支持页面的img元素，但不支持跨域图片
3、不能在浏览器插件中使用
4、部分浏览器上不支持SVG图片
5、不支持Flash*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
