एचटीएमएल 5 और जावास्क्रिप्ट

Question

में कैनवास छवि में सफेद पृष्ठभूमि को हटाने और सफेद पृष्ठभूमि को हटाने के लिए कैसे करें यदि मैं एक छवि लोड करता हूं, तो मैं अपने सभी पिक्सेल के माध्यम से कैसे लूप कर सकता हूं और सफेद रंग (या जो भी रंग मैं निर्दिष्ट करता हूं) को पारदर्शी रूप से बदल सकता हूं ?

मुझे यह कैसे करना है इस बारे में एक विचार है, लेकिन लूपिंग प्रक्रिया 2 डी सरणी की तरह होनी चाहिए, इसलिए इसमें दो लूप शामिल होंगे।

मैं सोच रहा था कि मैं शीर्ष पंक्ति पर पहली पिक्सेल शुरू कर दूंगा, अगर यह एक सफेद पिक्सेल है, तो मैं इसे पारदर्शी कर दूंगा, और 1 पिक्सेल दाहिने ओर ले जाऊंगा, अगर यह सफेद नहीं है, तो मैं रुकता हूं । फिर एक ही पंक्ति में, मैं बाएं से अधिक पिक्सेल से शुरू करता हूं, और सफेद, मैं इसे पारदर्शी बना देता हूं, फिर 1 पिक्सेल बाएं, इत्यादि को स्थानांतरित करता हूं ...

फिर मैं 1 पंक्ति नीचे चला जाता हूं और पूरी प्रक्रिया दोहराएं ..

इस तरह से मैं वास्तविक छवि में किसी भी सफेद पिक्सेल को नहीं हटाता।

Answer 1

getImageData और putImageData का उपयोग करने के लिए यह बहुत आसान है बस ध्यान दें कि आप छवि पर जितना बड़ा प्रदर्शन करते हैं, उस पर एक महत्वपूर्ण महत्वपूर्ण हिट ले सकते हैं। तुम बस अगर वर्तमान पिक्सेल सफेद है निर्धारित करने के लिए की जरूरत है, तो 0.

Live Demo

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    image = document.getElementById("testImage"); 

canvas.height = canvas.width = 135; 
ctx.drawImage(image,0,0); 

var imgd = ctx.getImageData(0, 0, 135, 135), 
    pix = imgd.data, 
    newColor = {r:0,g:0,b:0, a:0}; 

for (var i = 0, n = pix.length; i <n; i += 4) { 
    var r = pix[i], 
      g = pix[i+1], 
      b = pix[i+2]; 

     // If its white then change it 
     if(r == 255 && g == 255 && b == 255){ 
      // Change the white to whatever. 
      pix[i] = newColor.r; 
      pix[i+1] = newColor.g; 
      pix[i+2] = newColor.b; 
      pix[i+3] = newColor.a; 
     } 
} 

ctx.putImageData(imgd, 0, 0);​ 

यह भी अगर आप मान प्रकार फजी की जाँच करने के लिए कर सकता है कहा गया था करने के लिए अपने अल्फा बदल जाते हैं। यह वास्तव में आसान है, बस यह जांचें कि क्या यह एक निश्चित सीमा में है। निम्नलिखित सफेद से शुद्ध सफेद पारदर्शी बंद कर देगा।

// If its white or close then change it 
    if(r >=230 && g >= 230 && b >= 230){ 
     // Change the white to whatever. 
     pix[i] = newColor.r; 
     pix[i+1] = newColor.g; 
     pix[i+2] = newColor.b; 
     pix[i+3] = newColor.a; 
    } 

और जानकारियां

• Pixel manipulation with canvas
• Further info on pixel manipulation with canvas

Answer 2

Loktar एक विधि है कि 'काम करता है' हो सकता है, लेकिन यह प्रदर्शन नहीं बल्कि निराशाजनक है। यदि आपके पास बहुत सारी छवियां हैं, तो यह एक समस्या हो सकती है, आप नहीं चाहते कि आपकी वेबसाइट लैपटॉप/मोबाइल-डिवाइस बैटरी को निकालें, या यदि आप बस गति चाहते हैं। यहां एक विधि है जो कहीं अधिक कुशलता से काम करती है। कार्रवाई में इसके डेमो के लिए "रन कोड स्निपेट" बटन पर क्लिक करें।

'use-strict' 
 
let fileInput = document.getElementById('fileInput'), 
 
    theCANVAS = document.getElementById('theCanvas'), 
 
    theCANVASctx = theCANVAS.getContext('2d'), 
 
    imgTMP = document.getElementById('imgTMP'), 
 
    rComponent = document.getElementById('r'), 
 
    gComponent = document.getElementById('g'), 
 
    bComponent = document.getElementById('b'), 
 
    aComponent = document.getElementById('a'), 
 
    transColor = "rgba(255, 255, 255, 1)", 
 
    transCode = 0xffffffff; 
 

 
let makeColorTransparent = 
 
    function(canvasContext, transparentID, width, height) { 
 
    // where all the magic happens 
 
    let theImageData = canvasContext.getImageData(0, 0, width, height), 
 
     theImageDataBufferTMP = new ArrayBuffer(theImageData.data.length), 
 
     theImageDataClamped8TMP = new Uint8ClampedArray(theImageDataBufferTMP), 
 
     theImageDataUint32TMP = new Uint32Array(theImageDataBufferTMP), 
 
     n = theImageDataUint32TMP.length; 
 
    theImageDataClamped8TMP.set(theImageData.data); 
 

 
    imgDataLoop: while (n--) { 
 
     // effciency at its finest: 
 
     if (theImageDataUint32TMP[n] !== transparentID) 
 
     continue imgDataLoop; 
 
     theImageDataUint32TMP[n] = 0x00000000; // make it transparent 
 
    } 
 
    theImageData.data.set(theImageDataClamped8TMP); 
 
    theCANVASctx.putImageData(theImageData, 0, 0); 
 
    }, 
 
    downloadCanvas = function(downloadfilename) { 
 
    theCanvas.toBlob(function(theIMGblob) { 
 
     var thedataURL = URL.createObjectURL(theIMGblob), 
 
     theAtagLink = document.createElement('a'); 
 

 
     theAtagLink.download = '(proccessed)' + downloadfilename; 
 
     document.body.appendChild(theAtagLink); 
 
     theAtagLink.href = thedataURL; 
 
     theAtagLink.click(); 
 
    }); 
 
    }; 
 

 
fileInput.onchange = function(fileevent) { 
 
    let efiles = fileevent.target.files, 
 
    localTransColor = transColor, 
 
    localTransCode = transCode; 
 

 
    let cur = efiles.length, 
 
    nextfile = function() { 
 
     if (!cur--) { 
 
     imgTMP.src = ''; 
 
     return; 
 
     } 
 
     let fr = new FileReader(); 
 
     console.log(efiles[cur]); 
 
     fr.onload = function(dataevt) { 
 
     fr.onload = null; 
 
     let theArrayBuffer = dataevt.target.result, 
 
      theblob = new Blob([theArrayBuffer]); 
 
     imgTMP.src = URL.createObjectURL(theblob); 
 
     imgTMP.onload = function() { 
 
      imgTMP.onload = null; 
 
      let theImagesWidth = imgTMP.naturalWidth, 
 
      theImagesHeight = imgTMP.naturalHeight; 
 

 
      theCANVAS.width = theImagesWidth; 
 
      theCANVAS.height = theImagesHeight; 
 

 
      theCANVASctx.fillStyle = localTransColor; 
 
      theCANVASctx.clearRect(
 
      0, 
 
      0, 
 
      theImagesWidth, 
 
      theImagesHeight 
 
     ); 
 
      theCANVASctx.drawImage(imgTMP, 0, 0); 
 
      makeColorTransparent(
 
      theCANVASctx, 
 
      localTransCode, 
 
      theImagesWidth, 
 
      theImagesHeight 
 
     ); 
 

 
      //now, download the file: 
 
      downloadCanvas(efiles[cur].name); 
 

 
      //Finally, procced to proccess the next file 
 
      nextfile(); 
 
     }; 
 
     }; 
 
     fr.readAsArrayBuffer(efiles[cur]); 
 
    }; 
 
    nextfile(); 
 
} 
 

 
rComponent.oninput = gComponent.oninput = 
 
    bComponent.oninput = aComponent.oninput = 
 
    function() { 
 
    rComponent.value = Math.max(0, Math.min(rComponent.value, 255)); 
 
    gComponent.value = Math.max(0, Math.min(gComponent.value, 255)); 
 
    bComponent.value = Math.max(0, Math.min(bComponent.value, 255)); 
 
    aComponent.value = Math.max(0, Math.min(aComponent.value, 255)); 
 
    }; 
 

 
rComponent.onchange = gComponent.onchange = 
 
    bComponent.onchange = aComponent.onchange = 
 
    function() { 
 
    transColor = 'rgba(' + 
 
     rComponent.value + ',' + 
 
     gComponent.value + ',' + 
 
     bComponent.value + ',' + 
 
     aComponent.value/255 + ',' + 
 
     ')'; 
 
    // numberical equivelent of the rgba 
 
    transCode = 
 
     rComponent.value * 0x00000001 + 
 
     gComponent.value * 0x00000100 + 
 
     bComponent.value * 0x00010000 + 
 
     aComponent.value * 0x01000000; 
 
    };

<pre>rgba(<input type="number" value="255" max="255" min="0" step="1" id="r" maxlength="3" minlength="1" />,<input type="number" value="255" max="255" min="0" step="1" id="g" maxlength="3" minlength="1" />,<input type="number" value="255" max="255" min="0" step="1" id="b" maxlength="3" minlength="1" />,<input type="number" value="255" max="255" min="0" step="1" id="a" maxlength="3" minlength="1" />)</pre> 
 

 
<input type="file" name="filefield" multiple="multiple" accept="image/*" id="fileInput" /><br /> 
 
<img id="imgTMP" /> 
 
<canvas id="theCanvas"></canvas> 
 

 
<style>input[type=number]{width: 3em}#theCanvas {display: none}</style>

Answer 3

आप एक छवि प्रसंस्करण ढांचे का उपयोग मैन्युअल पिक्सेल डेटा को संभाल नहीं कर सकते हैं।

image.setColorToAlpha(0, 0); 

इनपुट छवि:

परिणाम

MarvinJ के मामले में, एक रंग को देखते हुए, आप एक ही लाइन के साथ पारदर्शी करने के लिए सभी पिक्सल सेट कर सकते हैं:

Runnable उदाहरण:

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

 
function imageLoaded(){ 
 
\t image.setColorToAlpha(0, 0); \t 
 
\t image.draw(canvas); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script> 
 
<div style="width:400px; height:352px; background-image: linear-gradient(45deg, #808080 25%, transparent 25%), 
 
\t linear-gradient(-45deg, #808080 25%, transparent 25%), 
 
\t linear-gradient(45deg, transparent 75%, #808080 75%), 
 
\t linear-gradient(-45deg, transparent 75%, #808080 75%); 
 
\t background-size: 20px 20px; 
 
\t background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"> 
 
<canvas id="canvas" width="400" height="352"></canvas> 
 
</div>