Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Hiểu cách hoạt động của thuật toán thang độ xám JavaScript (không có jQuery)

In lại Tác giả: Taklimakan Thời gian cập nhật: 2023-11-03 03:48:17 hai mươi bốn 4
mua khóa gpt4 Nike

Hôm nay tôi đang tìm kiếm một thuật toán để chuyển đổi hình ảnh màu sang thang độ xám và không mất nhiều thời gian để tôi tìm thấy bài viết sau.

3 cách để chuyển hình ảnh trên web sang thang độ xám

Bài viết này chứa các đoạn mã sau

var imgObj = document.getElementById('js-image');

hàm màu xám(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');

    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for (var y = 0; y < imgPixels.height; y++) {
        for (var x = 0; x < imgPixels.width; x++) {
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = trung bình;
            imgPixels.data[i + 1] = trung bình;
            imgPixels.data[i + 2] = trung bình;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    trả về canvas.toDataURL();
}

imgObj.src = màu xám(imgObj);

Cũng trong bài viết nàyhttp://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.htmlĐề xuất thay thế trong các ý kiến:

for (var y = 0; y < imgPixels.height; y++) {
    for (var x = 0; x < imgPixels.width; x++) {
        var i = (y * 4) * imgPixels.width + x * 4;
        var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
        imgPixels.data[i] = trung bình;
        imgPixels.data[i + 1] = trung bình;
        imgPixels.data[i + 2] = trung bình;
    }
}

与:

for (var i = 0; i < imgPixels.data.length; i = i + 4) {
    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
    imgPixels.data[i] = trung bình;
    imgPixels.data[i + 1] = trung bình;
    imgPixels.data[i + 2] = trung bình;
}

Bản trình diễn trên JSFiddle https://jsfiddle.net/n6q9a2c9/

Và tôi có một số vấn đề với sự hiểu biết của mình về cách hoạt động của thuật toán này.

Trong mã này

for (var i = 0; i < imgPixels.data.length; i = i + 4) {
    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
    imgPixels.data[i] = trung bình;
    imgPixels.data[i + 1] = trung bình;
    imgPixels.data[i + 2] = trung bình;
}

tôi hiểu rồi var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3 là công thức (R + G + B)/3 Đây là phần làm tôi bối rối

for (var i = 0; i < imgPixels.data.length; i = i + 4) {

Tại sao chúng ta tăng thêm 4 ở đây?

Tôi sẽ biết ơn nếu bạn có thể trả lời cách hoạt động của thuật toán này.

câu trả lời hay nhất

Dữ liệu canvas được cung cấp cho bạn ở định dạng xen kẽ RGBA (đỏ, lục, lam và giá trị trong suốt được gọi là "alpha"). Mỗi kênh yêu cầu một byte cho mỗi pixel và bạn có bốn kênh, do đó, bốn giá trị cho mỗi pixel. Vì các kênh được xen kẽ nên bạn tăng từng pixel lên 4.

引用资料:

Về javascript - Để hiểu cách hoạt động của thuật toán thang độ xám JavaScript (không sử dụng jQuery), chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/39338608/

hai mươi bốn 4 0
Bài viết khuyến nghị: Làm rõ giới hạn trên và dưới trong việc sắp xếp kích thước mạng
Bài viết khuyến nghị: java - quyết định đa hình thời gian chạy
Bài viết khuyến nghị: java — Dấu vết ngăn xếp có khó điều hướng hơn khi sử dụng tham chiếu phương thức với lambdas không?
Bài viết khuyến nghị: Trả về các phần tử ngẫu nhiên theo trọng số, nâng cao
Taklimakan
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress