ethanyu123 / imgdata-filter

imgdata-filter

Canvas 实现图片滤镜，效果参考的 https://github.com/picturepan2/instagram.css

Getting started

Installation

npm install imgdata-filter

Usage

Syntax

    import { filter1977 } from 'imgdata-filter';

    filter1977(canvas, context);

• canvas

  • Type: HTMLCanvasElement

• context

  • Type: CanvasRenderingContext2D

Example

    <!-- html -->
    <img id='image' src=''>

    <canvas id='1977'></canvas>

    // js
    import {
        filter1977,
        ...
    } from 'imgdata-filter';

    const origin = document.getElementById('image');
    const img = new Image();

    window.onload = () => {
        img.addEventListener('load', imgOnload, false);
        img.src = './image/instagram.jpg';
        origin.src = img.src;
    }

    const imgOnload = () => {
        const canvas = document.getElementById('canvas');
        canvas.width = origin.width;
        canvas.height = origin.height;

        const context = canvas.getContext('2d');
        context.drawImage(img,
            0,
            0,
            img.width,
            img.height,
            0,
            0,
            canvas.width,
            canvas.height
        );

        const imgData = filter1977(canvas, context);

        // ...
    }

Development

npm run dev