javascript, 이미지의 특정 색상 영역을 다른 이미지로 대체

문제를 해결하기 위해 웹 전체를 검색했지만 올바른 방법으로 검색하고 있지 않다고 생각하기 시작했습니다.

아래 이미지가 있다고 가정 해 보겠습니다. 제가하려는 것은 파란색 영역을 사용자가 업로드 한 이미지로 바꾸는 것이지만 어떻게해야할지 모르겠습니다.

내가 찾은 가장 가까운 것은 이것 이었지만 이것은 특정 좌표가 제공되는 빨간색 직사각형을 그리는 것입니다. 내가 필요로 하는 것은 해당 좌표 를 찾고 감지 하고 이미지로 대체하는 것입니다. 이것을 본 사람이 있습니까? 저를 올바른 방향으로 가리킬 수 있습니까? 정말 여기에 붙어 있습니다!

참고 : 여기에 넣은 이미지는 질문의 목적을위한 것입니다. 이것은 내 이미지가 아닙니다. 시간 내 주셔서 감사합니다.

편집하다:

좋아, 내가 먼저 여기에 코드를 넣었어야했는데, 그 점에 대해 사과했다. 이전에 말했듯이이 앱은 phonegap 및 jquery 모바일을 사용하여 수행하고 있으며, 앱은 하단에 navbar를 사용하고 있습니다. 페이지의 "미리보기"라고하며 여기에서 이미지 기능이 필요하지만 뭔가 빠졌고 지식이 부족하다고 생각합니다.

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:;">