Duotone Image Converter<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: left;\n margin: 20px;\n }\n\n .container {\n display: inline-block;\n max-width: 100%;\n }\n\n .upload-area {\n text-align: center; \n border: 2px dashed #000;\n padding: 20px;\n cursor: pointer;\n margin-bottom: 20px;\n color: #888;\n position: relative;\n }\n\n button {\n background-color: #efefef; \n color: #000; \n border: 2px solid #000;\n }\n .upload-area.dragover {\n border-color: #000;\n }\n\n .upload-area p {\n margin: 5px 0;\n }\n\n #select-button {\n margin-top: 10px;\n padding: 5px 10px;\n }\n\n .controls {\n margin-bottom: 20px;\n }\n\n .controls label {\n margin: 0 5px;\n }\n\n .controls input[type=\"color\"] {\n margin-right: 10px;\n }\n\n .controls button {\n margin: 0 5px;\n padding: 5px 10px;\n }\n\n .preset-controls {\n margin-bottom: 20px;\n }\n\n canvas {\n border: 1px solid #ccc;\n max-width: 100%;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1><\/h1>\n <div class=\"upload-area\" id=\"upload-area\">\n <p>Drag & Drop Image Here<\/p>\n <p>or<\/p>\n <button id=\"select-button\">Select Image<\/button>\n <input type=\"file\" id=\"file-input\" accept=\"image\/*\" style=\"display: none;\">\n <\/div>\n <div class=\"controls\">\n <label for=\"color1\">Color 1:<\/label>\n <input type=\"color\" id=\"color1\" value=\"#000000\">\n <label for=\"color2\">Color 2:<\/label>\n <input type=\"color\" id=\"color2\" value=\"#ffffff\">\n <button id=\"apply-button\">Apply Duotone<\/button>\n <button id=\"clear-button\">Clear<\/button>\n <button id=\"save-button\">Save Image<\/button>\n <\/div>\n <div class=\"preset-controls\">\n <label for=\"preset-dropdown\">Select Preset:<\/label>\n <select id=\"preset-dropdown\">\n <option value=\"\">–Choose a Preset–<\/option>\n <option value=\"#ff0000,#ffff00\">Red & Yellow<\/option>\n <option value=\"#0000ff,#00ff00\">Blue & Green<\/option>\n <option value=\"#ff00ff,#00ffff\">Magenta & Cyan<\/option>\n <option value=\"#ff8800,#0000ff\">Orange & Blue<\/option>\n <option value=\"#008000,#ffd700\">Green & Gold<\/option>\n <option value=\"#800080,#ff69b4\">Purple & Pink<\/option>\n <option value=\"#ff4500,#32cd32\">Orange Red & Lime Green<\/option>\n <option value=\"#4682b4,#d2691e\">Steel Blue & Chocolate<\/option>\n <option value=\"#ff6347,#40e0d0\">Tomato & Turquoise<\/option>\n <option value=\"#000080,#ffffe0\">Navy & Light Yellow<\/option>\n <\/select>\n <\/div>\n <canvas id=\"canvas\"><\/canvas>\n <\/div>\n\n <script>\n const uploadArea = document.getElementById('upload-area');\n const selectButton = document.getElementById('select-button');\n const fileInput = document.getElementById('file-input');\n const color1Input = document.getElementById('color1');\n const color2Input = document.getElementById('color2');\n const applyButton = document.getElementById('apply-button');\n const clearButton = document.getElementById('clear-button');\n const saveButton = document.getElementById('save-button');\n const presetDropdown = document.getElementById('preset-dropdown');\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n let originalImage = null;\n\n uploadArea.addEventListener('dragover', (e) => {\n e.preventDefault();\n uploadArea.classList.add('dragover');\n });\n\n uploadArea.addEventListener('dragleave', () => {\n uploadArea.classList.remove('dragover');\n });\n\n uploadArea.addEventListener('drop', (e) => {\n e.preventDefault();\n uploadArea.classList.remove('dragover');\n const file = e.dataTransfer.files[0];\n handleFile(file);\n });\n\n selectButton.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', () => {\n const file = fileInput.files[0];\n handleFile(file);\n });\n\n function handleFile(file) {\n if (file && file.type.startsWith('image\/')) {\n const reader = new FileReader();\n reader.onload = function (e) {\n const img = new Image();\n img.onload = function () {\n originalImage = img;\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n }\n }\n\n applyButton.addEventListener('click', () => {\n if (!originalImage) return;\n const color1 = hexToRGB(color1Input.value);\n const color2 = hexToRGB(color2Input.value);\n\n ctx.drawImage(originalImage, 0, 0);\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n for (let i = 0; i < data.length; i += 4) {\n const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;\n const t = gray \/ 255;\n\n data[i] = (1 - t) * color1.r + t * color2.r;\n data[i + 1] = (1 - t) * color1.g + t * color2.g;\n data[i + 2] = (1 - t) * color1.b + t * color2.b;\n }\n\n ctx.putImageData(imageData, 0, 0);\n });\n\n clearButton.addEventListener('click', () => {\n originalImage = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.width = 0;\n canvas.height = 0;\n fileInput.value = '';\n color1Input.value = '#000000';\n color2Input.value = '#ffffff';\n presetDropdown.value = '';\n });\n\n saveButton.addEventListener('click', () => {\n if (!originalImage) return;\n const link = document.createElement('a');\n link.download = 'duotone-image.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n });\n\n function hexToRGB(hex) {\n hex = hex.replace('#', '');\n if (hex.length === 3) {\n hex = hex.split('').map(c => c + c).join('');\n }\n const bigint = parseInt(hex, 16);\n return {\n r: (bigint >> 16) & 255,\n g: (bigint >> 8) & 255,\n b: bigint & 255\n };\n }\n\n presetDropdown.addEventListener('change', () => {\n const selectedPreset = presetDropdown.value;\n if (selectedPreset) {\n const [color1, color2] = selectedPreset.split(',');\n color1Input.value = color1;\n color2Input.value = color2;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>The Duotone Image Converter is a simple browser-based tool that allows users to apply duotone effects to their images using two selected colors. Users can either upload an image via drag-and-drop or file selection, choose custom colors or preset combinations, and then download the processed image. The tool operates entirely on the client-side, ensuring privacy … <a title=\"Duotone Image Converter\" class=\"read-more\" href=\"https:\/\/divbydev.com\/index.php\/projects-2\/duotone-image-converter\/\" aria-label=\"Read more about Duotone Image Converter\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-590","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":8,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590\/revisions\/607"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":590,"date":"2024-10-06T07:13:50","date_gmt":"2024-10-06T06:13:50","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=590"},"modified":"2024-10-06T08:21:59","modified_gmt":"2024-10-06T07:21:59","slug":"duotone-image-converter","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/duotone-image-converter\/","title":{"rendered":"Duotone Image Converter"},"content":{"rendered":"\n

The Duotone Image Converter<\/strong> is a simple browser-based tool that allows users to apply duotone effects to their images using two selected colors. Users can either upload an image via drag-and-drop or file selection, choose custom colors or preset combinations, and then download the processed image. The tool operates entirely on the client-side, ensuring privacy and fast performance.<\/p>\n\n\n\n

Use Cases<\/strong><\/p>\n\n\n\n

\n
Social Media Content Creation:<\/strong>\n
\n
Quickly create stylish, duotone images for use in Instagram posts or Facebook cover images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Branding:<\/strong>\n
\n
Apply brand colors to images, ensuring consistency across marketing materials.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Photography:<\/strong>\n
\n
Add artistic effects to photos without needing advanced photo-editing software.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n\n\n\n \n \n Duotone Image Converter<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: left;\n margin: 20px;\n }\n\n .container {\n display: inline-block;\n max-width: 100%;\n }\n\n .upload-area {\n text-align: center; \n border: 2px dashed #000;\n padding: 20px;\n cursor: pointer;\n margin-bottom: 20px;\n color: #888;\n position: relative;\n }\n\n button {\n background-color: #efefef; \n color: #000; \n border: 2px solid #000;\n }\n .upload-area.dragover {\n border-color: #000;\n }\n\n .upload-area p {\n margin: 5px 0;\n }\n\n #select-button {\n margin-top: 10px;\n padding: 5px 10px;\n }\n\n .controls {\n margin-bottom: 20px;\n }\n\n .controls label {\n margin: 0 5px;\n }\n\n .controls input[type=\"color\"] {\n margin-right: 10px;\n }\n\n .controls button {\n margin: 0 5px;\n padding: 5px 10px;\n }\n\n .preset-controls {\n margin-bottom: 20px;\n }\n\n canvas {\n border: 1px solid #ccc;\n max-width: 100%;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1><\/h1>\n <div class=\"upload-area\" id=\"upload-area\">\n <p>Drag & Drop Image Here<\/p>\n <p>or<\/p>\n <button id=\"select-button\">Select Image<\/button>\n <input type=\"file\" id=\"file-input\" accept=\"image\/*\" style=\"display: none;\">\n <\/div>\n <div class=\"controls\">\n <label for=\"color1\">Color 1:<\/label>\n <input type=\"color\" id=\"color1\" value=\"#000000\">\n <label for=\"color2\">Color 2:<\/label>\n <input type=\"color\" id=\"color2\" value=\"#ffffff\">\n <button id=\"apply-button\">Apply Duotone<\/button>\n <button id=\"clear-button\">Clear<\/button>\n <button id=\"save-button\">Save Image<\/button>\n <\/div>\n <div class=\"preset-controls\">\n <label for=\"preset-dropdown\">Select Preset:<\/label>\n <select id=\"preset-dropdown\">\n <option value=\"\">–Choose a Preset–<\/option>\n <option value=\"#ff0000,#ffff00\">Red & Yellow<\/option>\n <option value=\"#0000ff,#00ff00\">Blue & Green<\/option>\n <option value=\"#ff00ff,#00ffff\">Magenta & Cyan<\/option>\n <option value=\"#ff8800,#0000ff\">Orange & Blue<\/option>\n <option value=\"#008000,#ffd700\">Green & Gold<\/option>\n <option value=\"#800080,#ff69b4\">Purple & Pink<\/option>\n <option value=\"#ff4500,#32cd32\">Orange Red & Lime Green<\/option>\n <option value=\"#4682b4,#d2691e\">Steel Blue & Chocolate<\/option>\n <option value=\"#ff6347,#40e0d0\">Tomato & Turquoise<\/option>\n <option value=\"#000080,#ffffe0\">Navy & Light Yellow<\/option>\n <\/select>\n <\/div>\n <canvas id=\"canvas\"><\/canvas>\n <\/div>\n\n <script>\n const uploadArea = document.getElementById('upload-area');\n const selectButton = document.getElementById('select-button');\n const fileInput = document.getElementById('file-input');\n const color1Input = document.getElementById('color1');\n const color2Input = document.getElementById('color2');\n const applyButton = document.getElementById('apply-button');\n const clearButton = document.getElementById('clear-button');\n const saveButton = document.getElementById('save-button');\n const presetDropdown = document.getElementById('preset-dropdown');\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n let originalImage = null;\n\n uploadArea.addEventListener('dragover', (e) => {\n e.preventDefault();\n uploadArea.classList.add('dragover');\n });\n\n uploadArea.addEventListener('dragleave', () => {\n uploadArea.classList.remove('dragover');\n });\n\n uploadArea.addEventListener('drop', (e) => {\n e.preventDefault();\n uploadArea.classList.remove('dragover');\n const file = e.dataTransfer.files[0];\n handleFile(file);\n });\n\n selectButton.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', () => {\n const file = fileInput.files[0];\n handleFile(file);\n });\n\n function handleFile(file) {\n if (file && file.type.startsWith('image\/')) {\n const reader = new FileReader();\n reader.onload = function (e) {\n const img = new Image();\n img.onload = function () {\n originalImage = img;\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n }\n }\n\n applyButton.addEventListener('click', () => {\n if (!originalImage) return;\n const color1 = hexToRGB(color1Input.value);\n const color2 = hexToRGB(color2Input.value);\n\n ctx.drawImage(originalImage, 0, 0);\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n for (let i = 0; i < data.length; i += 4) {\n const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;\n const t = gray \/ 255;\n\n data[i] = (1 - t) * color1.r + t * color2.r;\n data[i + 1] = (1 - t) * color1.g + t * color2.g;\n data[i + 2] = (1 - t) * color1.b + t * color2.b;\n }\n\n ctx.putImageData(imageData, 0, 0);\n });\n\n clearButton.addEventListener('click', () => {\n originalImage = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.width = 0;\n canvas.height = 0;\n fileInput.value = '';\n color1Input.value = '#000000';\n color2Input.value = '#ffffff';\n presetDropdown.value = '';\n });\n\n saveButton.addEventListener('click', () => {\n if (!originalImage) return;\n const link = document.createElement('a');\n link.download = 'duotone-image.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n });\n\n function hexToRGB(hex) {\n hex = hex.replace('#', '');\n if (hex.length === 3) {\n hex = hex.split('').map(c => c + c).join('');\n }\n const bigint = parseInt(hex, 16);\n return {\n r: (bigint >> 16) & 255,\n g: (bigint >> 8) & 255,\n b: bigint & 255\n };\n }\n\n presetDropdown.addEventListener('change', () => {\n const selectedPreset = presetDropdown.value;\n if (selectedPreset) {\n const [color1, color2] = selectedPreset.split(',');\n color1Input.value = color1;\n color2Input.value = color2;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>The Duotone Image Converter is a simple browser-based tool that allows users to apply duotone effects to their images using two selected colors. Users can either upload an image via drag-and-drop or file selection, choose custom colors or preset combinations, and then download the processed image. The tool operates entirely on the client-side, ensuring privacy … <a title=\"Duotone Image Converter\" class=\"read-more\" href=\"https:\/\/divbydev.com\/index.php\/projects-2\/duotone-image-converter\/\" aria-label=\"Read more about Duotone Image Converter\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-590","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":8,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/590\/revisions\/607"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}