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

红太狼 2021-09-12 07:14 578阅读 0赞

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 = "*"; //图片支持跨域调用

运行结果如图所示：

![Center][]

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

[Center]: /images/20210813/2ae7b43b3c11476998f871cbc525ab98.png

发表评论取消回复

表情：

评论列表（有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读

相关生成缩略图~java

话不多说直接上代码： public class ImageUtil { / 生成缩略图 @param

﹏ヽ暗。殇╰゛Y/ 2024年02月05日 20:02/ 0 赞/ 20 阅读

相关 Nginx 实时生成缩略图

缩略图的生成有多种方式，如使用[java生成缩略图][java]，也可以使用nginx+lua实现，下面我们讲解一下使用nginx自带的模块生成缩略图，模块：-with-htt

ゝ一纸荒年。/ 2022年08月07日 11:57/ 0 赞/ 243 阅读

相关 java实现生成缩略图

有时候我们为了让用户快速预览所有图片，在上传图片时同时生产缩略图。java可以使用Graphics2D绘制出缩略图。代码如下： package cn.slimsm

落日映苍穹つ/ 2022年08月07日 08:50/ 0 赞/ 255 阅读

相关 java生成缩略图

java生成缩略图工具类 package cn.itcast.estore.utils; import java.awt.Image; im

今天药忘吃喽~/ 2022年06月05日 05:12/ 0 赞/ 292 阅读

相关生成图片的缩略图

public static void main(String[] args) throws IOException { File input

阳光穿透心脏的1/2处/ 2022年04月22日 00:28/ 0 赞/ 324 阅读

相关 C#自动生成缩略图

源码：（aspx文件测试）注意文件路径源码： protected void Page\_Load(object sender, EventArgs e

小灰灰/ 2022年04月01日 15:11/ 0 赞/ 370 阅读

相关生成缩略图工具类

1、根据路径图片生成缩略图 / Description: 根据图片路径生成缩略图 @param imagePath

谁践踏了优雅/ 2022年03月31日 05:08/ 0 赞/ 357 阅读

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

pixi引擎是将图案都绘制到一个根canvas对象中，观察下面创建canvas对象的源码： var app = new PIXI.Application(800, 5

红太狼/ 2021年09月12日 07:14/ 0 赞/ 579 阅读

相关前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是

r囧r小猫/ 2021年09月12日 07:14/ 0 赞/ 1256 阅读

相关前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

一.鼠标交互事件概念鼠标事件交互是指用户通过操作鼠标所触发的事件。常用的交互事件主要有如点击、拖拽等。可以监听到的用户所触发的事件可以分为4类：左键触发，右键触发，触摸

分手后的思念是犯贱/ 2021年09月12日 05:34/ 0 赞/ 1923 阅读