js将html生成为图片，并保存在本地

html生成图片的方式有很多种，有的需要下载安装插件，如phantomjs 。显得未免麻烦了些，有的又是通过后台来实现的，但个人感觉没必要做这种交互，也没必要在服务端生成这些零时文件，那么问题来了，有没有什么方法，能直接在页面生成图片然后保存在本地呢，答案是肯定的。在这里我为大家介绍的是html2canvas，这款js，能将html转换为canvas，然后我们在将转换的图片保存下来，废话不多，实现如下：

以下是需要生成图片的网页

html代码如下：

  
    
访客通行证
    
      
@@##@@
      
        
$!{data.name}
        
          通行码：          $!{data.number}        
              
      目的地：      $!{data.property}    
    
      
        
人数：
        
$!{data.persons}
            
        
是否有车：
        
#if($!data.haveCar)有#else 无#end
              
      有效时间：      $!{data.visitingTime}      
当天有效
        
进入园区时，出示此通行证给保安
    
    
保存图片
     

登录后复制

将以上html生成图片并下载的js如下：

首先引入html2canvas.min.js文件，然后：

$(function(){$("#saveImg").click(function(){ html2canvas($(".tongxingzheng_bg")).then(function(canvas) {         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url         window.location.href= imgUri; // 下载图片     }); });});

登录后复制

至于html2canvas.min.js的用法，大家可以去官网下载，里面有几个demo参考

立即学习“前端免费学习笔记（深入）”；

本文讲解了js将html生成为图片，并保存在本地，更多相关内容请关注【创想鸟】。

相关推荐：

js中函数的三种定义方式

js中函数的三种定义方式

js中函数的三种定义方式

以上就是js将html生成为图片，并保存在本地的详细内容，更多请关注【创想鸟】其它相关文章！