头像

html元素转canvas并一键生成png图片(支持img图片元素)【原创

来源:http://www.sucaihuo.com/js/1946.html 素材火管理员 2017-05-16 19:30浏览(6821) 收藏

这是一个有趣的功能,可以将html页面任意元素转换成png图片,并可以一键保存下载,支持指定元素里包含img图片元素,可以指定生成的png的名称。
html元素转canvas并一键生成png图片(支持img图片元素)
分类:html/css > 图形 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 72

手机扫码访问:

下载资源 下载积分: 90 积分

HTML

首先引入html2canvas.min.js、canvas2image.js和base64.js插件。

<!-- 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>

JAVASCRIPT

通过给按钮绑定对应的事件来触发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
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/1946.html
评论14
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 13楼
    04-03 09:45
    99***28
    html 元素不可见的时候能转成图片么?
  • 头像 12楼
    03-01 17:38
    艾***妮
    厉害了,这个很好用。谢谢了
  • 头像 11楼
    01-02 22:42
    小***泉
    非常有用的工具
  • 头像 10楼
    12-10 18:36
    江***养
    支持页面的img元素,但不支持跨域图片 ,这个一定要注意,不然踩坑
    1
    Wc***05

    该问题已经解决酷

    2
    兔***子

    回复 Wc***05 请问怎么解决这个问题呢?我现在也遇到了相同的问题

  • 头像 9楼
    12-07 16:25
    Wc***05
    在苹果手机里转化的图片会比较模糊 百度谷歌了老半天 暂时没有找到解决方案 (主要该demo引入的是html2canvas.min.js及canvas2image.js) 不知作者是否有解决方案
  • 头像 8楼
    09-20 10:16
    白***酱
    演示的效果相当棒
  • 头像 7楼
    09-12 15:32
    ly***88
    演示的效果相当棒
  • 头像 6楼
    06-22 17:29
    va***sm
    特此学习,感谢分享
  • 头像 5楼
    05-31 13:16
    qi***qi
    挺好的 辅导费准备下载一个
  • 头像 4楼
    05-19 14:54
    eh***oo
    大量表格可以生成图片么
    1
    舒***畅

    可以,操作一样的。

1 2