Question

我们有一家公司使用jpgs作为图像层和png图层来创建一个flash样式的图像。 png图层只是一个不可见的图像，具有位于艺术图层上方的特定十六进制值。当用户翻过某个区域时，flash会在png图层上找到该位置的HEX值，并从使用所有HEX值及其标签设置的数组中找到相关标签。当用户点击区域闪光填充时，整个图像周围的透明白色矩形接受HEX值中的所有区域。因此，flash只能从HEX值创建掩码。

我的任务是在HTML5中重新创建它，我让所有工作都接受用户点击的部分，并且一切都被掩盖了。

我创建了一个基础艺术div，其中包含实际的艺术作品，然后我在艺术div上方创建了一个包含png图层的画布元素。画布元素不透明度设置为0，我有一个mousemove函数，它从png图层中拾取imageData，将其转换为HEX值，以便从我们的数据库中显示正确的标签。虽然，我很难理解当用户点击该区域时如何使用png图层中的HEX值来创建蒙版。

此外，我们的首席执行官不想花时间重新制作任何这些图像文件，因为我们有数百个。所以我坚持使用jpgs和pngs。

任何帮助都会很棒，甚至可以从哪里开始寻找。

Answer 1

以下是如何使用color-mask-png仅显示另一张图片中的蒙版像素的大纲：

使用.jpg图像
使用.png蒙版
聆听mousedown事件
在mousedown中，获取鼠标位置
在鼠标位置获取蒙版颜色（使用getImageData）
获取显示画布上的所有像素
迭代遮罩画布imageData，并使所有相应的显示画布像素透明，但选定的遮罩颜色除外。
根据所选的面具颜色应用标签

演示：http://jsfiddle.net/m1erickson/szPQf/

点击以下内容的.jpg和.png画布插图：

enter image description here

点击后的.jpg画布插图（仅蓝色遮罩像素可见+标签）

enter image description here

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var maskCanvas=document.getElementById("maskCanvas");
    var maskCtx=maskCanvas.getContext("2d");


    var maskImgData;
    var selectionDone=false;

    var loadedCount=0;
    //
    var flags=new Image();
    flags.crossOrigin="anonymous";
    flags.onload=start;
    flags.src="https://dl.dropboxusercontent.com/u/139992952/multple/flags1.jpg";
    //
    var mask=new Image();
    mask.crossOrigin="anonymous";
    mask.onload=start;
    mask.src="https://dl.dropboxusercontent.com/u/139992952/multple/flags1.png";
    //
    function start(){
        if(++loadedCount<2){return;}
        canvas.width=flags.width;
        canvas.height=flags.height;
        ctx.drawImage(flags,0,0);

        maskCanvas.width=mask.width;
        maskCanvas.height=mask.height;
        maskCtx.drawImage(mask,0,0);

        maskImgData=maskCtx.getImageData(0,0,maskCanvas.width,maskCanvas.height).data;


    }


    function getMaskColor(x,y){
        var p=maskCtx.getImageData(x,y,1,1).data;
        return({r:p[0],g:p[1],b:p[2],a:p[3]});
    }


    function applyMask(pixel){

        // get the pixels on the display canvas
        var canvasImgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        var data=canvasImgData.data;

        // make all pixels on the display canvas transparent
        // except for pixels matching the selected mask
        for(var i=0;i<maskImgData.length;i+=4){
            var isInMask=(
              maskImgData[i+0]==pixel.r &&
              maskImgData[i+1]==pixel.g &&
              maskImgData[i+2]==pixel.b &&
              maskImgData[i+3]>15
            );
            data[i+3]=(isInMask)?255:0;
        }
        // put the masked image back to the display canvas
        ctx.putImageData(canvasImgData,0,0);
    }


    function handleMouseDown(e){

        // exit if the user has already made their selection
        if(selectionDone){return;}
        e.preventDefault();

        // get the mousedown position
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // Put your mousemove stuff here
        var pixel=getMaskColor(mouseX,mouseY);

        // exit when no mask pixel was clicked
        if(!(pixel.r+pixel.g+pixel.b)){return;}

        // user selected a mask area, set the selectonDone flag
        selectionDone=true;

        // make all pixels in the display canvas transparent
        // except for pixels matching the selected mask
        applyMask(pixel);

        // label
        if(pixel.r>0){label("Red Mask area.");}
        if(pixel.b>0){label("Blue Mask area.");}

    }


    function label(text){
        ctx.fillText("You clicked in the",130,50);
        ctx.fillText(text,130,65);
    }


    // listen for mousedown events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});


}); // end $(function(){});
</script>
</head>
<body>
    <h2>Click on a Flag</h2>
    <h4>Display canvas</h4>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <h4>Mask canvas</h4>
    <canvas id="maskCanvas" width=300 height=300></canvas>
</body>
</html>

HTML5 Canvas屏蔽特定颜色

1 个答案: