Brower-image-combiner NPM

PNG/BMP 图像拼接（编码）工具

作者：chzh314@hotmail.com

PNG/BMP 图像拼接（编码）工具是用于在页面中拼接大尺寸图片并输出的 js 库，一般在 web 端会优先使用 Canvas 进行图片操作，但 canvas 是有极限的（JOJO 我不做人了！），一般在 8G 内存的 PC 中超过Math.pow(10,8)像素的 canvas 就会因为内存溢出无法进行绘制和预览了，本工具就是用来处理上述情形的。

使用 NPM：

安装方式：

npm install --save brower-image-combiner

DEMO：

HTML:

<body>
  <!-- 目标canvas -->
  <canvas id="canvas1" width="100" height="100" />
</body>

Javascript/Typescript:

import { BMP, PNG } from "brower-image-combiner";

const canvas = document.getElementById("canvas1");

//编码BMP
const bmpCombiner = new BMP(100, 100);
bmpCombiner.drawCanvas(canvas, 100, 100, 0, 0);
const file = bmpCombiner.getFile(); //返回拼合图片的Blob对象
//或者直接下载
bmpCombiner.download("拼合图片"); //自动下载 拼合图片.bmp

//编码PNG
const pngCombiner = new PNG(100, 100, { gpu: true }); //PNG可使用GPU加速
pngCombiner.drawCanvas(canvas, 100, 100, 0, 0);
const file = pngCombiner.getFile(); //返回拼合图片的Blob对象
//或者直接下载
pngCombiner.download("拼合图片"); //自动下载 拼合图片.png

直接引用：

HTML:

<body>
  <!-- 目标canvas -->
  <canvas id="canvas1" width="100" height="100" />
  <script src="lib/imageCombiner/index.js" />
  <script>
    const canvas = document.getElementById("canvas1");
    //编码PNG
    const pngCombiner = new ImageCombiner.PNG(100, 100);
    pngCombiner.drawCanvas(canvas, 100, 100, 0, 0);
    const file = pngCombiner.getFile(); //返回拼合图片的Blob对象
    //或者直接下载
    pngCombiner.download("拼合图片"); //自动下载 拼合图片.png
  </script>
</body>

API

PNG

constructor 构造函数：

(
  width: number, //总宽度 无法更改 需在创建时固定
  height: number, //总高度 无法更改 需在创建时固定
  options: {
    deflateChunkSize?: number; //压缩字典大小
    deflateLevel?: number; //压缩级别
    deflateStrategy?: number; //压缩策略
    gpu?: boolean; //是否使用GPU加速
    textInfo?: string; //向头部添加的版权信息等文本内容
  }
) => ImageCombiner.PNG;

drawCanvas 绘制图片：

(
  canvas: HTMLCanvasElement | HTMLImageElement | CanvasRenderingContext2D,
  //目标图像 可使用常见图片或画布/画布2d上下文作为入参
  width: number,   //目标图片宽度
  height: number,  //目标图片高度
  targetX: number, //绘制起点x
  targetY: number, //绘制起点y
  overlying?: boolean //是否采用叠加方式 true：保留透明关系 false：直接覆盖像素信息（更快）
) => void

getFile 获得文件: