Javascript需要输出HEX而不是RGB（getImageData，drawImage）

Question

只是为了澄清我不太擅长 javascript 并且仍在学习中。
我在互联网上找到了这段代码，它需要一个图像并将其转换为小跨度单元格以获得像素化图像。
该代码工作完美，但我遇到的唯一问题是我希望它作为十六进制值输出而不是RGB

<body>
    <canvas id="canvas" style="visibility: hidden;"></canvas>
    <div id="final-image" style="line-height: 7px;letter-spacing: -3px;"></div>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const imgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Radisson_SAS_Scandinavia_voldgrav.JPG/800px-Radisson_SAS_Scandinavia_voldgrav.JPG";
        const img = new Image();
        const imgWidth = 41;

        let html = "";
        img.crossOrigin = "Anonymous";
        img.onload = function() {
            canvas.width = imgWidth;
            canvas.height = (this.height * canvas.width) / this.width;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            for (let i = 0; i < canvas.height; i++) {
                for (let j = 0; j < canvas.width; j++) {
                    add(ctx.getImageData(j, i, 1, 1).data);
                }
                html += "<br />";
            }
            document.getElementById("final-image").innerHTML = html;
            canvas.parentNode.removeChild(canvas);
        };

        img.src = imgUrl;

        function add(c) {
            html += `<span style="color: rgb(${c[0]}, ${c[1]}, ${c[2]});">&#9632;</span>`;
        }
    </script>
</body>

我已经找了很长一段时间了，我必须承认我无法自己修复解决方案。
我发现这个片段虽然对我有帮助，但我可以把它放在一起。

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

我试图找出如何获取返回十六进制值而不是RGB，但没有专业知识

Answer 1

您应该能够在

add()

函数中构造十六进制（当然也是 RGB）颜色值：

function add(c) {
  const hexpair = v => `${v < 16 ? "0" : ""}${v.toString(16)}`;
  const hex = `#${hexpair(c[0])}${hexpair(c[1])}${hexpair(c[2])}`;
  html += `<span style="color: ${hex};">&#9632;</span>`;
}

结果应该是一样的；

rgb()

基本上是一种更清晰的方法，可以完成与十六进制颜色值相同的操作。

Javascript需要输出HEX而不是RGB（getImageData，drawImage）

问题描述投票：0回答：1

1个回答

最新问题

Javascript需要输出HEX而不是RGB（getImageData，drawImage）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1