Question

我有两个脚本。

首先从图像中获取颜色：http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/

 <canvas id="myCanvas" width="578" height="276"></canvas>
    <script>
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      function drawColorSquare(canvas, color, imageObj) {
        var colorSquareSize = 100;
        var padding = 10;
        var context = canvas.getContext('2d');
        var squareX = (canvas.width - colorSquareSize + imageObj.width) / 2;
        var squareY = (canvas.height - colorSquareSize) / 2;

        context.beginPath();
        context.fillStyle = color;
        context.fillRect(squareX, squareY, colorSquareSize, colorSquareSize);
        context.strokeRect(squareX, squareY, colorSquareSize, colorSquareSize);
      }
      function init(imageObj) {
        var padding = 10;
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var mouseDown = false;

        context.strokeStyle = '#444';
        context.lineWidth = 2;

        canvas.addEventListener('mousedown', function() {
          mouseDown = true;
        }, false);

        canvas.addEventListener('mouseup', function() {
          mouseDown = false;
        }, false);

        canvas.addEventListener('mousemove', function(evt) {
          var mousePos = getMousePos(canvas, evt);
          var color = undefined;

          if(mouseDown && mousePos !== null && mousePos.x > padding && mousePos.x < padding + imageObj.width && mousePos.y > padding && mousePos.y < padding + imageObj.height) {

            // color picker image is 256x256 and is offset by 10px
            // from top and bottom
            var imageData = context.getImageData(padding, padding, imageObj.width, imageObj.width);
            var data = imageData.data;
            var x = mousePos.x - padding;
            var y = mousePos.y - padding;
            var red = data[((imageObj.width * y) + x) * 4];
            var green = data[((imageObj.width * y) + x) * 4 + 1];
            var blue = data[((imageObj.width * y) + x) * 4 + 2];
            var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
            drawColorSquare(canvas, color, imageObj);
          }
        }, false);

        context.drawImage(imageObj, padding, padding);
        drawColorSquare(canvas, 'white', imageObj);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        init(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/color-picker.png';

    </script>

第二个是获取按下哪个图层：http://jsfiddle.net/rws05qdr/

<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });


      var layer = new Kinetic.Layer({id:1});
      var imageObj = new Image();
      imageObj.onload = function() {
      var yoda = new Kinetic.Image({
          x: 140,
          y: stage.getHeight() / 2 - 59,
          image: imageObj,
          width: 106,
          height: 118
        });

        layer.add(yoda);
        stage.add(layer);

      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';



      var layer2 = new Kinetic.Layer({id:2});
      var imageObj2 = new Image();
      imageObj2.onload = function() {
      var filteredYoda = new Kinetic.Image({
          x: 280,
          y: stage.getHeight() / 2 - 59,
          image: imageObj2,
          width: 106,
          height: 118
        });

        layer2.add(filteredYoda);
        stage.add(layer2);
      };
      imageObj2.src = 'http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png';

    stage.on('click', function(e) {
        if(e.targetNode.parent.attrs.id == 1){
            alert('first layer');
        } else {
            alert('second layer');
        }
    });
</script>

我如何获得结果，这是按下图层并获得此图层颜色

Answer 1

getImageData(x,y,width,height)可以从画布中导出像素数据，但您正在使用＆＃34; other-domain＆＃34;图片http://www.html5canvastutorials.com/demos/assets/yoda.jpg和http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png。它会污染画布，无法导出受污染的画布。

您应该使用具有相同域名的图片或将图片发布到支持跨域共享的网站。

解决跨域问题后，您可以使用getImageData方法。它的上下文方法和每个层都有自己的上下文。

从图层layer.getCanvas().getContext();获取上下文，并从上下文中获取鼠标位置的像素数据。

stage.on('click', function(e) {
    var x = e.pageX - $(e.target).offset().left;            // mouse position - canvas offset
    var y = e.pageY - $(e.target).offset().top;
    var ctx = e.targetNode.parent.getCanvas().getContext(); // get context from layer
    var rgb = ctx.getImageData(x, y, 1, 1).data;            // get pixel data from the context
});

这是jsfiddle：http://jsfiddle.net/rws05qdr/7/

KineticJS如何从图层中获取颜色（图层中的颜色选择器）

1 个答案: