canvas 实现图片黑白功能

最新推荐文章于 2024-05-29 16:07:06 发布

远方多谎言

最新推荐文章于 2024-05-29 16:07:06 发布

阅读量392

点赞数

文章标签：前端 javascript canva可画

本文链接：https://blog.csdn.net/DejaVus/article/details/132037488

版权

原生 js 实现 canvas 图片转黑白功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑白功能</title>
</head>
<body>

    <!-- 上传 -->
    <div style="display: flex;">
        <canvas id="oldCanvas" width="842" height="595"></canvas>
        <span style="margin:50px 10px;"><- 原图</span>
        <span  style="margin: 50px 10px;">改变后的图 -></span>
        <canvas id="nowCanvas" width="842" height="595"></canvas>
    </div>
    <div style="margin-top: 10px;">
        <input id="img-input" type="file" accept="image/*" onchange="onImageUpload()" />
        <button onclick="balckAndWhite()">黑白功能</button>
        <button onclick="saveImage()">保存图片</button>
    </div>
</body>

<script>
    let imgInput = document.querySelector('#img-input');
    let oldcanvas = document.getElementById('oldCanvas');
    let oldcontext = oldcanvas.getContext('2d');
    let nowcanvas = document.getElementById('nowCanvas');
    let nowcontext = nowcanvas.getContext('2d');
    let drawName = '';
    var image = new Image();

    // 获取上传文件 并展示
    function onImageUpload() {
        const file = imgInput.files[0];
        image.src = '';
        drawName = file ? file.name : '';
        let reader = new FileReader();
        //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
        file && reader.readAsDataURL(file); 
        reader.onload = function (e) { // 文件读取完成时触发             
            let result = e.target.result // base64格式图片地址 
            image.src = result // 设置image的地址为base64的地址             
            image.onload = function () {
                // oldcanvas.width = image.width; // 设置canvas的画布宽度为图片宽度                 
                // oldcanvas.height = image.height;
                
                // 在canvas上绘制图片
                oldcontext.drawImage(image, 0, 0, oldcanvas.width, oldcanvas.height) 
            }
        }
    }


    // 黑白功能
    function balckAndWhite() {
        //获取ImageData的属性：width，height，data（包含 R G B A 四个值）； 
        var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
        for (var i = 0; i < imgdata.data.length; i += 4) {
            //计算获取单位元素的RBG然后取平均值 
            var avg = (imgdata.data[i] + imgdata.data[i + 1] + imgdata.data[i + 2]) / 3;
            imgdata.data[i] = avg;
            imgdata.data[i + 1] = avg;
            imgdata.data[i + 2] = avg;
        }
        nowcontext.putImageData(imgdata, 0, 0);
    }
    // 保存
    function saveImage() {
        // 将canvas中的内容转换为png图片
        const img = nowcanvas.toDataURL("image/png");
        const link = document.createElement('a');
        if(drawName.indexOf('.jpg') > -1){
            drawName = drawName.replace('.jpg','.png')
        }
        link.download = drawName;
        link.href = img;
        document.body.appendChild(link);
        link.click(); // 触发点击事件，下载图片
        document.body.removeChild(link);
    }
</script>

<style>
    canvas{ 
      border: 1px solid;
    } 
    body{
        background-color: #CCC;
    }
</style>
</html>