优化图集打包的尺寸

src/utils/sheet-pack.js

@@ -10,6 +10,10 @@ import generateUUID from "uuid/v4";
 const packExts = ['.png']; //, '.jpg', '.jpeg', '.bmp'
 
 let canvas = document.createElement('canvas');
+let canvasFinal = document.createElement('canvas');
+
+let context = canvas.getContext('2d');
+let contextFinal = canvasFinal.getContext('2d');
 
 export async function packImages(assets, options = {}) {
 	const padding = options.padding || 1;
@@ -60,16 +64,24 @@ export async function packImages(assets, options = {}) {
 		let pack = new MaxRectsBinPack(maxSize, maxSize, false);
 		let packedRects = pack.insertRects(remainRects, mode);
 
-		//document.body.append(canvas);
 		canvas.width = canvas.height = maxSize;
-		let context = canvas.getContext('2d');
-		//context.fillStyle = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
-		//context.strokeRect(0, 0, maxSize, maxSize);
+		let maxWidth = 0, maxHeight = 0;
 		for (let rect of packedRects) {
+			if (rect.x + rect.width > maxWidth) {
+				maxWidth = rect.x + rect.width;
+			}
+			if (rect.y + rect.height > maxHeight) {
+				maxHeight = rect.y + rect.height;
+			}
 			context.drawImage(rect.image, rect.x + padding, rect.y + padding);
 		}
+
+		canvasFinal.width = maxWidth;
+		canvasFinal.height = maxHeight;
+		contextFinal.drawImage(canvas, 0, 0);
+
 		let blob = await new Promise(resolve => {
-			canvas.toBlob(function (blob) {
+			canvasFinal.toBlob(function (blob) {
 				resolve(blob);
 			}, 'image/png');
 		});