27 اردیبهشت 1401
گاهی تصاویر و خصوصا رادیوگرافی (اشعه ایکس) نیاز به پیاده‌سازی افکت‌هایی دارند که به تشخیص بهتر پزشک کمک می‌کنند، مانند تغییر در روشنایی عکس، کنتراست، بزرگنمایی و دیگر موارد. هرچند غالبا نرم‌افزارهای تخصصی - هر کدام از دستگاه‌های مربوطه - دارای قابلیت‌های گسترده و متنوعی هستند، اما در محیط وب نیز می‌توان از این امکانات بهره برد تا پزشک از راه دور و با دسترسی به وب‌سایت نیز بتواند از این قابلیت‌ها استفاده نماید.
در اینجا رایج‌ترین این افکت‌ها را با ذکر مثال بررسی می‌کنیم؛ در بخش «دانلود» این مقاله نیز می‌توانید تمامی موارد گفته شده را در قالب یک پروژه کاربردی دریافت و در بخش «دمو» تمامی مثال‌ها را مشاهده نمایید.
همچنین به معرفی «تصحیح گاما» یا «Gamma Correction» می‌پردازم که در منابع نادری به پیاده‌سازی آن - در بستر وب - اشاره شده است و تابعی برای آن پیشنهاد می‌دهم.
1) روشنایی یا Brightness
2) کنتراست یا Contrast
3) نگاتیو یا Invert
4) چرخش یا Rotate
5) بزرگنمایی یا Zoom
6) تصحیح گاما یا Gamma Correction
در آغاز فرض کنید تصویری مانند زیر داریم:
<img id="img" src="'radio.jpg'" />
1) روشنایی یا Brightness: چنانچه تصویر بیش از اندازه روشن یا تیره باشد، مشخصه filter در CSS می‌تواند در این زمینه به ما کمک کند که در خطوط زیر به وسیله jQuery آن را اعمال می‌کنیم. >> دمو
<script>
var brightDefault = 100; //روشنایی پیش فرض
var amount = 20; //میزان تغییر روشنایی
brightDefault = brightDefault + amount;
$("#img").css('filter', 'brightness(' + brightDefault + '%)');
</script>
2) کنتراست یا Contrast: کنتراست به زبان ساده - از طریق تغییر میزان تفاوت عناصر تشکیل دهنده یک تصویر - روی وضوح تصویر ما تاثیر می‌گذارد. مانند بالا نیز مشخصه filter در CSS می‌تواند در این زمینه به ما کمک کند که در خطوط زیر به وسیله jQuery آن را اعمال می‌کنیم. >> دمو
<script>
var contrastDefault = 100; //کنتراست پیش فرض
var amount = 20; //میزان تغییر کنتراست
contrastDefault = contrastDefault + amount;
$("#img").css('filter', 'contrast(' + contrastDefault + '%)');
</script>
3) نگاتیو یا Invert: معکوس‌سازی رنگ‌های تصویر نیز از موارد پر کاربرد دیگر در مشاهده رادیوگرافی عکس‌هاست که توسط اعمال فیلتر invert ایجاد می‌شود. >> دمو
<script>
var invertDefault = 0; //مقدار پیش فرض
invertDefault = 100 - invertDefault;
$("#img").css('filter', 'invert(' + invertDefault + '%)');
</script>
4) چرخش یا Rotate: به کمک پارامترهای transform و rotate در css می‌توان به راحتی اقدام به چرخش تصویر براساس مولفه «درجه» کرد. >> دمو
<script>
var degDefault = 0; //درجه پیشفرض
var deg = 15; //میزان چرخش
degDefault += deg;
$("#img").css({'transform': 'rotate(' + degDefault + 'deg)'});
</script>
5) بزرگنمایی یا Zoom: برای بزرگنمایی تصاویر راه‌های گوناگونی وجود دارد که من در این مقاله از jquery.elevatezoom.js استفاده می کنم. در این شیوه با حرکت ماوس روی بخشی از تصویر، بزرگنمایی اتفاق می‌افتد. >> دمو
<script>
$("#img").elevateZoom({
tint:true,
tintColour:'#aaa',
tintOpacity:0.5,
zoomWindowWidth:200,
zoomWindowHeight:150,
borderColour: "#aaa"
});
</script>
6) تصحیح گاما یا Gamma Correction: تصحیح گاما به زبان ساده تغییراتی غیرخطی در میزان روشنایی تصویر است. به عنوان مثال اگر تصویری را به شیوه عادی روشن‌تر کنیم، تمامی قسمت‌های تاریک و روشن آن به یک نسبت تغییر می‌کنند حال آنکه گاهی مناسب است در یک تصویر، روشنایی قسمت‌های تیره بیشتر شود و یا برعکس. چراکه چشم انسان نیاز به مقدار خاصی از روشنایی دارد و در غیر اینصورت قادر به دیدنِ صحیح اجسام نیست. میزان استاندارد «تصحیح گاما» غالبا اعداد 1.8 یا 2.2 است
جهت تصحیح گاما همان طور که در توابع زیر خواهید دید، ابتدا پیکسل‌های تصویر را استخراج، سپس «گاما»ی آن را تصحیح و نهایتا در تصویر جایگذاری می‌کنیم. لطفا توجه کنید کدهای زیر روی «هاست» اجرا شوند. >> دمو
<html>
<head>
<meta charset="utf-8" />
<title>Gamma Correction</title>
</head>
<body>
<img id="img" src="radio.jpg" />
<canvas id="canvas"></canvas>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
var gammaCorrection = 1.8;
var img = document.getElementById("img");
var canvas = document.getElementById("canvas");
canvas.width = img.width;
canvas.height = img.height;
setTimeout(() => { //img.onload = function() {
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
for (y = 0; y < canvas.height; y++) {
for (x = 0; x < canvas.width; x++) {
var color = GetPixelColor(x, y, canvas.width);
var newRed = Math.pow((color.r / 255), gammaCorrection) * 255;
var newGreen = Math.pow((color.g / 255), gammaCorrection) * 255;
var newBlue = Math.pow((color.b / 255), gammaCorrection) * 255;
var color = {
r: newRed,
g: newGreen,
b: newBlue
}
SetPixelColor(x, y, color, canvas.width);
}
}
canvas.getContext('2d').putImageData(imageData, 0, 0);
}, 500);
});
function GetPixelColor(x, y, w) {
var index = parseInt(x + w * y) * 4;
var rgb = {
r: imageData.data[index + 0],
g: imageData.data[index + 1],
b: imageData.data[index + 2]
};
return rgb;
}
function SetPixelColor(x, y, color, w) {
var index = parseInt(x + w * y) * 4;
var dataOut = imageData.data;
dataOut[index + 0] = color.r;
dataOut[index + 1] = color.g;
dataOut[index + 2] = color.b;
}
</script>
</body>
</html>