Как связать данные в объекте с сеткой данных в XAML?

Изменить: я немного почистил это и сделал gist и demo . Основной подход остается тем же.

«Добавить элемент в DOM и проверить его метод ComputedStyle» кажется мне немного сложным - вам нужно добавить его и проверить его, и не забудьте удалить его, а вы 'изменение DOM только для вычисления цвета и вызывает ли это перепланировку? Итак, вот решение, основанное на временном (и никогда не отображаемом) :

function colorToRGBA(color) {
    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
    // color must be a valid canvas fillStyle. This will cover most anything
    // you'd want to use.
    // Examples:
    // colorToRGBA('red')  # [255, 0, 0, 255]
    // colorToRGBA('#f00') # [255, 0, 0, 255]
    var cvs, ctx;
    cvs = document.createElement('canvas');
    cvs.height = 1;
    cvs.width = 1;
    ctx = cvs.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

function byteToHex(num) {
    // Turns a number (0-255) into a 2-character hex number (00-ff)
    return ('0'+num.toString(16)).slice(-2);
}

function colorToHex(color) {
    // Convert any CSS color to a hex representation
    // Examples:
    // colorToHex('red')            # '#ff0000'
    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
    var rgba, hex;
    rgba = colorToRGBA(color);
    hex = [0,1,2].map(
        function(idx) { return byteToHex(rgba[idx]); }
        ).join('');
    return "#"+hex;
}

Обратите внимание, что это позволяет вам использовать что-либо, что является допустимым шрифтом canvas, поэтому, если вы хотите создать один пиксель шаблон из изображения, он также расскажет вам о цвете.

Я тестировал это в достаточно современных версиях IE, Chrome, Safari и Firefox.