js实现保存图片

使用Canvas绘制并保存图片

通过Canvas将DOM元素或图像绘制到画布上，再转换为图片保存。适用于需要动态生成或处理图像的场景。

// 创建Canvas并绘制内容
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 转换为DataURL并触发下载
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link.click();

直接下载网络图片

通过Fetch API获取图片资源，转换为Blob对象后创建下载链接。适合保存已存在的网络图片。

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-image.jpg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

保存页面中的img元素

直接获取页面中已有img元素的src属性进行保存。适用于需要保存用户可见图片的场景。

function saveImageFromElement(imgElement, filename) {
  const link = document.createElement('a');
  link.href = imgElement.src;
  link.download = filename || 'image.png';
  link.click();
}

// 使用示例
const myImg = document.getElementById('my-image');
saveImageFromElement(myImg, 'custom-name.jpg');

使用FileSaver.js库简化操作

通过第三方库FileSaver.js简化保存流程，支持更复杂的保存场景。

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

// 保存Blob对象
const blob = new Blob([data], {type: 'image/jpeg'});
saveAs(blob, 'image.jpg');

// 直接保存DataURL
const dataUrl = 'data:image/png;base64,...';
saveAs(dataUrl, 'image.png');

处理跨域图片资源

当遇到跨域图片时，需要服务器配置CORS或使用代理服务。

// 服务器需设置响应头: Access-Control-Allow-Origin: *
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://cross-origin.com/image.jpg';

img.onload = function() {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  const dataURL = canvas.toDataURL('image/jpeg');
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'cross-origin-image.jpg';
  link.click();
};

响应式图片保存方案

针对不同来源和需求的完整解决方案示例。

async function saveImage(source, filename) {
  let blob;

  if (source instanceof HTMLCanvasElement) {
    blob = await new Promise(resolve => 
      source.toBlob(resolve, 'image/png')
    );
  } 
  else if (source instanceof Blob) {
    blob = source;
  }
  else if (source.startsWith('data:')) {
    const res = await fetch(source);
    blob = await res.blob();
  }
  else if (source.startsWith('http')) {
    const res = await fetch(source);
    blob = await res.blob();
  }
  else if (source instanceof HTMLImageElement) {
    const canvas = document.createElement('canvas');
    canvas.width = source.naturalWidth;
    canvas.height = source.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(source, 0, 0);
    blob = await new Promise(resolve => 
      canvas.toBlob(resolve, 'image/png')
    );
  }

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'image.png';
  a.click();
  setTimeout(() => URL.revokeObjectURL(url), 100);
}