手機上的畫布返回錯誤的顏色

我將3種顏色的圖像加載到移動安卓設備（Samsung Galaxy S3）上的HTMLCanvas元素中。當檢查使用的imageData中使用的顏色時，我會獲得更多的顏色。在通常的PC上運行相同的代碼時，我會得到確切的顏色和數量。手機上的畫布返回錯誤的顏色

示例代碼：

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的在線設計器。我需要確切的顏色值，並且不需要抗鋸齒，因爲所有顏色都需要符合與使用的羊毛顏色相匹配的一組預定義顏色。

感謝您的任何幫助。

來源

2015-07-03 kirschkern

@Kaiido。謝謝你的幫助。我已經找到了答案，而IMO這是一個不同的問題，因爲我只使用完全不透明的像素數據（alpha通道爲255），我的問題迄今爲止從未發生過桌面實現，但只在移動設備上發生。手機上的Firefox和Chrome都顯示相同的行爲。 – kirschkern

在我手機上的Chrome 43中加載jsfiddle會返回總計15種顏色（最初只定義了3種顏色）。也許我不完全理解你的鏈接解釋中描述的問題，但是當我看着我的jsfiddle中的顏色值時，它們都非常接近，我期望看到的那些也存在，並且計數最高。這不符合解釋。對？感謝您堅持這個話題，我真的很感激。 – kirschkern

我的不好，那根本就不是問題。它實際上確實解決了我自己的問題，所以謝謝你:-) – Kaiido

您面臨的問題是由於畫布在默認情況下在drawImage()上平滑。

可以通過將上下文的imageSmoothingEnabled屬性設置爲false來關閉此功能。

這家酒店還沒有穩定，就需要構造前綴：

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

updated fiddle

來源

2015-07-08 01:31:42 Kaiido

天啊！我曾經一直禁用imageSmoothing，但並不期望在手機上有不同的行爲。現在一切都很酷。你震驚了我的一天。非常感謝！ – kirschkern

手機上的畫布返回錯誤的顏色

回答

相關問題