在开发中，可能会遇到需要将页面中的图片保存到本地的需求。JavaScript提供了多种保存图片的方法，下面将介绍其中两种比较常用的方法。

方法一：使用canvas实现保存图片

canvas是HTML5提供的一种绘图标签，可以动态生成图片并保存到本地。

HTML部分：

JavaScript部分：

// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取canvas的上下文对象
var ctx = canvas.getContext("2d");
// 绘制图片到canvas
var img = new Image();
img.src = "图片地址";
img.onload = function() {
 ctx.drawImage(img, 0, 0);
};
// 保存canvas的绘制结果到本地
var link = document.createElement("a");
link.download = "图片名称";
link.href = canvas.toDataURL();
link.click();

方法二：使用Blob实现保存图片

Blob是一种二进制数据流，可以将canvas生成的图片流转化为Blob对象。Blob对象可以通过a标签下载到本地。

JavaScript部分：

// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取canvas生成的图片流
var dataUrl = canvas.toDataURL();
// 将dataUrl转化为Blob对象
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
 u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {type: mime});
// 保存Blob对象到本地
var link = document.createElement("a");
link.download = "图片名称";
link.href = window.URL.createObjectURL(blob);
link.click();

相似文章
• Java文件上传到指定文件目录
  Java文件上传到指定文件目录
  
  
• PHP实现文件下载到本地示例
  PHP实现文件下载到本地示例
  
  
• Java代码实现文件导出到本地的方法及实例
  Java代码实现文件导出到本地的方法及实例
  
  

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政