html生成图片并保存到本地方法(Windows)

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

Browser Constructs as Filenames Max Blob Size Dependencies
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

时间: 2024-11-05 14:51:43

html生成图片并保存到本地方法(Windows)的相关文章

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2canvas.js"></script> 2.<script type="text/javascript" src="js/base64.js"></script> 3.<script type="text

vue使用html2canvas生成图片并保存到本地

1.添加html2canvas插件 2.在script下引用插件 import html2canvas from 'html2canvas'; 3.使用方法调用 <!--二维码HTML--> <el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="340px"> <div slot="footer" class="

canvas生成图片并保存到本地文件夹主要代码

js var url = canvas.toDataURL();//把canvas中的图片变成data:image C# string filepath = ""; string imgData = Request["url"].ToString(); var date = DateTime.Now.ToString("yyyyMMddmsms"); if (imgData.StartsWith("data:image/png;base

python 画图后柱状图保存到本地方法 plt.savefig(&quot;filename.png&quot;) python 使用 plt 画图后保存到本地 python保存柱状图/散点图/折线图/直方图到本地的方法

import matplotlib.pyplot as plt     """ 一些画图代码 """     plt.savefig("filename.png")   # 保存图片 注意 在show()之前  不然show会重新创建新的 图片   plt.show() import matplotlib.pyplot as plt """ 一些画图代码 """ pl

微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.(详情 看文档) 这里先来分析一下这句话:导出当前画布指定区域的内容并生成图片 .这里以画一个矩形并将该矩形保存到本地相册为例. 首先我们要做的是先在画布上画一个矩形,其次是利用 wx.canvasToTempFilePath()方法导出画布指定区域的内容,这里当

ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

ASP.NET下载远程图片保存到本地的方法.保存抓取远程图片 2012-05-16 11:25:51     我来说两句      收藏    我要投稿 以下介绍两种方法:1.利用WebRequest,WebResponse 类WebRequest wreq=WebRequest.Create("http://up.2cto.com/2012/0516/20120516112717995.gif");    HttpWebResponse wresp=(HttpWebResponse)

下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片

将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 #region 图片下载[使用流.WebRequest进行保存] 4 /// <summary> 5 /// 图片下载[使用流.WebRequest进行保存] 6 /// </summary> 7 /// <param name="fileUrl">图片URL地址(例如:http://img.baidu.com/video/img/video

C#中将String类型保存到本地文件的方法

今天刚刚遇到,要在WinForm中把一个xml保存到本地, 由于之前是学习java的,一时间还真不知道怎么写, 没想到C#居然那么方便,就3句代码就实现了我要的功能: StreamWriter sw = new StreamWriter("e:\\20141021.xml");//这里写上你要保存的路径sw.WriteLine(xmlResponse);//按行写sw.Close();//关闭

Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jquery 版本还没试过我用的是3.1.1 (不贴链接了,这个要找很容易) ②:dom-to-image.js (点击下载  下载下来解压开在src目录里面) ③:FileSaver.js (点击下载  下载下来解压开在src目录里面) 2.新建HTML引入第一步中的几个库 3.生成图片 3.1.生成