Table of Contents
What is APNG?
Before we get into the details of the instrument, let ’ s discover what APNG is. APNG ( Animated Portable Network Graphics ) is a specification for animize double, consisting of images each numbered with a sequence number. LINE animation stickers use APNG. Unlike GIF, APNG supports wide discolor, alpha channel and has a high compression rate. APNG is compatible with PNG, and is displayed as a even image for image viewers that do not support APNG. If you have the justly cock, you can convert a sequence of PNG files into an APNG file .
Animation sticker checker
LINE liveliness stickers must satisfy the set criteria. If you are concerned, check out the Creation Guidelines on the LINE Creators Market for more guide.
-
Resolution
- Width: 320px or less
- Height: 270px or less
- Either the width or the height shall be greater than 270px
- Playback time: Maximum four seconds per sticker
- Number of frames: 5–20 frames
- Color mode: RGB
- File size: 300KB or less per file
The Animation Sticker Checker * is a supplementary joyride for you to check if your spine satisfies the criteria, and is for home use entirely. here, you can see a glimpse of the checker. I ’ ve hidden the actual images of the spine for this position. The actual checker would be showing the actual images composing a gummed label .
Simply drag the folder containing the animation dagger into the checker, then the images will be loaded recursively, and the picture information–resolution, size, color mode–will be displayed on the blind for you. If there is something ill-timed with the dagger, an error message will be displayed. To support both Mac and Windows, I ’ ve choose to implement the tool as an SPA ( Single Page Application ) to run on network browsers .
Playing APNG on web browsers
To make APNG-compatible world wide web browsers to automatically play your APNG file, just specify the src property of an
Getting the basic information of APNG files
To determine whether an animation dagger has been made according to the criteria, we first need to get the data of the images in the dagger. Let ’ s beginning with image resolution. Image resolution can be obtained with the trace code, which is a coarse way used in obtaining image resolution. however, file ’ south size or its color type can not be. We need to write extra code to acquire these .
var img = $("![]()
", {
alt: foldername + "/" + filename
});
img.bind('load', function() {
const dom = img.get(0);
const width = dom.naturalWidth;
const height = dom.naturalHeight;
}
img.attr({ src: e.target.result });
Getting more information with File API
so, how can we obtain information other than the solution of an APNG file ? We will use the File API, one of the useful Web APIs, which enables you to load local files onto a web browser, using JavaScript. In early words, we can see and analyze local images on our world wide web browsers, without uploading them on a server. Let ’ s look into the details .
FileReader, File, FileList
deoxyadenosine monophosphate long as you have an element in your HTML code, you can use the File API. As shown below, if you add the directory attributes in the element, you will be able to select file directories with your web app. note that this hasn ’ thymine become a standard yet, so it works on entirely a few world wide web browsers, like Chrome .
once a user selects a directory containing the image to check, a FileList object is passed to the event animal trainer. We run a loop, retrieving a File object from the tilt and analyzing the object using the FileReader interface, at each flex. The File object inherits from the Blob object, enabling us to retrieve file name, charge size and MIME type. With the information retrieved, we can narrow down the setting for a world wide web browser to procedure. Look at the code below, the code obtains the file size of each image in the list .
handleDirectorySelected(e) {
Array.from(e.target.files).forEach((file, index, array) => {
const fileSize = file.size;
// If required, narrow down the scope of elements to load,
// using information such as file name or MIME type.
const reader = new FileReader();
reader.onload = (e) => { /* some process */ }
reader.readAsArrayBuffer(file);
});
}
Reading a file with ArrayBuffer & DataView
You can specify the type of an image file read by the FileReader interface as to text or Data URI. however, our checker uses the ArrayBuffer type, commodious for binary analysis. ArrayBuffer is used to contain binary star with fasten size, and you can not directly access or manipulate the data in it. So that ’ mho why DataView comes into the picture ; we read the data in the buffer with DataView and do something about it .
const fileReader = new FileReader();
fileReader.onload = function(e) {
const arrayBuffer = e.target.result;
const dataView = new DataView(arrayBuffer, 0);
// Read the file with DataView
}
fileReader.readAsDataURL(file);
Displaying the image in ArrayBuffer
To display dagger images on our checker, we need to display on a vane browser the prototype binary contained in the ArrayBuffer. We can do so by converting the binary star into a Data URI in a common way as shown below.
img.attr({ src: `data:image/png;base64,${btoa(Array.from(new Uint8Array(this.arrayBuffer), e => String.fromCharCode(e)).join(''))}` });
Using the structures of PNG & APNG for reading image information
PNG is specified by ISO/IEC 15948:2003, and you can access the specification from portable net Graphics ( PNG ) Specification ( Second Edition ). A PNG binary starts with a 8-byte retentive string, 89 50 4E 47 0D 0A 1A 0A, followed by data blocks called chunks. There are many types of chunks to contain certain type of data. For exercise, the IHDR chunk contains the image type and color type, and the IDAT lump contains the actual effigy data .
| Chunk Name | Chunk size (Bytes) |
|---|---|
| PNG signature | 8 |
| IHDR chunk | 25 |
| … | … |
| IDAT chunk | Dynamic |
| … | … |
| IEND chunk | 12 |
Each collocate is structured as defined below. If the value of the “ collocate size ” field is 0, then the “ ball data ” field will not be present .
| Chunk field | Chunk field size (Bytes) |
|---|---|
| Chunk size | 4 |
| Chunk type | 4 |
| Chunk data | Identical to the value of the “Chunk size” field. |
| CRC | 4 |
The following code will consecutive read the chunks of an effigy file, leaving you an array of chunks. The value of “ collocate type ” field—mentioned in the table above—is defined lone with the ISO 646 characters, as specified in Chunk layout, and is saved as a chain. For your information, the readChunk() method called reads a given lump from the given position .
getChunks() {
const chunks = [];
let chunk = { size: 0, type: '', crc: 0, dataOffset: 0x00, endOffset: 0x00 };
while (chunk.type !== 'IEND') {
chunk = this.readChunk(chunk.endOffset);
chunks.push(chunk);
}
return chunks;
}
Finding the color type with IHDR chunk
once you acquire an array of chunks, you can start off getting data you need by analyzing each chunk. Let ’ s see the IHDR collocate as an model to get an effigy ’ s semblance type. As you can see from the structure of the IHDR collocate below, you can get the visualize ’ s color modality using the color type field .
| Chunk field | Chunk field size (Bytes) |
|---|---|
| Width | 4 |
| Height | 4 |
| Bit depth | 1 |
| Color type | 1 |
| Compression method | 1 |
| Filter method | 1 |
| Interlace method | 1 |
Let ’ s grab the IHDR lump from the chunk array we obtained from the previous step .
const ihdrChunk = chunks.find(function(chunk) {
return chunk.type === 'IHDR'
})
nowadays, we read in the lump information. The information read by the following code is the fields of the IHDR lump we just looked at. To see more information on the specification of the color type, please check mesa 11.1 of the PNG specification. With the code below, we can check whether the color manner of a poser trope is RGB or not .
const offset = ihdrChunk.dataOffset;
return {
width: dataView.getUint32(offset),
height: dataView.getUint32(offset + 4),
bitDepth: dataView.getUint8(offset + 8),
colorType: dataView.getUint8(offset + 9),
compression: dataView.getUint8(offset + 10),
filter: dataView.getUint8(offset + 11),
interlace: dataView.getUint8(offset + 12),
crc: dataView.getUint32(offset + 13),
};
APNG Extension
APNG is an extension of PNG, with extra chunks like ‘ fcTL ’, ‘ fdAT ’, and ‘ acTL ’. There is lone a individual ‘ acTL ’ ball, and it contains information such as the number of frames and the numeral of times to play the liveliness. There can be multiple ‘ fcTL ’ chunks and ‘ fdAT ’ chunks for information such as time to display a frame, associated image data and expose location. I am not going to go through the details of it, but will leave it to you to read the documentation on Animated PNG graphics by Mozilla .
Playing images with sequence number
Some of you may know that we can use the element to play a series of PNG images with a sequence number. however, our checker simply uses the
We’ve deliberately hidden the actual images just for this post.
Closing notes
I chiefly use swift when I code, so I find it easier to make tools for Mac. A nice option for creating cross-platform tools can be Electron, but if you make a web-based tool then you can make it run not only on Mac or Windows but on io and Android vitamin a well. besides, if you need to update your cock due to diverse reasons such as fixing bugs, you don ’ t have to ask your users to download and install the update. rather, you simply update the files on a server, and you are done .
With HTML5, there are then many features you can make to run on network browsers. Hope you could take the advantage of those amazing features for your projects excessively .
* In Japan, stickers are called stamps. The original name for the tool introduced on this post is, Animation Stamp Checker .
