用Html5打造下载图片功能，让你轻松下载网页截图

前端

2023-05-30 12:37:45

在移动端 H5 项目中实现图片保存功能：全攻略

移动端 H5 项目中经常需要保存图片到相册，例如页面截图或特定图片。本文将详细介绍实现这一功能的方法，从截取图像数据到将其保存到相册，帮助你轻松解决这一需求。

实现思路

图片保存功能的实现可以分为两个步骤：

截取图像数据： 获取页面或图片的图像数据。
保存图像数据： 将图像数据保存到手机相册。

实现方法

1. 截取图像数据

网页截图

使用 html2canvas 库可以轻松截取网页截图，它将 HTML 元素转换为 Canvas 图像数据。

安装 html2canvas 库：

npm install html2canvas

导入库：

import html2canvas from 'html2canvas';

截取截图：

html2canvas(document.body).then(function(canvas) {
  // 将 Canvas 图像数据转换为 Blob 对象
  canvas.toBlob(function(blob) {
    // 创建指向 Blob 对象的 URL
    const url = URL.createObjectURL(blob);
  });
});

下载图片

使用 fetch() API 可以下载图片。

fetch(imageUrl)
  .then(res => res.blob())
  .then(blob => {
    // 将 Blob 对象转换为 Blob URL
    const url = URL.createObjectURL(blob);
  });

2. 保存图像数据

保存图像数据可以使用以下方法：

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    setTimeout(() => {
      canvas.getContext('2d').drawImage(video, 0, 0);
      video.pause();
      video.srcObject = null;

      canvas.toBlob(function(blob) {
        // 将 Blob 对象转换为 Blob URL
        const url = URL.createObjectURL(blob);

        // 使用 saveToPhotos API 保存图片
        window.saveToPhotos(url);
      });
    }, 1000);
  });