Day 178/200 Fabric.js 实现图片对比度控制

（一）需求

在标注图片时，需要控制对于同一图片的对比度，所以需要实现对于图片对比度的控制。

接下来是需求澄清

1、正常图片

2、对比度对比度设置为0.25时

3、对比度设置为-0.5时

（二）说明

定义说明

图像对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，即指一幅图像灰度反差的大小。差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。

差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。但对比率遭受和亮度相同的困境，现今尚无一套有效又公正的标准来衡量对比率，所以最好的辨识方式还是依靠使用者眼睛。

（三）代码

1、需要安装Fabric

npm install fabric --save

2、代码

import React from 'react';
import { fabric } from "fabric";
class Fabric extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){
        const canvas = new fabric.Canvas('canvas');
        console.log('canvas',canvas);
        // 图片
        const imgEl = document.createElement('img')
        imgEl.crossOrigin = 'Anonymous' // 让图片能让所有人存取
        imgEl.src = 'https://2.bp.blogspot.com/-H3JXh2cIKHs/WuwLvnz19cI/AAAAAAAAMXs/-qySdr5zEcc-kcLC4arf5m5H3F_trN7sgCK4BGAYYCw/s1600/kristopher-roller-110203-unsplash-m.jpg'
        imgEl.onload = () => {
            const image = new fabric.Image(imgEl, {
                scaleX: 0.5,
                scaleY: 0.5,
                angle: 0,
                // angle: 15,
                top: 0,
                left: 0
            })
            // 将 filters 实例 push 进 filters 里头
            image.filters.push(new fabric.Image.filters.Contrast({contrast: 0.2}))
            // 这边需要重整所有的滤镜效果
            image.applyFilters()
            canvas.add(image)
        }
    };
    render() {
        return <div>
            <h1>Learn, {this.props.name}</h1>
            <canvas id="canvas" width="666" height="600"></canvas>
        </div>;
    }
}
export default Fabric;

参考链接

https://github.com/fabricjs/fabric.js