前端动画渲染引擎pixi.js系列（9）如何生成缩略图

时间：2021-12-17 18:50:58

pixi引擎是将图案都绘制到一个根canvas对象中，观察下面创建canvas对象的源码：

var app = new PIXI.Application(800, 500, {
	backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
其中，app.view就是根canvas对象。通过查看canvas的API可以知道，它有一个函数.toDataURL("image/png");该函数就是可以把canvas对象所渲染的图案转为一个Base64数据格式的对象，也就是我们本篇所说的缩略图。

本篇除了引用pixi.js外，还引用了另一个js库FileSaver.js，调用该库的saveAs（）可以将缩略图保存至本地。

<script type="text/javascript" src="../libs/FileSaver.js"></script>
下面请看生成缩略图的源码： 

var app = new PIXI.Application(800, 500, {
	backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
//加载图片资源
var loader = new PIXI.loaders.Loader();
loader.add('sprite', '../img/time.jpg');
loader.on("progress", function(target, resource) {
	console.log("progress:", target.progress);
});
loader.once('complete', function(target, resource) {
	onComplete(target, resource);
});
loader.load();
//资源加载完成
function onComplete(target, resource) {
	var sprite = new PIXI.Sprite(resource.sprite.texture);
	var container = new PIXI.Container();
	container.addChild(sprite);
	app.stage.addChild(container); //添加至舞台
	app.renderer.render(app.stage); //舞台手动渲染

	//保存图片至本地
	var imageData = app.view.toDataURL("image/png");
	var blobImg = convertBase64UrlToBlob(imageData);
	saveAs(blobImg, "blobImg.png");
}

/**
 * 将Base64数据格式转换为Blob数据格式
 */
function convertBase64UrlToBlob(urlData) {
	var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
	//处理异常,将ascii码小于0的转换为大于0
	var ab = new ArrayBuffer(bytes.length);
	var ia = new Uint8Array(ab);
	for(var i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	return new Blob([ab], {
		type: 'image/png'
	});
}

这里注意一点，当img跟canvas不在同一域时，调用canvas.toDataURL("image/png");时，会报错：

Tainted canvases may not be exported.

这时只需添加以下代码即可：

img.crossOrigin = "*"; //图片支持跨域调用

运行结果如图所示：

前端动画渲染引擎pixi.js系列（9）如何生成缩略图

程序运行后会将app.view中渲染的图案会保存至一张名为blobImg.png的图片中，即我们所需的缩略图。源码中的一个难点是saveAs（）的入参blobImg的数据格式只能是Blob类型，所以需要执行convertBase64UrlToBlob（）方法将Base64数据格式转换为Blob类型的数据格式。

标签：

相关文章