javascript, replace specific colored area on image by other image

Question

I've been searching all over the web to resolve my problem, but I'm starting to think that I'm not searching in the right way.

Let's say I have the image below, what I am trying to do, is to replace the blue area with an image that the user uploads, but I don't know how to do it.

The closest I have found was this but this is drawing a red rectangle where specific coordinates are being given, and what I need (I think) is to find/detect those coordinates and replace them with an image. Has anyone ever came across this? can you point me in the right direction? really stuck here!

Note: the image I have put here is just for the purpose of the question, this is not my image. Thanks for your time, regards

EDIT:

Ok i should have putted the code here in the first place, for that my apologies, and as i said before, this an app that i´m doing using phonegap and jquery mobile, the app is using a navbar on the bottom, and one of the pages is called "preview" and this is where i need the image functionality to work, but i´m missing something, and i think is lack of knowledge:

My index.html:

 <div data-role="page" data-url="preview" id="preview">
      <div data-role="header" style="background-color: rgb(182, 202, 51)" data-position="fixed">
        <h1 id="titlePreview">PREVIEW</h1>
        <a href="#language" id="langBtn" style="width: 20px;height: 20px; background:none;  " href="#" data-icon="comment" data-iconpos="notext" class="ui-btn-left"></a>
      </div>
        <div id="previewSaco" class="containerPreviewSaco">//if i remove this div, the navbar on the bottom disapears. 
          <canvas id="myCanvas" width="200" height="200">//i´m testing with this size, but yes the image is supose to have a 100% with, in fact the image as 1940x2372. 
       </div>
      <div data-role="footer" data-position="fixed">
        <div data-role="navbar" class="ui-bar">
          <ul>
            //in here i have my several "li" for navegation and i think it´s irrelevant for my question.
          </ul>
        </div>
      </div>
    </div>

My .js file:

$(document).on("click", "#btnPreview", function (event) {

    var ctx = document.getElementById('myCanvas').getContext('2d');

    var img = new Image;
    img.onload = function(){
      ctx.drawImage(img,0,0);
      img2.src = 'img/capa.png'; 
    };

    var img2 = new Image;
    img2.onload = function(){
        ctx.globalCompositeOperation = 'destination-over';

      //ctx.scale(x, y);
      //ctx.rotate(angle);
      //ctx.translate(x, y);

      //or

      //ctx.transform(a, b, c, d, e, f);

      ctx.drawImage(img2,0,0);
    };

    var uri1 = 'img/previewSaco1.png'; //this is the main image, which is suppose to load when i click in the page "preview", **and it´s not happening** and i have create the transparent area to were the uploaded image by the user is also suppose to go.

    var uri2 = 'img/capa.png';//this image is a dummy logo to test in the bigger image
    img.src = uri1;
});

Note: when i run the app, the phonegap desktop is always saying this: undefined Content Security Policy has been modified to be: https://ssl.gstatic.com;style-src 'self' 'unsafe-inline' data: blob:;media-src *;img-src * 'self' data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">

Answer 1

Ok here we go:

Use this as the HTML structur:

<div id="imageContainer" class="center">
<h2>Lets go and see how it goes</h2>
<img class="pic" src="https://moltopiccolo.files.wordpress.com/2012/01/cool-
drinks.jpg"> 
</div>

You can set any bg image on the container div, this will not change.

The image uses the CSS clip path, it needs many prefixes, but looks amazing, you can give your image any shape, there are clip path generators online and you can even animate the clip path.

Mine goes like:

#imageContainer img {
-webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 83% 63%, 66% 76%, 
15% 83%, 25% 45%);
clip-path: polygon(17% 13%, 33% 9%, 58% 21%, 84% 20%, 83% 63%, 66% 76%, 15% 
83%, 25% 45%);
-webkit-transition: -webkit-clip-path .6s ease-out;
transition: -webkit-clip-path .6s ease-out;
position:absolute;
border-radius: 5px;
width: 100%;
height:270px;

}

Now I have made an input button for file upload, and the following JS function:

var getval = document.querySelector("#getval");

getval.addEventListener("change", previewFile);

function previewFile() {
var reader = new FileReader();
var bgImage = document.querySelector(".pic");
var file = document.querySelector("input[type=file]").files[0];
reader.onloadend = function() {
bgImage.src = reader.result;
};

if (file) {
reader.readAsDataURL(file); //reads the data as a URL
 } else {
file.src = "";
}
}

Here is the link

https://codepen.io/damianocel/pen/KdobyK

Answer 2

You could use Context2D.globalCompositeOperation = 'destination-over'; Read more about it here GlobalCompositeOperation .

First open you image in an editor. Cut out the area you want to replace. (make pixels transparent). Now load image and write it to the canvas.

Then load the image you want to put in. Set ctx.globalCompositeOperation = 'destination-over'; And write image to the canvas.

You could also set a transform on the canvas before the second write operation to better fit the image.

Example: jsfiddle.net

Edit 1: After loading the first image, you could set transparency based on color. Check this answer for that.