Canvas on mobile возвращает неправильные цвета

Question

Im загружает изображение с 3 цветами в элемент HTMLCanvas на мобильном устройстве Android (Samsung Galaxy S3). При проверке использованных цветов в используемом изображении, я получаю намного больше цветов. При запуске того же кода на обычном ПК я получаю точные цвета и подсчитываю.

Пример код:

function getColorsFromImageData (imageData) { 
    var colors = {}; 
    var data = imageData.data; 

    for (var i = 0, len = data.length; i < len; i += 4) { 
     if (data[i+3] == 0) continue; 
     var rgb = data[i] + "," + data[i+1] + "," + data[i+2]; 
     if (colors[rgb]) 
      colors[rgb]++; 
     else 
      colors[rgb] = 1; 
    } 
    return colors; 
}; 

function createColorElement (color, count) { 
    var elm = document.createElement("span"); 
    elm.style.backgroundColor = "rgb(" + color + ")"; 
    elm.className = "color"; 
    elm.innerHTML = color + " (" + count + ")"; 
    document.getElementById("colors").appendChild(elm); 
} 

window.onload = function() { 
    var canvas = document.getElementById("c"); 
    var img = new Image(); 
    img.onload = function() { 
     canvas.width = img.width; 
     canvas.height = img.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img,0,0); 

     var data = ctx.getImageData(0, 0, img.width, img.height); 
     var colors = getColorsFromImageData(data); 

     var count = 0; 
     for (var color in colors) { 
      createColorElement(color, colors[color]); 
      count++; 
     } 

     document.getElementById("count").innerHTML = count; 
    } 
    img.src = "test.png"; 
}; 

Вот скрипка: http://jsfiddle.net/d6714wdg/

Как я могу получить точные цвета на мобильном телефоне?

Фон: Я создаю онлайн-дизайнер на основе HTMLCanvas. Мне нужны точные значения цвета и отсутствие сглаживания, потому что все цвета должны соответствовать набору предопределенных цветов, соответствующих используемому цвету шерсти.

Спасибо за любую помощь.

Answer 1

Проблема, с которой вы сталкиваетесь, связана с тем, что холст делает сглаживание по drawImage() по умолчанию.

Это можно отключить, установив для объекта imageSmoothingEnabled значение false.

Это свойство еще не стабилизировалась, и вы будете нуждаться в конструктор префиксы:

ctx.mozImageSmoothingEnabled = false; 
ctx.webkitImageSmoothingEnabled = false; 
ctx.msImageSmoothingEnabled = false; 
ctx.imageSmoothingEnabled = false; 
ctx.drawImage(img, 0, 0); 

updated fiddle