当前位置：首页 > JavaScript

js实现保存图片

2026-02-28 23:45:56JavaScript

使用Canvas生成并保存图片

通过Canvas可以将DOM元素或图像数据绘制到画布上，再转换为图片保存。以下是一个完整的实现示例：

// 获取Canvas元素并绘制内容
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
ctx.fillStyle = '#FF5733';
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';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

保存网页中的现有图片

对于页面中已存在的<img>元素，可以通过以下方式保存：

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

// 使用示例
const myImage = document.getElementById('myImage');
saveImage(myImage, 'custom-name.jpg');

使用FileSaver.js库简化操作

FileSaver.js库提供了更简单的API来处理文件保存：

// 安装：npm install file-saver
import { saveAs } from 'file-saver';

// 保存Blob或DataURL
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
    saveAs(blob, 'canvas-image.png');
});

// 直接保存远程图片
saveAs('https://example.com/image.jpg', 'remote-image.jpg');

处理跨域图片的保存

当需要保存跨域图片时，需要确保服务器允许CORS：

const img = new Image();
img.crossOrigin = 'Anonymous';
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 link = document.createElement('a');
    link.href = canvas.toDataURL('image/jpeg');
    link.download = 'cross-origin-image.jpg';
    link.click();
};
img.src = 'https://example.com/cross-origin-image.jpg';

保存SVG为图片

将SVG转换为Canvas再保存：

js实现保存图片

function saveSVG(svgElement, filename) {
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = filename || 'svg-image.png';
        link.click();
    };

    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
}

// 使用示例
const svg = document.getElementById('mySvg');
saveSVG(svg, 'converted-svg.png');