1.0.4 • Published 4 years ago
imgdata-filter v1.0.4
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
- Type:
context
- Type:
CanvasRenderingContext2D
- Type:
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