JavaScript 怎样保存图片

在网页开发中，经常会遇到需要使用 JavaScript 保存图片的需求。这不仅可以方便用户获取重要图像信息，还能为网站增添实用功能。以下就为大家介绍几种常见的利用 JavaScript 保存图片的方法。

使用 canvas 元素保存图片

canvas 是 HTML5 新增的一个元素，它提供了一个绘图表面。我们可以利用 canvas 将图片绘制到其中，然后使用 toBlob() 方法将其转换为 Blob 对象，再通过 URL.createObjectURL() 创建一个临时的 URL，最后创建一个 a 标签，设置其 href 为这个临时 URL 并模拟点击来实现图片保存。

示例代码如下：

// 获取图片元素
const img = document.getElementById('your-image-id'); 
// 创建一个canvas元素
const canvas = document.createElement('canvas'); 
const ctx = canvas.getContext('2d'); 

// 设置canvas的尺寸与图片相同
canvas.width = img.width; 
canvas.height = img.height; 

// 将图片绘制到canvas上
ctx.drawImage(img, 0, 0); 

// 将canvas内容转换为Blob对象
canvas.toBlob((blob) => { 
  // 创建一个临时URL
  const url = URL.createObjectURL(blob); 
  // 创建一个a标签
  const a = document.createElement('a'); 
  a.href = url; 
  a.download = 'imageName.jpg'; 
  // 模拟点击a标签
  a.click(); 
  // 释放URL
  URL.revokeObjectURL(url); 
}, 'image/jpeg'); 

使用 FileSaver.js 库保存图片

FileSaver.js 是一个专门用于在浏览器中保存文件的库。首先要引入这个库，然后通过获取图片的 src 属性，创建一个 XMLHttpRequest 对象来获取图片的二进制数据，最后使用 FileSaver.js 提供的 saveAs() 方法保存图片。

引入库后，示例代码如下：

const imgUrl = 'your-image-url'; 
const xhr = new XMLHttpRequest(); 
xhr.open('GET', imgUrl, true); 
xhr.responseType = 'blob'; 

xhr.onload = function () { 
  if (xhr.status === 200) { 
    const blob = xhr.response; 
    saveAs(blob, 'imageName.jpg'); 
  } 
}; 
xhr.send(); 

通过上述方法，我们可以根据项目的实际需求灵活选择合适的方式，利用 JavaScript 实现图片保存功能，为用户带来更便捷的体验，同时提升网站的功能性和实用性。