Create opacity map

Generate opacity texture from transparent image

by Milan Gladiš

HTML

<img id="defaultImage" src=""><br>
<img id="image" src=""><br>
<input type="file" id="imageLoader" name="imageLoader"/><br>
<canvas id="imageCanvas" style="display: none"></canvas>

CSS

img {
  background: green;
}

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
    
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
        		
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            ctx.drawImage(img,0,0, this.naturalWidth, this.naturalHeight);
            document.getElementById("defaultImage").src = canvas.toDataURL("image/png");
            
            var imageData = ctx.getImageData(0,0,this.width,  this.height);
            var data = imageData.data;
          
          	 for (var i = 0; i < data.length; i += 4) {
                data[i] = data[i+3];
                data[i+1] = data[i+3];
                data[i+2] = data[i+3];
                data[i+3] = 255;
            }
            ctx.putImageData(imageData, 0, 0);
            document.getElementById("image").src = canvas.toDataURL("image/png");
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}