{"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\/pt\/2022\/05\/27\/rgb-image-to-grayscale\/","title":{"rendered":"Imagem RGB para cinza"},"content":{"rendered":"<p>Neste post irei descrever o algoritmo para convers\u00e3o de um buffer RGB para cinza (Escala de Cinza).<br \/>E isso \u00e9 feito de forma bastante simples, cada canal de cor de pixel do buffer \u00e9 convertido de acordo com uma determinada f\u00f3rmula e a sa\u00edda \u00e9 uma imagem cinza.<br \/>M\u00e9todo m\u00e9dio:<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-unknown\" data-lang=\"unknown\"><code>red = average;\ngreen = average;\nblue = average;<\/code><\/pre>\n<p>\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><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3103\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor.jpg\" alt=\"\" width=\"420\" height=\"236\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor.jpg 420w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor-300x169.jpg 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3104\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsAverage.jpg\" alt=\"\" width=\"420\" height=\"236\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsAverage.jpg 420w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsAverage-300x169.jpg 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>\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<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-unknown\" data-lang=\"unknown\"><code>red = luminance;\ngreen = luminance;\nblue = luminance;<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3103\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor.jpg\" alt=\"\" width=\"420\" height=\"236\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor.jpg 420w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsColor-300x169.jpg 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3105\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsWeightedAverage.jpg\" alt=\"\" width=\"420\" height=\"236\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsWeightedAverage.jpg 420w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/parrotsWeightedAverage-300x169.jpg 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>\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><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3107\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTest.png\" alt=\"\" width=\"430\" height=\"323\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTest.png 430w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTest-300x225.png 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3108\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestAverage.png\" alt=\"\" width=\"430\" height=\"323\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestAverage.png 430w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestAverage-300x225.png 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3109\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestWeightedAverage.png\" alt=\"\" width=\"430\" height=\"323\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestWeightedAverage.png 430w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2022\/05\/colorTestWeightedAverage-300x225.png 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 JavaScript + HTML 5<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-unknown\" data-lang=\"unknown\"><code>    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<h3><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/h3>\n<p><a href=\"https:\/\/www.baeldung.com\/cs\/convert-rgb-to-grayscale\" rel=\"noopener\" target=\"_blank\">https:\/\/www.baeldung.com\/cs\/convert-rgb-to-grayscale<\/a><br \/>\n<a href=\"https:\/\/twitter.com\/mudasobwa\/status\/1528046455587495940\" rel=\"noopener\" target=\"_blank\">https:\/\/twitter.com\/mudasobwa\/status\/1528046455587495940<\/a><br \/>\n<a href=\"https:\/\/rosettacode.org\/wiki\/Grayscale_image\" rel=\"noopener\" target=\"_blank\">https:\/\/rosettacode.org\/wiki\/Grayscale_image<\/a><\/p>\n<h3><strong>\u0421\u0441\u044b\u043b\u043a\u0438<\/strong><\/h3>\n<p><a href=\"http:\/\/papugi.demensdeum.repl.co\" target=\"_blank\" rel=\"noopener\">http:\/\/papugi.demensdeum.repl.co\/<\/a><\/p>\n<h3><strong>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438<\/strong><\/h3>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e Aleksei Matiushkin (<a href=\"https:\/\/twitter.com\/mudasobwa\" target=\"_blank\" rel=\"noopener\">https:\/\/twitter.com\/mudasobwa<\/a>) \u0437\u0430 \u043d\u0430\u0432\u043e\u0434\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/www.rosettacode.org\/wiki\/Rosetta_Code\" rel=\"noopener\" target=\"_blank\">Rosetta Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste post irei descrever o algoritmo para convers\u00e3o de um buffer RGB para cinza (Escala de Cinza).E isso \u00e9 feito de forma bastante simples, cada canal de cor de pixel do buffer \u00e9 convertido de acordo com uma determinada f\u00f3rmula e a sa\u00edda \u00e9 uma imagem cinza.M\u00e9todo m\u00e9dio: red = average; green = average; blue<a class=\"more-link\" href=\"https:\/\/demensdeum.com\/blog\/pt\/2022\/05\/27\/rgb-image-to-grayscale\/\">Continue reading <span class=\"screen-reader-text\">&#8220;Imagem RGB para cinza&#8221;<\/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":"pt","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\/pt\/wp-json\/wp\/v2\/posts\/3099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=3099"}],"version-history":[{"count":21,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"predecessor-version":[{"id":3887,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/3099\/revisions\/3887"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}