H5页面转成图片并下载到本地

Posted 光影易逝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5页面转成图片并下载到本地相关的知识,希望对你有一定的参考价值。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html元素转canvas并一键生成png图片(支持img图片元素)</title>
  <!-- html2canvas将Dom节点在Canvas里边画出来 -->
  <script src="js/html2canvas.min.js"></script>

  <!-- 将canvas图片保存成图片 -->
  <script src="js/canvas2image.js"></script>
  <script src="js/base64.js"></script>
  <style>
    p{
      font-size: 15px;
      font-family: ‘Microsoft YaHei‘, ‘Lantinghei SC‘, ‘Open Sans‘, Arial, ‘Hiragino Sans GB‘, ‘STHeiti‘, ‘WenQuanYi Micro Hei‘, ‘SimSun‘, sans-serif;
    }
    #content{
      border-radius: 3px;
    }
    #btnSave,#Download{
      position: absolute;
      left: 65px;
      top: 320px;
      width: 78px;
      height: 30px;
      background-color: #22b4f6;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      border: none;
    }
    #Download{
      margin-left: 250px;
    }
    .tx,.bt{
      border: 1px solid #999;
      width: 100px;
      height: 20px;
      border-radius: 3px;
    }
    .bt{
      background-color: #22b4f6;
      color: #fff;
      text-align: center;
      border: none;
    }
  </style>
</head>
<body>
  <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/1.jpg" alt="头像"></p>
    <p>昵称:richer</p>
    <p>专业:前端 + 后端</p>
    <p>语言:html、phpmysql</p>
    <p>脚本:javascript</p>
    <p><input type="text" class="tx" placeholder="微信公众号开发"></p>
    <p><input type="button" class="bt" value="网站微站开发"></p>
  </div>
  <div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
  <div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">图片预览区</div>
  <button id="btnSave">转成图片</button>
  <button id="Download">下载图片</button>

  <script>
    /*生成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);
        }
      });
    }
  </script>
  <script>
/*
* 说明
* 不支持跨域图片
* 不能在浏览器插件中使用
* 部分浏览器上不支持SVG图片
* 不支持Flash
*/
    var Download = document.getElementById("Download");
    Download.onclick = function(){
      var oCanvas = document.getElementById("thecanvas");

      /*自动保存为png*/
      // 获取图片资源
      var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute(‘src‘);
      saveFile(img_data1, ‘richer.png‘);


      /*下面的为原生的保存,不带格式名*/
      // 这将会提示用户保存PNG图片
      // Canvas2Image.saveAsPNG(oCanvas);
    }
    // 保存文件函数
    var saveFile = function(data, filename){
    var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘);
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent(‘MouseEvents‘);
    event.initMouseEvent(‘click‘, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
  };
</script>

</body>

</html>

以上是关于H5页面转成图片并下载到本地的主要内容,如果未能解决你的问题,请参考以下文章

h5怎么保存到手机,不用网也能打开

移动端h5 web端html 电子签名、 html转成图片保存至后端

前端如何将H5页面打包成本地app?

手机端app h5页面怎么禁用长按选中

h5添加到手机桌面代码

H5调用本地相册/相机上传图片