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

  • 相关阅读:
    HTML简介
    web服务器的原理
    静态网页和动态网页的区别
    HTTP协议相关原理
    C/S,B/S的应用的区别
    git撤销commit但未push的文件
    表单提交不刷新页面
    httpclient请求中文乱码问题
    web项目,@return@see@param等注解Maven install报错,不能识别
    Hive 基本操作
  • 原文地址:https://www.cnblogs.com/huxdiy/p/6124208.html
Copyright © 2011-2022 走看看