以十六進制格式獲取畫布的背景顏色

Question

如何在fabric.js中以十六進制格式獲取畫布的背景顏色？當我使用canvas.backgroundColor時，它以rgb格式返回對象和顏色。

Answer 1

有一個技巧，可以輕鬆地從任何CSS格式轉換爲十六進制：使用虛擬context2d，設置它的fillStyle，然後再讀一遍：它現在是十六進制！ ：

function convertToHex(nonHexColorString) { 
    var ctx = document.createElement('canvas').getContext('2d'); 
    ctx.fillStyle = nonHexColorString; 
    return ctx.fillStyle; 
} 

console.log(convertToHex('rgb(0,0,0)'); // -->> output is #000000 

緩存context2d如果速度事項：

function convertToHex(nonHexColorString) { 
    var ctx = convertToHex.dummyContext2d; 
    if (!ctx) { 
     ctx = convertToHex.dummyContext2d = document.createElement('canvas').getContext('2d'); 
    } 
    ctx.fillStyle = nonHexColorString; 
    return ctx.fillStyle; 
} 

Answer 2

如果你想留在fabricjs域，你可以這樣做：

var color = new fabric.Color(nonHexString); 

然後...

color.toRgb(); 
color.getAlpha(); 
color.toHsl(); 
color.toHex(); 

等等。

http://fabricjs.com/docs/fabric.Color.html