关于图片处理:Day-15100-Fabricjs-实现图片对比度控制

（一）需要

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

接下来是需要廓清

失常图片

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

2、对比度设置为 0.5 时

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/f…