如何用JavaScript将图片表分割为独立可保存的图片？

核心思路 #

利用Canvas API截取Sprite图中的单个16x16字符，通过关闭图像平滑实现像素化放大，最后生成可下载的独立图片文件。

步骤拆解与代码实现 #

1. 基础HTML结构

需要一个容器展示生成的字符图，以及加载原始Sprite图的隐藏元素：

<div id="charContainer"></div>
<img id="sprite" src="unicode_page_00.png" style="display: none;" crossorigin="anonymous">

2. JavaScript核心逻辑

const spriteImg = document.getElementById('sprite');
const charContainer = document.getElementById('charContainer');
const scale = 4; // 放大倍数，对应需求的4倍
const charSize = 16; // 单个字符的原始尺寸
const spriteSize = 256; // Sprite图总尺寸
const totalChars = (spriteSize / charSize) ** 2; // 总字符数256个

// 等待Sprite图加载完成后执行
spriteImg.onload = function() {
  for (let i = 0; i < totalChars; i++) {
    // 计算当前字符在Sprite图中的坐标
    const x = (i % 16) * charSize;
    const y = Math.floor(i / 16) * charSize;

    // 创建小Canvas用于截取原始字符
    const smallCanvas = document.createElement('canvas');
    smallCanvas.width = charSize;
    smallCanvas.height = charSize;
    const smallCtx = smallCanvas.getContext('2d');
    smallCtx.drawImage(spriteImg, x, y, charSize, charSize, 0, 0, charSize, charSize);

    // 创建大Canvas用于像素化放大
    const bigCanvas = document.createElement('canvas');
    bigCanvas.width = charSize * scale;
    bigCanvas.height = charSize * scale;
    const bigCtx = bigCanvas.getContext('2d');
    // 关闭所有浏览器的图像平滑属性，保持像素风格
    bigCtx.imageSmoothingEnabled = false;
    bigCtx.mozImageSmoothingEnabled = false;
    bigCtx.webkitImageSmoothingEnabled = false;
    bigCtx.msImageSmoothingEnabled = false;
    // 将小Canvas的内容放大绘制到大Canvas
    bigCtx.drawImage(smallCanvas, 0, 0, charSize, charSize, 0, 0, charSize * scale, charSize * scale);

    // 创建可下载的图片元素与下载按钮
    const charImg = new Image();
    charImg.src = bigCanvas.toDataURL('image/png');
    charImg.style.margin = '4px';

    const downloadBtn = document.createElement('button');
    downloadBtn.textContent = `下载 U+00${i.toString(16).padStart(2, '0')}`;
    downloadBtn.onclick = () => {
      const a = document.createElement('a');
      a.href = bigCanvas.toDataURL('image/png');
      a.download = `unicode_U+00${i.toString(16).padStart(2, '0')}.png`;
      a.click();
    };

    // 将元素添加到容器
    const charWrapper = document.createElement('div');
    charWrapper.appendChild(charImg);
    charWrapper.appendChild(downloadBtn);
    charContainer.appendChild(charWrapper);
  }
};

关键细节说明 #

• 跨域处理：如果Sprite图来自外部域名，需要确保服务器配置了CORS，并且img标签添加crossorigin="anonymous"属性，否则Canvas无法生成toDataURL。
• 像素化放大：通过关闭所有浏览器的图像平滑属性，保证放大后的字符保持硬边缘的像素风格，和CSS实现的效果一致。
• 字符命名：用U+00XX的格式命名下载文件，对应Unicode编码，方便识别。

内容的提问来源于stack exchange，提问作者karl-police