brower-image-combiner
v0.0.4
Published
浏览器端拼接大图，导出PNG/BMP格式的工具，可使用CPU/GPU加速计算
Readme
PNG/BMP 图像拼接（编码）工具
PNG/BMP 图像拼接（编码）工具是用于在页面中拼接大尺寸图片并输出的 js 库，一般在 web 端会优先使用 Canvas 进行图片操作，但 canvas 是有极限的（JOJO 我不做人了！），一般在 8G 内存的 PC 中超过Math.pow(10,8)像素的 canvas 就会因为内存溢出无法进行绘制和预览了，本工具就是用来处理上述情形的。
使用 NPM：
安装方式：
npm install --save brower-image-combinerDEMO：
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：直接覆盖像素信息（更快）
) => voidgetFile 获得文件:
() => Blob;download 直接下载：
(fileName:string) => void;未完待续