javascript，用其他图像替换图像上的特定彩色区域

Question

我一直在网上搜索以解决我的问题，但我开始认为我没有以正确的方式搜索。

假设我有下面的图片，我想做的是用用户上传的图片替换蓝色区域，但我不知道该怎么做。

我找到的最接近的是 this但这是在给出特定坐标的位置绘制一个红色矩形，我需要(我认为)是查找/检测这些坐标并将其替换为图像。有没有人遇到过这个？你能为我指出正确的方向吗？真的卡在这里了!

注意:我放在这里的图片只是为了问题的目的，这不是我的图片。谢谢你的时间，问候

编辑:

好的，我应该首先将代码放在这里，对此我深表歉意，正如我之前所说，这是我使用 phonegap 和 jquery mobile 开发的应用程序，该应用程序在底部使用导航栏，其中一个页面称为“预览”，这是我需要图像功能才能工作的地方，但我遗漏了一些东西，我认为是缺乏知识:

我的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>

我的 .js 文件:

$(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;
});

注意:当我运行该应用程序时，phonegap 桌面总是提示:未定义的内容安全策略已修改为:https://ssl.gstatic.com;style-src ' self' 'unsafe-inline' 数据:blob:;media-src *;img-src * 'self' 数据:content:;script-src * 'unsafe-inline' 'unsafe-eval' 数据:blob:;">

Answer 1

好的，我们开始:

将其用作 HTML 结构:

<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>

你可以在容器div上设置任何背景图片，这个不会改变。

图像使用 CSS 剪辑路径，它需要很多前缀，但看起来很棒，你可以给你的图像任何形状，在线有剪辑路径生成器，你甚至可以为剪辑路径设置动画。

我的是这样的:

#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;

}

现在我做了一个文件上传的输入按钮，以及如下的JS函数:

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 = "";
}
}

这是链接

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