🙇🏻 👰🏿 🐥 कैनवस के साथ काम करने वाले वेब वर्कर्स 📄 👫 🎧

मुख्य विचार

एक ब्राउज़र में मल्टीथ्रेडेड इमेज प्रोसेसिंग कैसे करें, यह सीखने की प्रक्रिया में, कई को कैनवास में वेब वर्कर्स के परिणाम प्रदर्शित करने की समस्या का सामना करना पड़ता है। यह मुख्य रूप से इस तथ्य के कारण है कि डोम तत्वों को वेब कार्यकर्ता को पारित नहीं किया जा सकता है। समाधान getImageData () का उपयोग करने के लिए हो सकता है। यह आलेख एक अलग स्ट्रीम में ब्लर फ़िल्टर को संसाधित करने के उदाहरण पर इस तकनीक के उपयोग के एक विशिष्ट उदाहरण का वर्णन करता है।

इसके लिए हमें 2 फाइलें चाहिए: index.html और filter_worker.js

पेज लेआउट

Index.html में आपको एक कैनवस तत्व, ब्लर रेडियस और स्पैन को निर्दिष्ट करने के लिए एक फॉर्म रखने की आवश्यकता होती है जिसमें हम वर्तमान फ़िल्टर ऑपरेशन को प्रतिशत में रिकॉर्ड करेंगे।

एचटीएमएल

<!DOCTYPE html> <html> <head> <title>Web Worker</title> <style> #my_canvas { border: #00ff00 solid 1px; } </style> </head> <body> <form> <input type="text" id="radius" value="5" /> <input type="button" onclick="draw('my_canvas')" value="Draw" /> </form><br> <canvas id="my_canvas" width="200" height="200"></canvas><br> <span id="load_info"></span> </body> </html>

जावास्क्रिप्ट

एक जावास्क्रिप्ट फ़ंक्शन जोड़ें जिसमें हम कैनवास को कॉन्फ़िगर करते हैं और वेब कार्यकर्ता को कॉल करते हैं।

जावास्क्रिप्ट

 //   var img = new Image(); img.src = "Malevich.jpg"; function draw(canvas_name) { //    Web Workers? if(!window.Worker) { return alert('    Web Workers!'); } //   var canvas = document.getElementById(canvas_name); var ctx = canvas.getContext("2d"); //   ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height); var worker = new Worker('filter_worker.js'); //   worker worker.postMessage({ //  ImageData  worker imagedata: ctx.getImageData(0, 0, canvas.width, canvas.height), width: canvas.width, height: canvas.height, radius: document.getElementById("radius").value }); worker.onmessage = function (event) { if (event.data.status === 'complite') { //   Image Data   canvas ctx.putImageData(event.data.imagedata,0,0); } else { //     ,     document.getElementById("load_info").innerHTML = event.data.progress + "%"; } } }

WebWorker

ब्लर फ़िल्टर एल्गोरिथ्म निम्नानुसार काम करता है: वर्तमान पिक्सेल से एक निश्चित त्रिज्या के भीतर गिरने वाले सभी पिक्सेल के रंगों के योग का औसत अंक प्राप्त करें और इसमें आउटगोइंग रंग लिखें।

WebWorker

 onmessage = function (event) { var imagedata = event.data.imagedata; var width = event.data.width; var height = event.data.height; var radius = event.data.radius; var sum_r, sum_g, sum_b, sum_a; //  ,     var scale = (radius * 2 + 1) * (radius * 2 + 1) var num_pixels = width * height; function getPixel(x, y) { if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (x >= width) { x = width - 1; } if (y >= height) { y = height - 1; } var index = (y * width + x) * 4; return [ imagedata.data[index + 0], imagedata.data[index + 1], imagedata.data[index + 2], imagedata.data[index + 3], ]; } function setPixel(x, y, r, g, b, a) { var index = (y * width + x) * 4; imagedata.data[index + 0] = r; imagedata.data[index + 1] = g; imagedata.data[index + 2] = b; imagedata.data[index + 3] = a; } var lastprogress = 0; for (y = 0; y < height; y++) { for (x = 0; x < width; x++) { var progress = Math.round((((y * width) + height) / num_pixels) * 100); if (progress > lastprogress) { lastprogress = progress; postMessage({status: 'progress', progress: progress}); } sum_r = 0; sum_g = 0; sum_b = 0; sum_a = 0; for (var dy = -radius; dy <= radius; dy++) { for (var dx = -radius; dx <= radius; dx++) { var pixeldata = getPixel(x + dx, y + dy); sum_r += pixeldata[0]; sum_g += pixeldata[1]; sum_b += pixeldata[2]; sum_a += pixeldata[3]; } } //    (     //     setPixel( x, y, Math.round(sum_r / scale), Math.round(sum_g / scale), Math.round(sum_b / scale), Math.round(sum_a / scale) ); } } postMessage({status: 'complite', imagedata: imagedata}); }

निष्कर्ष:

इस उदाहरण के आधार पर, आप अपनी स्वयं की इमेज प्रोसेसिंग स्क्रिप्ट बना सकते हैं जो वेब पेज को फ्रीज करने का कारण नहीं बनती है।

कैनवस के साथ काम करने वाले वेब वर्कर्स

मुख्य विचार

पेज लेआउट

जावास्क्रिप्ट

WebWorker

निष्कर्ष:

More articles: