{"id":3099,"date":"2022-05-27T00:00:18","date_gmt":"2022-05-26T21:00:18","guid":{"rendered":"https:\/\/demensdeum.com\/blog\/?p=3099"},"modified":"2024-12-16T22:32:20","modified_gmt":"2024-12-16T19:32:20","slug":"rgb-image-to-grayscale","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/de\/2022\/05\/27\/rgb-image-to-grayscale\/","title":{"rendered":"RGB-Bild zu Grau"},"content":{"rendered":"

In diesem Beitrag beschreibe ich den Algorithmus zum Konvertieren eines RGB-Puffers in Grau (Graustufen).
Und das geht ganz einfach: Jeder Pixel-Farbkanal des Puffers wird nach einer bestimmten Formel konvertiert und die Ausgabe ist ein Graubild.
Durchschnittsmethode:<\/p>\n

\n
red = average;\ngreen = average;\nblue = average;<\/code><\/pre>\n
\u0421\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c 3 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043a\u0430\u043d\u0430\u043b\u0430 \u0438 \u0434\u0435\u043b\u0438\u043c \u043d\u0430 3.<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 \u2013 \u043c\u0435\u0442\u043e\u0434 \u0441\u0440\u0435\u0434\u043d\u0435\u0432\u0437\u0432\u0435\u0448\u0435\u043d\u043d\u044b\u0439, \u043e\u043d \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430:<\/p>\n
\n
red = luminance;\ngreen = luminance;\nblue = luminance;<\/code><\/pre>\n
\"\"<\/p>\n
\"\"<\/p>\n
\u041a\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c? \u0414\u0430 \u043a\u0430\u043a\u043e\u0439 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u0414\u0430\u043b\u0435\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0435\u0442\u043a\u0438:<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 JavaScript + HTML 5<\/p>\n
\n
    image,\n    canvas,\n    weightedAverage\n) {\n    const context = canvas.getContext('2d');\n\n    const imageWeight = image.width;\n    const imageHeight = image.height;\n\n    canvas.width = imageWeight;\n    canvas.height = imageHeight;\n\n    context.drawImage(image, 0, 0);\n\n    let pixels = context\n        .getImageData(\n            0,\n            0,\n            imageWeight,\n            imageHeight\n        );\n\n    for (let y = 0; y & lt; pixels.height; y++) {\n        for (let x = 0; x & lt; pixels.width; x++) {\n            const i = (y * 4) * pixels.width + x * 4;\n\n            let red = pixels.data[i];\n            let green = pixels.data[i + 1];\n            let blue = pixels.data[i + 2]\n\n            const average = (red + green + blue) \/ 3;\n            const luminance = 0.2126 * red +\n                0.7152 * green +\n                0.0722 * blue;\n\n            red = weightedAverage ? luminance : average;\n            green = weightedAverage ? luminance : average;\n            blue = weightedAverage ? luminance : average;\n\n            pixels.data[i] = red;\n            pixels.data[i + 1] = green;\n            pixels.data[i + 2] = blue;\n        }\n    }\n    context\n        .putImageData(\n            pixels,\n            0,\n            0,\n            0,\n            0,\n            pixels.width,\n            pixels.height\n        );\n}<\/code><\/pre>\n
\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/h3>\n
https:\/\/www.baeldung.com\/cs\/convert-rgb-to-grayscale<\/a>
\nhttps:\/\/twitter.com\/mudasobwa\/status\/1528046455587495940<\/a>
\nhttps:\/\/rosettacode.org\/wiki\/Grayscale_image<\/a><\/p>\n
\u0421\u0441\u044b\u043b\u043a\u0438<\/strong><\/h3>\n
http:\/\/papugi.demensdeum.repl.co\/<\/a><\/p>\n
\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438<\/strong><\/h3>\n
\u0421\u043f\u0430\u0441\u0438\u0431\u043e Aleksei Matiushkin (https:\/\/twitter.com\/mudasobwa<\/a>) \u0437\u0430 \u043d\u0430\u0432\u043e\u0434\u043a\u0443 \u043d\u0430 Rosetta Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In diesem Beitrag beschreibe ich den Algorithmus zum Konvertieren eines RGB-Puffers in Grau (Graustufen).Und das geht ganz einfach: Jeder Pixel-Farbkanal des Puffers wird nach einer bestimmten Formel konvertiert und die Ausgabe ist ein Graubild.Durchschnittsmethode: red = average; green = average; blue = average; \u0421\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c 3 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043a\u0430\u043d\u0430\u043b\u0430 \u0438 \u0434\u0435\u043b\u0438\u043c \u043d\u0430 3. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043dContinue reading “RGB-Bild zu Grau”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[61,52],"tags":[131,187],"class_list":["post-3099","post","type-post","status-publish","format-standard","hentry","category-techie","category-tutorials","tag-algorithms","tag-cg","entry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"de","enabled_languages":["en","ru","zh","de","fr","ja","pt"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":true,"content":true,"excerpt":false},"zh":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"fr":{"title":true,"content":true,"excerpt":false},"ja":{"title":true,"content":true,"excerpt":false},"pt":{"title":true,"content":true,"excerpt":false}}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=3099"}],"version-history":[{"count":21,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"predecessor-version":[{"id":3887,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3099\/revisions\/3887"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}