js图片打包下载

要实现js图片打包下载，可以使用canvas和FileSaver.js库。步骤如下：

1. 创建一个空的canvas元素，设置宽高等属性。
2. 在canvas上绘制图片，使用drawImage()方法。
3. 将canvas转换为DataURL数据，使用toDataURL()方法。
4. 将DataURL数据转换为Blob对象，使用dataURItoBlob()方法。
5. 使用FileSaver.js库将Blob对象保存为图片文件。

下面是一个示例代码：

// 引入FileSaver.js库
import { saveAs } from 'file-saver';

// 创建一个canvas元素
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d');

// 加载图片
const img = new Image();
img.onload = function() {
  // 在canvas上绘制图片
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 将canvas转换为DataURL数据
  const dataUrl = canvas.toDataURL('image/png');

  // 将DataURL数据转换为Blob对象
  const blob = dataURItoBlob(dataUrl);

  // 使用FileSaver.js库将Blob对象保存为图片文件
  saveAs(blob, 'image.png');
};
img.src = 'path/to/image.png';

// 将DataURL数据转换为Blob对象的方法
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
}

在上面的代码中，需要先引入FileSaver.js库，然后创建一个canvas元素并设置宽高等属性。接着加载要打包下载的图片，使用drawImage()方法将图片绘制到canvas上，然后将canvas转换为DataURL数据，再将其转换为Blob对象，最后使用FileSaver.js库将Blob对象保存为图片文件。