erhalten rgb Werte von Pixel des Bildes in fabric.js auf Mausbewegung

Question

wie rgb Werte des Bildes in fabric.js auf Mausbewegung erhalten. Ich habe getFill() Methode des Bildobjekts verwendet, aber es gibt (0,0,0) zurück. Bitte helfen Sie mir

Answer 1

FabricJS hat keine native Methode, um die Pixelfarben zu bekommen.

Die Abhilfe stammt html5 Leinwand verwenden, um die Pixeldaten zu holen:

• Erstellen Sie Ihren Stoff Bildobjekte. Stellen Sie sicher, dass Sie crossOrigin als 'anonymous' angeben, andernfalls wird die Zeichenfläche mit einer Sicherheitsverletzung behaftet und die Pixeldaten sind dann nicht mehr verfügbar.

• Hören Sie auf Stoff 'Maus: bewegen' Ereignis. Wenn es ausgelöst wird, rufen Sie die aktuelle Mausposition ab und verwenden Sie die context.getImageData des nativen Canvas, um das Farbarray dieses Pixels abzurufen.

Viel Glück mit Ihrem Projekt!

Hier annotatede Code und ein Demo:

// create a Fabric.Canvas 
 
var canvas = new fabric.Canvas("canvas"); 
 

 
// get a reference to <p id=results></p> 
 
// (used to report pixel color under mouse) 
 
var results = document.getElementById('results'); 
 

 
// get references to the html canvas element & its context 
 
var canvasElement = document.getElementById('canvas'); 
 
var ctx = canvasElement.getContext("2d"); 
 

 

 
// create a test Fabric.Image 
 
addFabricImage('https://dl.dropboxusercontent.com/u/139992952/multple/colorBar.png'); 
 

 
// listen for mouse:move events 
 
canvas.on('mouse:move', function(e) { 
 

 
    // get the current mouse position 
 
    var mouse = canvas.getPointer(e.e); 
 
    var x = parseInt(mouse.x); 
 
    var y = parseInt(mouse.y); 
 

 
    // get the color array for the pixel under the mouse 
 
    var px = ctx.getImageData(x, y, 1, 1).data; 
 

 
    // report that pixel data 
 
    results.innerHTML = 'At [' + x + '/' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + '/' + px[1] + '/' + px[2] + '/' + px[3] + ']'; 
 

 
}); 
 

 

 

 
// create a Fabric.Image at x,y using a specified imgSrc 
 
function addFabricImage(imgSrc, x, y) { 
 

 
    // create a new javascript Image object using imgSrc 
 
    var img = new Image(); 
 

 
    // be sure to set crossOrigin or else 
 
    // cross-domain imgSrc's will taint the canvas 
 
    // and then we can't get the pixel data 
 
    // IMPORTANT!: the source domain must be properly configured 
 
    // to allow crossOrigin='anonymous' 
 
    img.crossOrigin = 'anonymous'; 
 

 
    // when the Image object is fully loaded, 
 
    // use it to create a new fabric.Image object 
 
    img.onload = function() { 
 

 
    var fabImg = new fabric.Image(this, { 
 
     left: 30, 
 
     top: 30 
 
    }); 
 
    canvas.add(fabImg); 
 

 
    } 
 

 
    // use imgSrc as the image source 
 
    img.src = imgSrc; 
 

 
}

body { 
 
    background-color: ivory; 
 
} 
 
canvas { 
 
    border: 1px solid red; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<p id="results">Move mouse over canvas</p> 
 
<canvas id=canvas width=300 height=300></canvas>