キャンバスの背景色を16進形式で取得する

Question

fabric.jsで16進形式のキャンバスの背景色を取得するにはどうすればよいですか？私がcanvas.backgroundColorを使うと、rgb形式のオブジェクトと色が返されます。

Answer 1

任意のCSS形式から16進数に簡単に変換する方法があります：ダミーcontext2dを使用して、fillStyleに設定してから、もう一度お読みください：今は16進数です！ ：

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