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

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÁO CÁO XỬ LÍ TRUYỀN THƠNG ĐA PHƯƠNG TIỆN Đề tài : web chỉnh sửa ảnh Hà Nội, 2022 MỤC LỤC PHẦN I: TỔNG QUAN Tổng quan 2 Các thư viện tích hợp, trang wed tham khảo PHẦN II: GIAO DIỆN WEB Giao diện tổng quan PHẦN III: CÁC TÍNH NĂNG Kênh màu Các thông số 2.1 Brightness 2.2 Contrast 2.3 Exposure 2.4 Noise 2.5 Hue 2.6 Saturation 2.7 Gamma 2.8 Vibrance *Tài liệu tham khảo : 10 PHẦN I: TỔNG QUAN Tổng quan - Trang wed chỉnh sửa ảnh tạo để thay đổi giá trị kênh màu , chỉnh độ sáng, độ tương phản, sắc độ , ảnh Các thư viện tích hợp, trang web tham khảo - Sử dụng thư viện Canvas tích hợp sẵn HTML5  Canvas phần tử HTML5, cho phép thực lập trình kết xuất đồ họa đối tượng hai chiều trang web Canvas chiếm khu vực trang web với chiều rộng chiều cao định trước Sau sử dụng Javascript truy cập vào khu vực để vẽ thông qua tập hàm đồ họa tương tự API 2D khác  Có thể thao tác đến pixel, không gian màu ảnh, cụ thể RGBA color phần mở rộng giá trị màu RGB với thành phần bổ sung số opacity quy định độ mờ/độ suốt màu sắc Do thơng qua thơng số để thay đổi số độ sáng, độ tương phản, độ bão hoà ảnh - Sử dụng CamanJS thư viện javascript cho phép thực chỉnh sửa ảnh cách gọi hàm Caman() PHẦN II: GIAO DIỆN WED Giao diện tổng quan Ảnh Giao diện chưa tải ảnh lên Ảnh Giao diện tải ảnh lên - - Giao diện phổ biến với phần mềm, trang wed chỉnh sửa ảnh với bảng chỉnh sửa thông số cần chỉnh sửa hai bên bảng Phần nơi để thị ảnh cần chỉnh sửa Phần bên trái bảng chỉnh sửa ảnh bảng chỉnh sửa thông số kênh màu RGB Phần bên trái bảng chỉnh sửa thông số brightness, constrast, exposure, noise, hue, saturation, gamma, vibrance Phần nút upload ảnh từ thiết bị Giao diện sử dụng màu tối, thành phần chữ kéo để màu sáng để tăng độ tương phản để tránh mỏi mắt sử dụng lâu PHẦN III: CÁC TÍNH NĂNG Kênh màu - Ở tính này, người dùng chỉnh sửa thông số red, green, blue, phạm vi chỉnh sửa từ -100 đến 100 Tương ứng tăng giảm giá trị r thông số rgb pixel ảnh theo phầm trăm  Ví dụ kéo lên 50 red tăng tất giá trị red pixel ảnh thêm 50% đỏ ảnh đỏ - Tương tự thông số lại tăng giảm giá trị theo phần trăm tưng ứng 2.1 Các thông số Brightness - Chức làm tăng giảm độ sáng cho ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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; return rgba; }); }); - Giá trị cần thay đổi adjust thông số r,g,b cộng thêm với giá trị tương ứng Công thức cho giá trị r, g, b :  x = x + ((adjust/100)*255) 2.2 Contrast - Chức làm tăng giảm độ tương phản cho ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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; return rgba; }); }); - Công thức cho giá trị r, g, b :  Giá trị thay đổi adjust: Adjust+100 ) 100 x x=( −0,5)∗Adjust ¿ 255 Adjust =(  2.3 ( ) Exposure - Chức điều chỉnh độ sáng/tối toàn ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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, 0], ctrl1, ctrl2, [255, 255]); }); - - - 2.4 Để thay đổi giá trị Exposure ta thay đổi dựa đồ thị curves, đồ thị curves hoạt động tương tự phần mềm chỉnh sửa khác Photoshop, Lightroom,… điểm đầu cuối đồ thị mặc định có toạ độ (0,0) (255,255) Khi tăng giá trị ( tức adjust > ) toạ độ điểm thứ đồ thị curves (x1,y1) = (0, 255 * |adjust/100|) , toạ độ điểm thứ hai đồ thị (x2,y2) = (255 – y1,255) Khi giảm giá trị (tức adjust < ) ta cần đảo x,y toạ độ Noise - Chức làm tăng giảm độ nhiễu cho ảnh, giá trị thay đổi phạm vi từ đến 100, đơn vị % - 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; return rgba; }); }); - Với pixel giá trị thay đổi lấy ngẫu nhiên khoảng [ (adjust*2,55) , (adjust*255) ] sau cộng thêm với kênh màu rgb 2.5 Hue - Chức làm tăng giảm sắc độ màu sắc cho toàn ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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; return rgba; }); }); - Để thay đổi hue, ảnh chuyển đổi sang hệ màu HSV để điều chỉnh , sau chuyển đổi lại hệ màu RGB 2.6 Saturation - Chức làm tăng giảm độ bão hoà cho ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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; } return rgba; }); }); - Cơng thức thay đổi độ bão hồ:  Max giá trị lớn giá trị r,g,b pixel  Giá trị adjust ban đầu nhân với -0,01  Với giá trị r,g,b khơng phải max cộng thêm giá trị = (max – giá trị ban đầu )*adjust 2.7 Gamma - Chức làm tăng giảm gamma cho ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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; return rgba; }); }); - Giá trị Gamma thay đổi theo công thức sau:  Với giá trị r,g,b pixel : (¿ ban đầu /255)adjust ∗255 2.8 Vibrance - Chức Tăng giảm độ rực rỡ màu ảnh giới hạn bão hòa ảnh, giá trị thay đổi phạm vi từ -100 đến 100, đơn vị % - 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) * / 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; } return rgba; }); }); - Công thức thay đổi vibrance:  Max giá trị lớn giá trị r,g,b pixel  Avg giá trị trung bình giá trị r,g,b pixel  Nếu giá trị lớn kênh màu, kênh màu công thêm giá trị : −¿ 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) 10