Tiểu Luận - Xử Lý Và Truyền Thông Đa Phương Tiện - Đề Tài - Web Chỉnh Sửa Ảnh

Tổng quan - Trang wed chỉnh sửa ảnh này được tạo ra để thay đổi các giá trị kênh màu , chỉnh độ sáng, độ tương phản, sắc độ ,... Do đó có thể thông qua thông số này để thay đổi các chỉ s

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

Đề tài : w b e chỉnh sửa ảnh

Hà Nội, 2022

BÁO CÁO

XỬ LÍ TRUYỀN THÔNG ĐA PHƯƠNG TIỆN

MỤC LỤC

PHẦN I: TỔNG QUAN 2

1 Tổng quan 2

2 Các thư viện tích hợp, trang wed tham khảo 2

PHẦN II: GIAO DIỆN W B E 2

1 Giao diện tổng quan 2

PHẦN III: CÁC TÍNH NĂNG 4

1 Kênh màu 4

2 Các thông số cơ bản 4

2.1 Brightness 4

2.2 Contrast 5

2.3 Exposure 6

2.4 Noise 6

2.5 Hue 7

2.6 Saturation 7

2.7 Gamma 8

2.8 Vibrance 9

*Tài liệu tham khảo : 10

PHẦN I: TỔNG QUAN

1 Tổng quan

- Trang wed chỉnh sửa ảnh này được tạo ra để thay đổi các giá trị kênh màu ,

chỉnh độ sáng, độ tương phản, sắc độ , của ảnh

2 Các thư viện tích hợp, trang w b e tham khảo

- Sử dụng thư viện Canvas được tích hợp sẵn trên HTML5

đồ họa các đối tượng hai chiều trên trang web Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác

color là phần mở rộng của giá trị màu RGB với thành phần bổ sung là chỉ

số opacity quy định độ mờ/độ trong suốt của màu sắc Do đó có thể thông qua thông số này để thay đổi các chỉ số như là độ sáng, độ tương phản, độ bão hoà của bức ảnh

- Sử dụng CamanJS là thư viện javascript cho phép thực hiện chỉnh sửa ảnh

bằng cách gọi duy nhất hàm Caman()

PHẦN II: GIAO DIỆN WED

1 Giao diện tổng quan

Ảnh 1 Giao diện khi chưa tải ảnh lên

Ảnh 2 Giao diện khi tải ảnh lên

- Giao diện này khá phổ biến với các phần mềm, trang wed chỉnh sửa ảnh hiện

nay với bảng chỉnh sửa ở giữa và các thông số cần chỉnh sửa ở hai bên của bảng

- Phần giữa sẽ là nơi để hiện thị bức ảnh cần chỉnh sửa.

- Phần bên trái bảng chỉnh sửa ảnh là bảng chỉnh sửa 3 thông số của kênh màu

RGB

- Phần bên trái là bảng chỉnh sửa các thông số brightness, constrast, exposure,

noise, hue, saturation, gamma, vibrance

- Phần dưới là nút upload ảnh từ thiết bị.

- Giao diện sử dụng màu tối, các thành phần như chữ và thanh kéo để màu sáng

để tăng độ tương phản và để tránh mỏi mắt khi sử dụng lâu

PHẦN III: CÁC TÍNH NĂNG

- Ở tính năng này, người dùng sẽ chỉnh sửa 3 thông số là red, green, blue, phạm

vi chỉnh sửa là từ -100 đến 100 Tương ứng sẽ tăng hoặc giảm giá trị r trong thông số rgb của từng pixel ảnh theo phầm trăm

 Ví dụ khi kéo lên 50 ở thanh red sẽ tăng tất cả giá trị red trong từng pixel ảnh thêm 50% khi đỏ ảnh sẽ hơi đỏ.

- Tương tự như ở 2 thông số còn lại sẽ tăng hoặc giảm các giá trị theo phần trăm

tưng ứng

2 Các thông số cơ bản

2.1 Brightness

- Chức năng này làm tăng hoặc giảm độ sáng cho ảnh, giá trị thay đổi trong

phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi độ sáng

Filter register ( "brightness" , function(adjust) { adjust= 255 * (adjust 100 );

return this process ( "brightness" , function(rgba) {

rgba.r +=adjust; rgba.g +=adjust; rgba.b +=adjust;

returnrgba; });

});

- Giá trị cần thay đổi là adjust 3 thông số r,g,b sẽ được cộng thêm với giá trị tương ứng

- Công thức cho từng giá trị r, g, b :

 x = x + ((adjust/100)*255)

2.2 Contrast

- Chức năng này làm tăng hoặc giảm độ tương phản cho ảnh, giá trị thay đổi

trong phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi độ tương phản

Filter register ( "contrast" , function(adjust) {

adjust= Math pow ((adjust+ 100 ) / 100 , 2 );

return this process ( "contrast" , function(rgba) {

rgba.r /= 255 ;

rgba.r -= 0.5 ;

rgba.r *=adjust;

rgba.r += 0.5 ;

rgba.r *= 255 ;

rgba.g /= 255 ;

rgba.g -= 0.5 ;

rgba.g *=adjust;

rgba.g += 0.5 ;

rgba.g *= 255 ;

rgba.b /= 255 ;

rgba.b -= 0.5 ;

rgba.b *=adjust;

rgba.b += 0.5 ;

rgba.b *= 255 ;

returnrgba;

});

});

- Công thức cho từng giá trị r, g, b :

 Giá trị thay đổi là adjust:

Adjust =( Adjust+100

100 )

2

255)−0,5)∗Adjust¿

2.3 Exposure

- Chức năng điều chỉnh độ sáng/tối của toàn bức ảnh, giá trị thay đổi trong

phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi exposure

Filter register ( "exposure" , function(adjust) {

var ctrl1, ctrl2, p;

p = Math abs (adjust) / 100 ;

ctrl1 = [ 0 255 * p];

ctrl2 = [ 255 ( 255 * p), 255 ];

if (adjust< 0 ) {

ctrl1 = ctrl1 reverse ();

ctrl2 = ctrl2 reverse ();

}

return this curves ( 'rgb' , [ 0 , ], ctrl1, ctrl2, [ 255 , 255 ]);

});

curves ở đây cũng hoạt động tương tự như ở các phần mềm chỉnh sửa khác như Photoshop, Lightroom,…

sẽ là (x1,y1) = (0, 255 * |adjust/100|) , toạ độ điểm thứ hai trên đồ thị sẽ là (x2,y2) = (255 – y1,255)

2.4 Noise

- Chức năng này làm tăng hoặc giảm độ nhiễu cho bức ảnh, giá trị thay đổi

trong phạm vi từ 0 đến 100, đơn vị là %

- Function thay đổi độ nhiễu

Filter register ( "noise" , function(adjust) {

adjust= Math abs (adjust) * 2.55 ;

return this process ( "noise" , function(rgba) {

var rand;

rand = Calculate randomRange (adjust* 1 adjust);

rgba.r += rand;

rgba.g += rand;

rgba.b += rand;

returnrgba;

});

});

Với mỗi pixel giá trị thay đổi sẽ được lấy ngẫu nhiên trong khoảng [

-(adjust*2,55) , (adjust*255) ] sau đó cộng thêm với từng kênh màu rgb

2.5 Hue

- Chức năng này làm tăng hoặc giảm sắc độ màu sắc cho toàn bức ảnh, giá trị

thay đổi trong phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi hue

Filter register ( "hue" , function(adjust) {

return this process ( "hue" , function(rgba) {

var b, g, h, hsv, r, _ref;

hsv = Convert rgbToHSV (rgba.r, rgba.g, rgba.b);

h = hsv.h * 100 ;

h += Math abs (adjust);

h = h % 100 ;

h /= 100 ;

hsv.h = h;

_ref = Convert hsvToRGB (hsv.h, hsv.s, hsv.v), r = _ref.r, g = _ref.g, b = _ref.b;

rgba.r = r;

rgba.g = g;

rgba.b = b;

returnrgba;

});

});

- Để thay đổi hue, tấm ảnh sẽ được chuyển đổi sang hệ màu HSV để điều

chỉnh , sau đó chuyển đổi lại về hệ màu RGB

2.6 Saturation

- Chức năng này làm tăng hoặc giảm độ bão hoà cho ảnh, giá trị thay đổi

trong phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi độ bão hoà

Filter register ( "saturation" , function(adjust) {

adjust*= 0.01 ;

return this process ( "saturation" , function(rgba) {

var max;

max = Math max (rgba.r, rgba.g, rgba.b);

if (rgba.r !== max) {

rgba.r += (max -rgba.r) *adjust;

}

if (rgba.g !== max) {

rgba.g += (max -rgba.g) *adjust;

}

if (rgba.b !== max) {

rgba.b += (max -rgba.b) *adjust;

}

returnrgba;

});

});

(max – giá trị ban đầu )*adjust

2.7 Gamma

- Chức năng này làm tăng hoặc giảm gamma cho ảnh, giá trị thay đổi trong

phạm vi từ -100 đến 100, đơn vị là %

- Function thay đổi gamma

Filter register ( "gamma" , function(adjust) {

return this process ( "gamma" , function(rgba) {

rgba.r = Math pow (rgba.r / 255 , adjust) * 255 ;

rgba.g = Math pow (rgba.g / 255 , adjust) * 255 ;

rgba.b = Math pow (rgba.b / 255 , adjust) * 255 ;

returnrgba;

});

});

- Giá trị Gamma sẽ được thay đổi theo công thức sau:

(¿ban đ u ầ /255) adjust∗255

2.8 Vibrance

- Chức năng này Tăng giảm độ rực rỡ màu bức ảnh cho đến giới hạn bão hòa

của ảnh, giá trị thay đổi trong phạm vi từ -100 đến 100, đơn vị là %

- Function

Filter register ( "vibrance" , function(adjust) {

adjust*= 1 ;

return this process ( "vibrance" , function(rgba) {

var amt, avg, max;

max = Math max (rgba.r, rgba.g, rgba.b);

avg = (rgba.r +rgba.g +rgba.b) / 3 ;

amt = ((Math abs (max - avg) * 2 255 ) *adjust) / 100 ;

if (rgba.r !== max) {

rgba.r += (max -rgba.r) * amt;

}

if (rgba.g !== max) {

rgba.g += (max - rgba.g) * amt;

}

if (rgba.b !== max) {

rgba.b += (max - rgba.b) * amt;

}

returnrgba;

});

});

- Công thức thay đổi vibrance:

được công thêm 1 giá trị bằng :

−¿ban đ u ầ

−avg max¿∗((¿max¿∗2/255)∗adjust )

¿

¿

*Tài liệu tham khảo :

CamanJs : CamanJS - Javascript Image Manipulation

Canvas : Canvas API - Web APIs | MDN (mozilla.org)

Source code : link

Wed demo: PTS (000webhostapp.com)