White Background to Alpha - MarvinJ

by Gabriel Ambrósio Archanjo

HTML

by <a href="https://www.marvinj.org">www.marvinj.org</a></br>
<script src="https://www.marvinj.org/releases/marvinj-1.0.js"></script>

<div class="flex">
<div class="inline">
<img src="https://i.imgur.com/P2xzsUY.jpg"></img>
</div>
<div class="divA inline">
  <div class="divB">
    <canvas id="canvas" width="400" height="220"></canvas>
  </div>
</div>
</div>

CSS

body{font-size:12px;}

img{
  max-width:400px;
}

.divA{
  width:400px;
  height:220px;
  background-color:#aaaaaa;
}

.divB{
  width:400px;
  height:220px;
 background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);
}

.flex{
  display:flex;
}

.inline{
  display:inline-block;
}

JavaScript

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

function imageLoaded(){
   whiteToAlpha(image);
   Marvin.alphaBoundary(image.clone(), image, 8);
   Marvin.scale(image.clone(), image, 400);
   image.draw(canvas);
}

function whiteToAlpha(image){
	for(var y=0; y < image.getHeight(); y++){
  
  	for(var x=0; x<image.getWidth(); x++){
    	var r = image.getIntComponent0(x,y);
      var g = image.getIntComponent1(x,y);
      var b = image.getIntComponent2(x,y);
      
      if(r >= 250 && g >= 250 && b >= 250){
				image.setIntColor(x, y, 0);
      }
    }
  }
}