0

我遇到了一个问题。我想将图像上的绿色描边转换为黄色描边。

所以：我有一个图像，你在图像上绘图，你会看到绿线。然后，在另一个画布中，我希望那些绿线是黄色的。

到目前为止我有这个： 

    </canvas>

    <canvas id="ball2" width="600px" height ="600px">

    </canvas>

    <img id="worldmap" src="worldmap.png" />

    <script type="text/javascript">
    // Set variables
    var a_canvas = document.getElementById("ball");
    var context = a_canvas.getContext("2d");

    var a_canvas2 = document.getElementById("ball2");
    var context2 = a_canvas2.getContext("2d");

    var img=document.getElementById("worldmap");

    var mouse_pos_x = [];
    var mouse_pos_y = [];

    var thickness = 0;

    var arraycount = 0;

    var mouse_down = false;

    var mouse_skip = [];

    function update(){
    }

    document.body.onmousedown = function(){
        mouse_down = true;
        mouse_pos_x.push(event.clientX);
        mouse_pos_y.push(event.clientY);
        arraycount += 1;
    }

    document.body.onmouseup = function() {
        if(mouse_down){
            mouse_down = false;
            mouse_skip.push(arraycount);
        }
    }

    document.body.onmousemove = function() {
        if(mouse_down){
            context.drawImage(img,0,0);
            mouse_pos_x.push(event.clientX);
            mouse_pos_y.push(event.clientY);
            context.lineWidth=2.5;
            context.strokeStyle="#00FF00";
            context.moveTo(mouse_pos_x[arraycount - 1], mouse_pos_y[arraycount - 1]);
            context.lineTo(mouse_pos_x[arraycount], mouse_pos_y[arraycount]);
            context.stroke();
            arraycount += 1;

            var imgdata = context.getImageData(0, 0, a_canvas.width, a_canvas.height);
            var l = imgdata.data.length / 4;

            for (var  i = 0; i < l; i++) {
                var r = imgdata.data[i * 4 + 0];
                var g = imgdata.data[i * 4 + 1];
                var b = imgdata.data[i * 4 + 2];
                if(g < 255){
                imgdata.data[i * 4 + 3] = 0;
            }
        }
        context2.putImageData(imgdata, 0, 0);
        }
    }

    setInterval(update,10);

    </script>

我只是不知道出了什么问题。它用绿色笔划在左侧绘制图像，但在右侧没有任何内容。此外，当我删除 drawImage() 它确实有效。（它画出绿线和黄线）。

编辑：我做了一个小提琴来说明我的问题：JSFiddle 当你删除<img>标签时，一切正常。但是添加它并没有在 context2 上绘制任何内容。

顺便说一句，我知道有关画布的安全问题。在小提琴中，我使用外部域，但在我自己的代码中，我使用本地文件。

4

0 回答 0