zoukankan      html  css  js  c++  java
  • html生成图片并保存到本地方法(Windows)

    // 最近用到一个保存html为图片到本地的功能(保存到下载目录),记之,该功能IE使用Blob 存储数据,关于兼容性问题参见如下表格,其他浏览器使用a标签download属性新功能下载

    BrowserConstructs asFilenamesMax Blob SizeDependencies
    Firefox 20+ Blob Yes 800 MiB None
    Firefox < 20 data: URI No n/a Blob.js
    Chrome Blob Yes 500 MiB None
    Chrome for Android Blob Yes 500 MiB None
    Edge Blob Yes ? None
    IE 10+ Blob Yes 600 MiB None
    Opera 15+ Blob Yes 500 MiB None
    Opera < 15 data: URI No n/a Blob.js
    Safari 6.1+* Blob No ? None
    Safari < 6 data: URI No n/a Blob.js

    // 步骤一:引入html2canvas.js  

    //步骤二:完成以下方法即可

    function downloadForJS(){

      //使用html2canvas 转换html为canvas
      html2canvas($("#ID")).then(function(canvas) { 
        if(IE){ //判断IE下保存方法
          var blob = canvas.msToBlob();
          window.navigator.msSaveBlob(blob, fileName);
        }else{//其他浏览器保存方法
         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
          var saveLink = document.createElement( 'a');
          saveLink.href =imgUri;
          saveLink.download = fileName; saveLink.click();
        }
    });
    }

    更多兼容性问题参考:https://github.com/eligrey/FileSaver.js

  • 相关阅读:
    AFNetworking 使用
    AFNetWork 请求https
    Label加下滑线
    iOS 学习资料
    调用系统的打电话,发短信,邮件,蓝牙
    NSObject
    本地消息和消息推送
    AFNNetworking 中json格式不标准的解决办法
    UitableView 动态高度的优化 提高寻星效率
    cell 高度的计算
  • 原文地址:https://www.cnblogs.com/huxdiy/p/6124208.html
Copyright © 2011-2022 走看看