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

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的转换为大于0var 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 = "*"; //图片支持跨域调用

运行结果如图所示：

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