Question

我编写了一个实用程序，用于将文本转换为颜色并返回到画布上（此部分效果很好。）反转和灰度画布的代码是问题。如果我在画布上使用drawImage并尝试调用getImageData函数挂起或错误。这可以通过调用loadImage（）来演示，该函数将图像绘制到画布上，然后尝试反转或灰度图像失败。但是如果我使用textToColor将像素写入画布，它将会灰度并反转就好了。

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p id="Start"></p>
<p id="End"></p>
<script>
var ColorizeData = function(canvas) {
    this.canvas = canvas;
    this.charToHexTable = {};
    this.hexToCharTable = {};
}
ColorizeData.prototype.initTables = function(){
    var charHexPairs = [
        ["a" , "#000010"],
        ["b" , "#000020"],
        ["c" , "#000030"],
        ["d" , "#000040"],
        ["e" , "#000050"],
        ["f" , "#000060"],
        ["g" , "#000070"],
        ["h" , "#000080"],
        ["i" , "#000090"],
        ["j" , "#0000a0"],
        ["k" , "#0000b0"],
        ["l" , "#0000c0"],
        ["m" , "#0000d0"],
        ["n" , "#0000e0"],
        ["o" , "#0000f0"],
        ["p" , "#001000"],
        ["q" , "#002000"],
        ["r" , "#003000"],
        ["s" , "#004000"],
        ["t" , "#005000"],
        ["u" , "#006000"],
        ["v" , "#007000"],
        ["w" , "#008000"],
        ["x" , "#009000"],
        ["y" , "#00a000"],
        ["z" , "#00b000"],
        [" " , "#00c000"],
        ["  " , "#00c0f0"],
        ["-" , "#00d000"],
        ["," , "#00d0f0"],
        ["=" , "#00e000"],
        ["." , "#00f000"],
        ["0" , "#100000"],
        ["1" , "#200000"],
        ["2" , "#300000"],
        ["3" , "#400000"],
        ["4" , "#500000"],
        ["5" , "#600000"],
        ["6" , "#700000"],
        ["7" , "#800000"],
        ["8" , "#900000"],
        ["9" , "#a00000"]
    ];
    var i, pair, char, hex;
    for(i=0; i < charHexPairs.length; i++)
    {
            pair = charHexPairs[i];
            char = pair[0];
            hex = pair[1];
            this.charToHexTable[char] = hex;
            this.hexToCharTable[hex] = char;
    };
}

ColorizeData.prototype.textToColor = function(arg){
    var context = this.canvas.getContext("2d");
    context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    var index;
    var upDown = 1;
    var leftRight = 0;
    arg = arg.toLowerCase();
    for(index = 0;index<arg.length;index++)
    {
        var prop = arg.charAt(index);
        if(this.charToHexTable.hasOwnProperty(prop))
        {
            context.fillStyle = this.charToHexTable[prop];  
        }
        else
        {
            context.fillStyle = "#000000";
        }
        if(index < this.canvas.width) {
            context.fillRect(index, 0, 1, 1);
        }
        else
        {
            context.fillRect(leftRight,upDown,1,1);
            leftRight += 1;
            if(leftRight == this.canvas.width) {
                leftRight = 0;
                upDown+=1;
            }
        }
    };
}
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);
}
ColorizeData.prototype.colorToText = function(arg) 
{
    var text = "";
    var context = this.canvas.getContext("2d");
    var imgData = context.getImageData(0,0,this.canvas.width,this.canvas.height);
    var index;
    var leftRight = 0;
    var upDown = 0;
    for(index = 0;index<imgData.data.length;index += 4)
    {
        if(leftRight > this.canvas.width) {
            leftRight = 0;
            upDown += 1;
        }
        imgData = context.getImageData(leftRight,upDown, this.canvas.width,10);
        var r = imgData.data[0];
        var g = imgData.data[1];
        var b = imgData.data[2];         
        var hex = rgbToHex(r, g, b);
        if(this.hexToCharTable.hasOwnProperty(hex))
        {
            text += this.hexToCharTable[hex];
        }
        leftRight += 1;
    };
    document.getElementById(arg).innerText = text;
}
function grayscale () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageData = context.getImageData(0,0,canvas.width, canvas.height);
    var data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i +1] + data[i +2]) / 3;
        data[i] = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
    };
    imageData.data = data;
    context.putImageData(imageData, 0, 0);
}
function invert() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    alert("before");
    var imageData = context.getImageData(0,0,canvas.width, canvas.height);
    alert("after");
    var data = imageData.data;  
    for (var i = 0; i < data.length; i += 4) {
        data[i]     = 225 - data[i];     // red
        data[i + 1] = 225 - data[i + 1]; // green
        data[i + 2] = 225 - data[i + 2]; // blue
    };
    imageData.data = data;
    context.putImageData(imageData, 0, 0);
}
ColorizeData.prototype.loadImage = function() {
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    img.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        img.style.display = 'none';
        context.drawImage(img, 0, 0,canvas.width,canvas.height);

    };
}
ColorizeData.prototype.clear = function() {
    var context = this.canvas.getContext("2d");
    context.clearRect(0,0,200, 200);
}
var Colorizer = new ColorizeData(document.getElementById("myCanvas"));
Colorizer.initTables();
Colorizer.textToColor("hello world");
Colorizer.colorToText("Start");
</script>
<button onclick="Colorizer.loadImage();">Load Image</button>

<button onclick="Colorizer.clear();">Clear canvas</button><br>

<button onclick="invert();">Invert</button>

<button onclick="grayscale();">Grayscale</button>

如果对使用context.drawImage绘制到画布的图像进行操作，则永远不会调用Invert中的第二个警报。我该如何解决这个问题？任何帮助或想法将不胜感激。

如何将图像转换为rgba值以写入画布？

0 个答案: