ottieni i valori rgb del pixel dell'immagine in fabric.js sul movimento del mouse

Question

come ottenere i valori rgb dell'immagine in fabric.js sulla mossa del mouse. Ho usato il metodo getFill() dell'oggetto immagine, ma sta tornando (0,0,0). Please help me

Answer 1

FabricJS non ha un metodo nativo per ottenere i colori dei pixel.

La soluzione è quella di utilizzare tela HTML5 nativo per andare a prendere i dati dei pixel:

• Creare le oggetti immagine Tessuto. Assicurati di specificare crossOrigin come "anonimo", altrimenti la tela sarà contaminata da una violazione della sicurezza e quindi i dati dei pixel non saranno disponibili.

• Ascolta su evento 'mouse: sposta' di Fabric. Quando si attiva, prendi la posizione corrente del mouse e usa il canvas originale context.getImageData per recuperare l'array di colori di quel pixel.

Buona fortuna con il tuo progetto!

Ecco annotatede codice e una 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>