如何使用javascript更改画布上图像的窗口级别

How to change window level of an image on canvas using javascript

本文关键字：图像 窗口 javascript 何使用      更新时间：2023-10-09

我在画布上有一个图像或在画布上绘制的一组图像。我可以很好地绘制它们，但我想通过在画布上拖动鼠标来更改图像的窗口级别。我见过很多外部javascript api，但它们非常巨大，我不想将它们用于此目的。

这是我的JSFIDDLE，它基本上是在画布上绘制图像

这就是我的代码的样子

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}
// Specify the src to load the image
img.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample5_l.jpg";

我需要一些基本的JS或JQuery。如果你能用一个示例代码为我指明正确的方向，那就太好了。

提前谢谢。

如果您想使用JavaScript，请尝试以下操作：

<script>
var c = document.getElementById("drawingboard");
var ctx = c.getContext("2d");
var mouseDown = 0;
document.body.ontouchstart = function() { 
mouseDown+=1;
}
document.body.ontouchend = function() {
mouseDown-=1;
}
function draw(event){
ctx.color='gold';
ctx.fillStyle = "lime";
ctx.drawImage(img,event.clientX,event.clientY);}
</script>

这是我经过一些研究后得到的：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const rangeMin = level - window / 2;
const rangeMax = level + window / 2;
const totalSize = canvas.width * canvas.height;
for (let idx = 0; idx < totalSize; idx++) {
    if (imageData.data[idx] < rangeMin) {
        imageData.data[idx] = 0;
    } else if (imageData.data[idx] > rangeMax) {
        imageData.data[idx] = 255;
    }
}
ctx.putImageData(imageData, 0, 0);
相关文章：