<!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="data:images/1.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>
  <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页面转成图片并下载到本地的更多相关文章

  1. 将H5页面打包成安卓原生app

    第一步:下载HBuilderX,新建项目选择5+App新建一个空项目如下图 新建后项目目录结构如下图 第二步,将你要打包成安卓app的文件打包,最后生成的文件目录如下图 1.打包完成后,将对应文件内容 ...

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

    大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...

  3. 关于jsp页面转换成excel格式下载遇到问题及解决

    jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...

  4. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  5. js将canvas保存成图片并下载

    <canvas id="canvas" width="400" height="400"></canvas> < ...

  6. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  7. html2canvas如何将div转成图片并下载,如何将滚动条的内容截取下来

    <!DOCTYPE html> <html lang="en"> <head> <meta name="layout" ...

  8. 把html页面转化成图片——html2canvas

    test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...

  9. JavaScript实现html页面转换成图片格式

    本文提供三个JavaScript插件,并提供对应GitHub地址,自行查看使用方法: 1)dom-to-image:dom-to-image 2)html2canvas:html2canvas 3)r ...

随机推荐

  1. 创建银行API

    DECLARE lc_output VARCHAR2(3000); lc_msg_dummy VARCHAR2(3000); lc_return_status VARCHAR2(3000); lc_m ...

  2. EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  3. UE4实现描边效果

    描边效果属于常见常用的功能,现VR项目中,也需要射线选中一个物体,使物体高亮. 于是在网上找了部分资料,同时也感谢群里的一位大神的提点,总算将描边的功能实现了,这里也写一个简单的示例步骤. 1.我并不 ...

  4. Java子类实例化的过程

    //继承 class Work{ public Work(){ System.out.println("父类中的方法"); } } class Worker extends Wor ...

  5. java实现:将一个数各个位数相加

    前面已经实现过这个程序,现在我们就不多说了,直接更改C的源码,实现这个JAVA程序. import java.util.Scanner; public class HelloWorld { publi ...

  6. Django练习——TodoList

    TodoList是django入门一个比较基础的例程,主要参考如下博客,写的非常好: simple-todo: http://www.cnblogs.com/cacique/archive/2012/ ...

  7. awk 循环语句例子

    awk 循环语句例子 运行结果:

  8. Java应用程序使用系统托盘资源

    要想使自己开发的Java SE项目运行在自己的电脑系统托盘上,这并不是什么难事,总共需要如下几步即可: 1.线判断一下,系统托盘是否可用,否则接下来的程序将不可避免的报出异常咯 2.获得一个Syste ...

  9. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  10. Web报表工具FineReport二次开发JS之字符串

    在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本.API接口等进行深入的开发与控制. 考虑到JS脚本开发的使用较多,这里先先简 ...