জাভাস্ক্রিপ্ট (ES6), 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],
...]
যাতে আরজিবিএ সেট এর অ্যারেগুলিতে আর মানগুলি ম্যাপ করা হয় এবং বি, জি, এবং এ মানগুলি সর্বনিম্ন-মান শূন্য অ্যারে রূপান্তরিত হয়। আমরা যখন এই অ্যারেটি বাছাই করি তখন সমস্ত [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। যখন ব্রাউজার পরিবেশটি সমস্ত আর্গুমেন্টের জন্য পর্যাপ্ত মেমরির অনুমতি দেয় না, তখন বিকল্প বিকল্পটি মোট চতুর্থ অ্যারেগুলির মধ্যে আরজিবিএ মানগুলি পুনরায় ম্যাপ করার জন্য মোট ৩ score১ বাইটের জন্য :
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])))
