个人中心
gpt4 book ai didi

jquery - HTML5 Canvas 亮度控制

转载 作者：行者123 更新时间：2023-12-01 02:40:20 24 4
gpt4 key购买 nike

我想实现一个 slider 控件来改变图像的亮度，很像此链接中显示的控件，但通过 HTML5 Canvas 实现:

http://camanjs.com/examples/

我想通过使用 html 上的输入 slider 并在 JavaScript 上定义来控制图像的亮度。

知道如何使用 JavaScript 更改该图像的亮度吗？

// Dispatch a change event to file input element.
$(document).ready(function() {
    $('#imgfile').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;

        if (!file.type.match(imageType))
            return;
// Get the uploaded file from the event handler and get a data URL by using the FileReader object.
        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);
    });

// Use some jQuery to trigger click on canvas to input
    $('#canvas').on('click', function() {
        $('#imgfile').trigger('click');
        //show the slider after click to choose the image
        $('#slider').show();
    });


// Make an img element with the data URL and draw it on the canvas.
    function fileOnload(e) {
      //Like this in javascript make an image
     // img = new Image();
     //img.onload = imageLoaded;
        var $img = $('<img>', { src: e.target.result });
        $img.load(function() {
            var canvas = $('#canvas')[0];
            var context = canvas.getContext('2d');
            context.drawImage(this, 0, 0, canvas.width, canvas.height );
        });
    }



    var slider = $('#slider').change(function(){
        console.log(this.value);
    })
});
body {
  text-align: center;
  width: 100%;

}

canvas {
  border: 1px solid black;
  margin: 50px auto;
}

.container {
  margin: 0 auto;
}

@media(max-width:1200px) {
  .container {
  margin: 0 50px;
  }
  #canvas {
  width: 100%;
  height: auto;
 }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
  <script src="js/jquery.js" charset="utf-8"></script>
  <script src="js/main.js" charset="utf-8"></script>
  <title>Brightness-Adjustment</title>
</head>
<body>
<div class="container">
  <canvas id="canvas" width="600" height="384">
    <!-- <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="150" height="150" alt=""/> -->
  </canvas>

    <form action='#' onsubmit="return false;">
      <input type='file' id='imgfile' style="display: none;"/>
      <input id="slider" type="range" min="-1" max="1" step="0.05" value="0" style="display: none;">
    </form>

</div>


</body>
</html>

最佳答案

实时亮度控制。

那个演示非常非常老，速度慢，而且完全过时了。如今，有多种方法可以实现实时图像过滤器，并且不限于同一域和 CORS 安全图像。

有关 Canvas 的所有信息，请访问 MDN CanvasRenderingContext2D

ctx.filter 属性

简单的解决方案是使用 Canvas 过滤器属性并将亮度设置为您想要的值。绘制图像。

ctx.filter = "brightness(150%)";
ctx.drawImage(image,0,0);

如下例所示。

(请注意，SVG 亮度与亮度滤镜不同，但这是它们对亮度含义的解释)

const imageUrl = "https://en.wikipedia.org/wiki/Carl_Friedrich_Gauss#/media/File:Carl_Friedrich_Gauss_1840_by_Jensen.jpg";
const ctx = canvas.getContext("2d");

ctx.fillText("Please wait loading image..",20,20);
const image = new Image;
image.src = imageUrl;
image.onload = () => {
  canvas.width = image.width;
  canvas.height = image.height;     
  ctx.drawImage(image, 0, 0);
  slider.addEventListener("mousemove", () => {
    if (slider.value !== slideOldVal) {
      setBrightness(Number(slider.value));
    }
    val.textContent = slider.value;
    slideOldVal = Number(slider.value);
  });
}

function setBrightness(value) {
  ctx.filter = `brightness(${value + 100}%)`;
  ctx.drawImage(image, 0, 0);
}

var slideOldVal;
canvas {
  border: 2px solid black;
}
Brightness<input id="slider" type="range" min="-100" max="400" value="0" step="1"></input><span id="val"></span><br>
<canvas id="canvas"></canvas>

ctx.globalCompositeOperation 属性

有点复杂，但有更多支持(好吧，IE11 停留在 2014 年，所以只要我们迎合懒惰的客户，我们都停留在 2014 年)

要提亮，请使用复合操作“变亮”并在图像上绘制浅色填充以设置亮度。该效果会降低对比度，因此我喜欢通过使用减亮滤镜在顶部绘制图像一次来提高图像对比度。

 ctx.drawImage(image,0,0);
 ctx.globalCompositeOperation = "lighten";
 ctx.drawImage(image,0,0);  // draw image to bump up the contrast
 ctx.globalAlpha = amount; // 0-1
 ctx.fillStyle = "white";
 ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

要降低亮度，请使用补偿模式“乘法”，然后使用 Alpha 控制数量在图像上绘制黑色。

示例展示了如何操作。

const imageUrl = "http://camanjs.com/images/example1_600.jpg";
const ctx = canvas.getContext("2d");
ctx.fillText("Please wait loading image..",20,20);
const image = new Image;
image.src = imageUrl;
image.onload = () => {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  slider.addEventListener("mousemove", () => {
    if (slider.value !== slideOldVal) {
      setBrightness(Number(slider.value));
    }
    val.textContent = slider.value;
    slideOldVal = Number(slider.value);
  });
}
ctx.drawImage(image, 0, 0);
ctx.globalCompositeOperation = "lighten";
ctx.fillStyle = "white";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

function setBrightness(value) {
  ctx.drawImage(image, 0, 0);
  ctx.save();
  if (value < 0) {
    ctx.globalCompositeOperation = "multiply";
    ctx.fillStyle = "black";
    ctx.globalAlpha = -value / 100;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

  } else if (value > 0) {
    ctx.fillStyle = "white";
    ctx.globalCompositeOperation = "lighten";
    ctx.globalAlpha = 1;
    ctx.drawImage(image, 0, 0);
    ctx.globalAlpha = value / 100;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

  }
  ctx.restore();
}

var slideOldVal;
canvas {
  border: 2px solid black;
}
Brightness<input id="slider" type="range" min="-100" max="100" value="0" step="1"></input><span id="val"></span><br>
<canvas id="canvas"></canvas>

注意示例中使用的图像来自OP的链接，仅供比较

关于jquery - HTML5 Canvas 亮度控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47118229/

24 4 0
文章推荐： emacs - 修改缓冲区焦点控制(pop-to-buffer vs display-buffer)
文章推荐： jquery - ChartJS 2.7.0 更新并导出为 png
文章推荐： regex - 如何构建一个关注出现次数但不关注出现位置的正则表达式？
文章推荐： Python:Scipy:强力优化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com