Git Product home page Git Product logo

apng-optimizer's Introduction

APNG-Optimizer

基于 WebAssembly 的 APNG 图片压缩工具。

底层基于 libimagequantAPNG Optimizer

运行 demo

npm run demo

demo

如何使用

在开始使用前,我们需要配置我们的打包工具(如 webpack)来支持加载 WebAssembly:

module.exports = {
    module: {
        rules: [{
            test: /\.wasm$/,
            use: [{
                loader: 'file-loader'
            }]
        }]
    }
}
import { APNGOptimizer } from 'apng-optimizer';
import assemblyPath from 'apng-optimizer/dist/apng-optimizer.wasm';

APNGOptimizer.createOptimizer(assemblyPath)
    .then(optimizer => {
        // ... load your apng image as buffer
        const uint8Array = new Uint8Array(buffer);
        const optAPNGArray = optimizer.optAPNG(uint8Array, {

            minQuality: 0,
            maxQuality: 100,
            processCallback: function(progerss) {
                console.log(progress); // 0.1231111
            }
        });
        const blob = new Blob([optAPNGArray.buffer], { type: 'image/png' });
        const url = URL.createObjectURL(blob);
        img.src = url;
    });

API

APNGOptimizer.createOptimizer(modulePath: string): Promise

通过加载 modulePath 路径上的 WebAssembly 来创建一个新的压缩器实例

APNGOptimizer.#optAPNG(apngBuffer: Uint8Array, options?: OptimizerOptions): Uint8Array

压缩 apng 图片

  • apngBuffer: apng 图像文件的 buffer 数据
  • options: 优化配置
    • deflateMethod(number): 选择压缩算法 0: zlib, 1: 7zip, 2: zopfli,默认为 1
    • iter(number): 使用压缩算法的迭代次数,默认为 15
    • minQuality(number): 使用 imagequant 进行色板取色的最小质量,默认为 0
    • maxQuality(number): 使用 imagequant 进行色斑取色的最大质量,默认为 100
    • disabledQuant(boolean): 禁用 imagequant,禁用后 minQualitymaxQuality 将会无效
    • processCallback((progress: number) => void): 压缩进度回调,progress 为当前压缩进度( 0 ~ 1)

apng-optimizer's People

Contributors

mljsgto222 avatar

Stargazers

 avatar  avatar Ger Hobbelt avatar baituo avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.