Làm cách nào để có được màu phối hợp x, y của một ảnh?

Question

Có cách nào để kiểm tra xem điểm (x, y) đã chọn của hình ảnh PNG có trong suốt không?

Answer 1

Xây dựng dựa trên câu trả lời của Jeff, bước đầu tiên của bạn là tạo đại diện canvas cho PNG của bạn. Sau đây tạo ra một khung hình có chiều rộng và chiều cao giống như hình ảnh của bạn và có hình ảnh được vẽ trên đó.

var img = document.getElementById('my-image'); 
var canvas = document.createElement('canvas'); 
canvas.width = img.width; 
canvas.height = img.height; 
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 

Sau đó, khi người dùng nhấp, sử dụng event.offsetX và event.offsetY để có được vị trí này. Điều này sau đó có thể được sử dụng để có được các điểm ảnh:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

Bởi vì bạn chỉ được lấy một pixel, pixelData là một mảng Bốn entry chứa R của pixel, G, B, và các giá trị A. Đối với alpha, bất cứ điều gì nhỏ hơn 255 đại diện cho một mức độ minh bạch với 0 là hoàn toàn minh bạch.

Dưới đây là ví dụ về jsFiddle: http://jsfiddle.net/thirtydot/9SEMf/869/ Tôi đã sử dụng jQuery để thuận tiện cho tất cả điều này, nhưng không cần thiết phải sử dụng jQuery.

Lưu ý:getImageData thác theo chính sách cùng nguồn gốc của trình duyệt để ngăn chặn rò rỉ dữ liệu, có nghĩa là kỹ thuật này sẽ thất bại nếu bạn bẩn vải với một hình ảnh từ một miền hoặc (Tôi tin, nhưng một số trình duyệt có thể giải quyết này) SVG từ bất kỳ miền nào. Điều này bảo vệ chống lại các trường hợp trang web phân phát nội dung hình ảnh tùy chỉnh cho người dùng đã đăng nhập và kẻ tấn công muốn đọc hình ảnh để nhận thông tin. Bạn có thể giải quyết vấn đề bằng cách phân phối hình ảnh từ cùng một máy chủ hoặc triển khai Cross-origin resource sharing.

Answer 2

Canvas sẽ là một cách tuyệt vời để làm điều này, như @pst đã nói ở trên. Kiểm tra câu trả lời này cho một ví dụ điển hình:

getPixel from HTML Canvas?

Một số mã mà sẽ phục vụ quý khách đặc biệt cũng như:

var imgd = context.getImageData(x, y, width, height); 
var pix = imgd.data; 

for (var i = 0, n = pix.length; i < n; i += 4) { 
    console.log pix[i+3] 
} 

này sẽ đi từng hàng, vì vậy bạn sẽ cần phải chuyển đổi đó vào một x, y và chuyển đổi vòng lặp for thành một kiểm tra trực tiếp hoặc chạy một điều kiện bên trong.

Đọc lại câu hỏi của bạn, có vẻ như bạn muốn có thể nhận được điểm mà người đó nhấp vào. Điều này có thể được thực hiện khá dễ dàng với sự kiện nhấp chuột của jquery. Chỉ cần chạy mã ở trên bên trong trình xử lý nhấp chuột như vậy:

$('el').click(function(e){ 
    console.log(e.clientX, e.clientY) 
} 

Chúng nên lấy giá trị x và y của bạn.

Answer 3

Hai câu trả lời trước đây minh họa cách sử dụng Canvas và ImageData. Tôi muốn đề xuất một câu trả lời với ví dụ chạy được và sử dụng khung xử lý hình ảnh, vì vậy bạn không cần phải xử lý dữ liệu pixel theo cách thủ công.

MarvinJ cung cấp phương thức image.getAlphaComponent (x, y) chỉ trả về giá trị minh bạch cho pixel theo toạ độ x, y. Nếu giá trị này bằng 0, pixel hoàn toàn trong suốt, các giá trị nằm trong khoảng từ 1 đến 254 là các mức trong suốt, cuối cùng 255 sẽ mờ.

Để biểu diễn tôi đã sử dụng các hình ảnh dưới đây (300x300) với nền trong suốt và hai pixel tại tọa độ (0,0) và (150.150).

điều khiển đầu ra:

(0,0): TRANSPARENT
(150.150): NOT_TRANSPARENT

var canvas = document.getElementById("canvas"); 
 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); 
 

 
function imageLoaded(){ 
 
    console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
    console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas>