Liệt kê các màu duy nhất trong một Canvas HTML

Question

Có cách nào hiệu quả để có được danh sách các màu sắc của những gì hiện đang được vẽ trong một Canvas HTML không?

Tôi đoán đúng hạn sẽ là một Palette màu của phức hợp hiện tại

Answer 1

Giả sử bạn có một tài liệu html như sau:

<canvas id="example" width="500" height="300"></canvas> 
<ul id="list"> 
    <h3>Click the canvas to extract colors</h3> 
</ul> 

tôi đã tạo ra một fiddle trong đó bạn có một canvas đã sẵn sàng với một số hình dạng và màu sắc mà chúng tôi sẽ xử lý khi chúng ta nhấp vào nó. Tôi không tạo bộ chọn màu cho bạn, chỉ cần liệt kê vì đó là câu trả lời gốc và sẽ là phương tiện để đạt được phần thứ hai của nó.

Here's the fiddle

Chức năng để trích ra phần màu sắc một danh sách họ được những điều sau đây, tôi tránh sao chép tất cả các công cụ vẽ canvas vì nó chỉ đóng vai trò như ví dụ và không đủ generic.

var colorList = []; //This will hold all our colors 
function getColors(){ 
     var canvas  = document.getElementById('example'); 
     var context  = canvas.getContext('2d'); 
     var imageWidth = canvas.width; 
     var imageHeight = canvas.height; 
     var imageData = context.getImageData(0, 0, imageWidth, imageHeight); 
     var data  = imageData.data; 

     // quickly iterate over all pixels 
     for(var i = 0, n = data.length; i < n; i += 4) { 
      var r = data[i]; 
      var g = data[i + 1]; 
      var b = data[i + 2]; 
      //If you need the alpha value it's data[i + 3] 
      var hex = rgb2hex("rgb("+r+","+g+","+b+")"); 
      if ($.inArray(hex, colorList) == -1){ 
       $('#list').append("<li>"+hex+"</li>"); 
       colorList.push(hex); 
      } 
     }  
} 

này sẽ tạo ra một kết quả có chứa một danh sách dường như không có thứ tự của các giá trị hex đại diện cho thứ tự mà chúng xuất hiện trong hình ảnh của bạn (vì thế 'dường như'), nếu bạn muốn có một bảng chọn màu sắc tuy nhiên bạn có thể muốn hãy xem xét việc sử dụng colorList.sort(); để sắp xếp mảng thành màu đen-trắng.

Lưu ý rằng tôi đang sử dụng chức năng rgb2hex để chuyển đổi các giá trị trả về định dạng hex Tôi giả định mong muốn của bạn, nếu bạn cảm thấy thoải mái khi không sử dụng nó, chức năng như sau:

function rgb2hex(rgb) { 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    function hex(x) { 
     return ("0" + parseInt(x).toString(16)).slice(-2); 
    } 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

và nguồn là this, như tôi đã nói như một bình luận trong các mã, bạn có thể dễ dàng trích xuất các kênh alpha quá nếu bạn cần nhưng tôi đã đi cho kịch bản chung nhất (và đơn giản nhất) mà tôi có thể nghĩ của.