canvas
If you call image from computer ...not functioning!
Need to transform your jpg image in base-64 ... from example with this site
and insert code in your html file
imageObj.src = 'image to insert in base-64';
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
function drawImage(imageObj) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 69;
var y = 50;
context.drawImage(imageObj, x, y);
var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
if ( data[i] > 0 && data[i+1] > 0 && data[i+2] > 0 ){
data[i]=255;
data[i+1]=255;
data[i+2]=255;
}
}
// overwrite original image
context.putImageData(imageData, x, y);
}
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = 'image to insert in base-64';
</script>
</body>
</html>