这是一款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>