html元素转canvas并一键生成png图片特效
稿源: 原创
这是一款html元素转canvas并一键生成png图片(支持img图片元素),支持移动端和PC端,唯一的不足就是图片最大能生成手机屏幕可见尺寸大小。
使用方法
在页面引入以下base64.js、canvas2image.js、html2canvas.min.js文件
<script src="./js/html2canvas.min.js"></script> <script src="./js/canvas2image.js"></script> <script src="./js/base64.js"></script>
canvas代码
<script> // 获取按钮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); var imgSrc = document.getElementById("thecanvas").toDataURL("image/png"); document.getElementById("imgId").style.display = 'block'; document.getElementById("master").style.display = 'block'; document.getElementById("imgId").src = imgSrc; } }); } </script>
HTML结构
<div class="login_group" id="content"> <h1>适用于移动端生成图片</h1> <div class="input_item"> <input type="text" name="mobile" placeholder="手机号"> </div> <div class="input_item"> <input type="password" name="password" placeholder="登录密码"> </div> <div class="input_item"> <a href="javascript:;" class="submit" id="btnSave">生 成</a> </div> </div> <div id="images" style="display:none;"></div> <img id="imgId"> <div id="master"></div>
相关插件