जावास्क्रिप्ट (ईएस 6), 383 377 354 बाइट्स
f=s=>{d=document,i=new Image,i.src=s,i.onload=$=>{c=d.createElement`canvas`,x=c.getContext`2d`,c.width=w=i.width,c.height=h=i.height,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([].concat(...[...t].map((v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)).sort((a,b)=>a.some((v,i)=>k=v-b[i])&&k)).slice(12*w*h)),x.putImageData(D,0,0),d.body.appendChild(c)}}
चलने योग्य डेमो:
f=function(s) {l=[i=new Image].slice,i.crossOrigin="anonymous",i.src=s,i.onload=function($){d=document,c=d.createElement`canvas`,c.width=w=i.width,c.height=h=i.height,x=c.getContext`2d`,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([].concat.apply([],l.call(t).map((v,i)=>i%4?[0,0,0,0]:l.call(t,i,i+4)).sort((a,b)=>a.reduce((A,v,i)=>A||v-b[i],0))).slice(3*t.length)),x.putImageData(D,0,0),d.body.appendChild(c)}}
$("img").click(function() { f(this.src); })
canvas { padding-right: 4px; } img { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/The_Scream.jpg/114px-The_Scream.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Claude_Monet_La_Grenouill%C3%A9re.jpg/193px-Claude_Monet_La_Grenouill%C3%A9re.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg/120px-Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg"><br>
यह कोड कैसे काम करता है इसका उपयोग getImageDataफॉर्म की एक सरणी प्राप्त करने के लिए करना है
[R,G,B,A,
R,G,B,A,
R,G,B,A,
...]
और mapयह फार्म की एक सरणी के लिए
[[R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
...]
ताकि R मान RGBA सेट के सरणियों के लिए मैप किए जाते हैं, और B, G, और A मान न्यूनतम-मूल्य शून्य सरणियों में बदल जाते हैं। जब हम इस सरणी को क्रमबद्ध करते हैं, तो सभी [0,0,0,0]सरणियाँ नीचे की ओर छँट जाती हैं और वास्तविक मूल्य के सरणियाँ सामान्य रूप से शीर्ष पर छाँटती हैं:
[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[0,0,0,0],..., [R,G,B,A],[R,G,B,A],[R,G,B,A],...]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
extract & flatten these sorted pixels
हम सरणी के शीर्ष चौथे को स्केम करते हैं (हमारे द्वारा बनाए गए खाली मूल्यों को खोने के लिए), इसे समतल करें [].concat.apply, और पहले फॉर्म के एक सरणी के साथ फिर से समाप्त करें, लेकिन इस बार, यह क्रमबद्ध है।
व्हाट्सएप और टिप्पणियों के साथ थोड़ा डी-गोल्फ:
f=s=>{
// first, load image, then do everything else onload
i=new Image,
i.src = s,
i.onload=$=>{
// set up the canvas
d=document,
c=d.createElement`canvas`,
w=c.width=i.width,
h=c.height=i.height,
x=c.getContext`2d`,
// draw image to canvas and capture pixel data
x.drawImage(i,0,0),
D=x.getImageData(0,0,w,h),
t=D.data,
// set pixel data to...
t.set(
// the flattened array...
[].concat(...
// that is a mapping of the pixel data...
[...t].map(
// that clumps RGBA families into subarrays
// by replacing every fourth value with [R,G,B,A]
// and all other values to [0,0,0,0]...
(v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)
)
// and is then sorted...
.sort(
// by reducing each array to a positive, negative, or zero
// by comparing R,G,B,& A until the first nonzero difference
(a,b)=>a.some((v,i)=>k=v-b[i])&&k
)
)
// then eliminate the low-sorted empty [0,0,0,0] values we created,
// leaving only the top fourth, with real values
// (note that 3*4*w*h is the same as 3*t.length)
.slice(3*4*w*h)
),
// now that `t` is set, store `D` in canvas
x.putImageData(D,0,0),
// show canvas
d.body.appendChild(c)
}
}
ध्यान दें कि अधिकांश ब्राउज़र बड़ी छवियों के लिए इस कोड को चलाने में विफल हो सकते हैं, क्योंकि यह बड़ी संख्या में तर्कों को पारित करता है [].concat। ब्राउज़र पर्यावरण सभी तर्कों के लिए पर्याप्त स्मृति की अनुमति नहीं है जब, एक वैकल्पिक दृष्टिकोण शीर्ष चौथे सरणियों सरणी पर वापस, के कुल स्कोर के लिए से बाहर RGBA मूल्यों को फिर से मैप करने के लिए है 361 बाइट्स :
f=s=>{d=document,i=new Image,i.src=s,i.onload=$=>{c=d.createElement`canvas`,x=c.getContext`2d`,c.width=w=i.width,c.height=h=i.height,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([...t].map((v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)).sort((a,b)=>a.some((v,i)=>k=v-b[i])&&k).map((v,i,A)=>A[3*w*h+(i>>2)][i%4])),x.putImageData(D,0,0),d.body.appendChild(c)}}
हम बस के [].concat(...{stuff}).slice(12*w*h)साथ की जगह {stuff}.map((v,i,A)=>A[3*w*h+(i>>2)][i%4]))
