ffmpeg 解码ts格式_在ts中理解和解码png格式示例

ffmpeg 解码ts格式

While working on a game project in TS, we found ourselves needing a PNG decoder to create our objects metadata from pictures in a generic way.

在TS中开发游戏项目时，我们发现自己需要PNG解码器以通用方式从图片创建对象元数据。

We are coding using TS/JS in the browser, so the obvious solution is to use Canvas, but that wouldn’t be fun wouldn't it? So I decided to lookup the PNG format to create a decoder that will fit our needs.

我们在浏览器中使用TS / JS进行编码，因此显而易见的解决方案是使用Canvas，但这不是很有趣吗？ 因此，我决定查找PNG格式以创建适合我们需求的解码器。

Other than the official documentation, which can be heavy to read at first, i didn’t find much examples of how to implement that quickly, so I decided to share my experience and I hope it will help some of you getting started 😊

除了起初阅读起来可能很繁琐的官方文档之外，我没有找到很多如何快速实施的示例，所以我决定分享自己的经验，希望对您有所帮助。

• Introduction

  介绍

• I. Read the file and extract the data

  I.读取文件并提取数据

• II. Understand PNG file’s format

  二。 了解PNG文件的格式

• III. Parsing the metadata we need

  三， 解析我们需要的元数据

• IV. Parsing the image content

  IV。 解析图像内容

In my project, I used a class Color to store the file’s pixel, but for our example, i’m going to output the results as an array of Uint8Array. Each array will store the information about one pixel (RGBA). Below is an example of the result we want implemented using canvas so you can see where we’re going. The index.html file is only there to have a visual representation of what we’re doing, it may seems useless for the first example (using canvas) but it will help us later.

在我的项目中，我使用了Color类来存储文件的像素，但是对于我们的示例，我将结果输出为Uint8Array数组。 每个阵列将存储有关一个像素(RGBA)的信息。 下面是我们要使用画布实现的结果的示例，以便您可以看到要进行的操作。 index.html文件只是在视觉上表示我们正在做的事情，对于第一个示例(使用画布)来说似乎没有用，但稍后会对我们有所帮助。

The code for the Canvas version is available here : https://github.com/achiev-open/png-decoder-intro/tree/1-canvas-example

Canvas版本的代码可在此处获取： https : //github.com/achiev-open/png-decoder-intro/tree/1-canvas-example

All of the usefull code is located in src/index.ts. This implementation isn’t the subject of our article so I won’t go into the details, however, note that the code simply loads the picture into a canvas, then uses the canvas API to extract the image data.

所有有用的代码都位于src / index.ts中 。 此实现不是本文的主题，因此我将不做详细介绍，但是请注意，代码只是将图片加载到画布中，然后使用canvas API提取图像数据。

Now that we’ve seen the easy way, let’s understand how it works by reinventing the wheel. The first start is obviously this kind of official documentation : https://www.w3.org/TR/PNG/ or http://www.libpng.org/pub/png/spec/

既然我们已经看到了简单的方法，那么让我们通过重新发明轮子来了解其工作原理。 显然，第一个起点就是这种官方文档： https : //www.w3.org/TR/PNG/或http://www.libpng.org/pub/png/spec/

But I get it, they can be confusing, there is a lot of content, with each section redirecting towards another, so let’s find out where to start !

但是我明白了，它们可能会造成混乱，其中包含很多内容，每个部分都重定向到另一个部分，所以让我们找出从哪里开始！

Today, we won’t recreate a fully functionnal PNG decoder : our goal here is to understand enough to be able to start. Let’s focus on one specific colour type ( True colour with alpha ) and ignore some metadata like interlacing or palette. Our decoder will only understand some PNG file.

今天，我们将不会重新创建功能齐全的PNG解码器：我们的目标是要足够了解才能开始。 让我们关注一种特定的颜色类型(带alpha的真彩色)，并忽略一些隔行扫描或调色板之类的元数据。 我们的解码器只会了解一些PNG文件。

If there is interest for that, we’ll see in another article how to implement the other elements. If you don’t understand all the terms used in the previous sentences, don’t worry, we will explain everything soon.

如果对此感兴趣，我们将在另一篇文章中看到如何实现其他元素。 如果您不理解前面句子中使用的所有术语，请放心，我们将尽快解释所有内容。

一，读取文件并提取数据 (I. Read the file and extract data)

We need data to work, so our first step will be to read the file content from a URL and turn it into an ArrayBuffer. We will try to keep the code simple to focus on the new concepts here.

我们需要数据才能工作，所以第一步将是从URL读取文件内容并将其转换为ArrayBuffer 。 我们将尝试使代码保持简单，以集中于此处的新概念。

Let’s edit our index file to load the picture from the assets :

让我们编辑索引文件以从资源加载图片：

(async function init() {
       const fileUri = "/assets/screen.png";const httpResponse = await fetch(fileUri);if (!httpResponse.ok) throw new Error(`${fileUri} not found`);const buffer: ArrayBuffer = await httpResponse.arrayBuffer();const bytes: Uint8Array = new Uint8Array(buffer); // File data to decode
})();

Let’s create a new class PngImage in src/png-image.ts. PngImage will take the Uint8Array as parameter, and will decode it.

让我们在src / png-image.ts中创建一个新的PngImage类。 PngImage将采用Uint8Array作为参数，并将对其进行解码。

export default class PngImage {
       public content: Array<Uint8Array> = [];constructor(bytes: Uint8Array) {
       
    }
}

When we are done, the content will contains our pixels definitions. Now we can call it in the index :

完成后，内容将包含我们的像素定义。 现在我们可以在索引中调用它：

const image = new PngImage(bytes);

You can find the code from this step here : https://github.com/achiev-open/png-decoder-intro/tree/2-read-file-content

您可以在此步骤中找到代码： <