Tôi đã viết chỉ để giải trí. Nó là một plugin jquery, nếu bạn không sử dụng nó, bạn có thể đọc nó cho một số gợi ý. Nếu có một số lỗi trong khi gọi tới get_colors một mảng được đặt trong giá trị trả về để giữ lỗi, nó trả về một mảng đối tượng, các đối tượng này là biểu đồ của hình ảnh (một mục trong mảng cho mọi phần tử đã chọn).
(function($, window, document, undefined){
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext){
$.fn.get_colors = function(){
var rv = [];
this.each(function(){
var tagname = this.tagName.toLowerCase();
if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){
//something bad can happend when drawing the image
try{
var w = this.getAttribute('width');
var h = this.getAttribute('height');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
var ctxt = canvas.getContext('2d');
if (ctxt){
ctxt.drawImage(this, 0, 0);
var imagedata = ctxt.getImageData(0, 0, w, h);
var data = imagedata.data;
//log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h);
var obj = {};
var color = '';
var r = 0, g = 0, b = 0, a = 0;
var pix = data.length;
for (pix--; pix > 2; pix-=4){
//a = data[pix - 0];
b = data[pix - 1];
g = data[pix - 2];
r = data[pix - 3];
if (r < 16) r = '0' + r.toString(16);
else r = r.toString(16);
if (g < 16) g = '0' + g.toString(16);
else g = g.toString(16);
if (b < 16) b = '0' + b.toString(16);
else b = b.toString(16);
//if (a < 16) a = '0' + r.toString(16);
//else a = a.toString(16);
//color = r + g + b + a;
color = r + g + b;
if (obj[color] > 0) ++obj[color];
else obj[color] = 1;
}
rv.push(obj);
imagedata = data = obj = null;
}
ctxt = null;
} catch(error){
if (!rv.errors){
rv.errors = [];
}
rv.errors.push(error);
}
}
});
return rv;
};
} else{
$.fn.get_colors = function(){
throw new Error('canvas element support required!');
};
}
})(jQuery, this, this.document);
Nếu một tài liệu với chỉ một hình ảnh với 4 pixel (2x2) "# ff0000, # 00FF00, # 0000FF, # ff0000", nếu bạn làm $('img').get_colors(); nó trả [{"ff0000": 2, "0000ff": 1, "00ff00":1}].
Để tìm hiểu cách sử dụng phần tử canvas bạn có thể xem MDN và tại số specs để phát triển chi tiết về thao tác pixel.
Chỉnh sửa: đã nhận xét một dòng tôi đang sử dụng khi gỡ lỗi.
Không Không, không tải lên. Chỉ cần lấy màu khỏi hình ảnh trong trang – aurel
Chỉ cần vẽ hình ảnh trên phần tử canvas và tự kiểm tra. Không biết những gì bạn mong đợi là sự trở lại của 'get_colors'. – Prusse
Chưa từng sử dụng canvas trước đây (tôi đã bắt đầu xem html5) vì vậy Im sẽ thử xem - Bạn có biết bất kỳ tài nguyên nào có thể bao gồm hiệu ứng bạn đang nói về @Prusse – aurel