个人中心
gpt4 book ai didi

web - 检测网页图像中的图形区域

转载 作者：行者123 更新时间：2023-12-05 01:02:29 24 4
gpt4 key购买 nike

我一直在绕圈子打很多，所以我会在这里解释我的问题，并希望在整个画面中，有人有一些想法。使用以下图像:

Model with Regions

我需要在她的眼睛和嘴巴上的 Blob 上检测鼠标悬停，并以一般形式解决这个问题。模型和 blob 位于两个不同的层上，因此我可以生成一个只有 blob 的图像，一个只有模型的图像，并以某种方式在 blob 上同步虚拟光标，同时它实际上悬停在模型上。

我也可以制作 Blob 多边形，用于 HitTest ，但我认为颜色 HitTest 会容易得多。如果我打蓝色，我就在她的嘴上，我会展示口红图片；如果我打粉红色，我会在她的眼睛上方，并显示眼妆图像。

在座各位学友有什么建议和对话？

最佳答案

更简单的方法是将图层图像加载到 Canvas 中，然后获取其所有像素数据。当鼠标悬停在模型图像上时，找出当前选择的颜色，如果与之前的颜色不同，则触发事件以指示选择已更改。

这是一个例子，随意玩弄它；但请注意，它不能处理所有情况:

  • 如果图层和模型图片大小不一样怎么办
  • 如果图层和模型图片的宽高比不一样怎么办
  • 如果你想使用一些 alpha channel 怎么办(这个例子没有考虑到它)


    • $(function() {

      /* we load all the image data first */
      var imageData = null;
      var layerImage = new Image();
      layerImage.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        context = canvas.getContext('2d');
        context.drawImage(this, 0, 0, canvas.width, canvas.height);
        imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
      };

      /* it's easier to set the image data for example as base64 data */
      layerImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA5klEQVR4Xu3WMQ7CMAwF0IxcgCtw/xsGdWApItWHKorLQ8qESe2HbWjNiwABAgQIECBAgAABAgQIECBAgMAUgd4e/ehMSeTMh4wK2j/nqPjt/TNzm3IXgEFb64CdgBG44hKcsmg8pKDAvbf+7SlY7nvK3xb/+lx5BAA/jMCGpwOqC/z9CFT/ApfP/9Z6T87yBaUJJsVvsen9y8cDMAJ2gCWY7IHll1qaYFL84a9AelnF+CFwxYLSnAGMBFLNivE6QAcMBCq2dJqzETACRuCzQDpPFePTv9riCRAgQIAAAQIECBC4nsATagY67TVyuhAAAAAASUVORK5CYII=";

      var pColor = null;

      /* on mouse over the model image */
      $("#model").mousemove(function(event) {
        /* we correct the offset */
        var offset = $(this).offset();
        var relX = event.pageX - offset.left;
        var relY = event.pageY - Math.round(offset.top);

        /* and get the pixel values at this place (note we are not keeping the alpha channel; it's your decision whether or not it is valuable */
        var pixelIndex = relY * layerImage.width + relX;
        var dataIndex = pixelIndex * 4;
        var color = [imageData[dataIndex], imageData[dataIndex + 1], imageData[dataIndex + 2]];

        if (pColor == null) {
          /* we trigger when first entering the image */
          $(this).trigger("newColor", {
            message: "Initial layer color",
            data: color
          });
        } else if (pColor[0] != color[0] || pColor[1] != color[1] || pColor[2] != color[2]) {
          /* we trigger if the new position is a new color in the layer image */
          $(this).trigger("newColor", {
            message: "Changed layer color",
            data: color
          });
        }
        pColor = color;
      });

      /* some small help to convert rgb to css colors */
      function rgb2hex(red, green, blue) {
        var rgb = blue | (green << 8) | (red << 16);
        return '#' + (0x1000000 + rgb).toString(16).slice(1)
      }

      /* there you have the new layer color event management; for the example sake we change the color of some text */
      $("#model").on("newColor", function(event, eventData) {
        $("#selector").css("color", rgb2hex(eventData.data[0], eventData.data[1], eventData.data[2]));
      });
    });
    img {
      border: 1px solid silver
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <body>
      <h4>Model image</h4>

      <img id="model" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAtdJREFUaEPtmS2PwkAQhhGQEASEBIECFAJBgoCAxpDgsWBxSP4lPwGJRCLv5m4uk6Xt7s5He9dLFst2+z7vfG3bxsc//zX+uf6PBPDXEUwRSBEwOpBSyGig+fIUAbOFxg3KjMD1em3EfqvV6vl8GkW7l5cJsF6vY/p//i8RQwbwer22221U5W63K/T4fr93u1263LdMFB8ZAEc96BsOhwER5WIIAMB+NO92u4lMKlw8m80oFJaMEgCg/ZADdvW0A2GMRiPdtgKAEu13tUJG4c667sQFoBap8yl8FdiPDIqyZgFQ9oerU83mlrV0ExaAJfshdKfTiSMLg8BZKR5k4ewPS4TpNplMOLKqAqD88YngSwxjVAVgyR+O8bSmKoCKumeerVoAkZe6xQnA45vCGH7rfGuIFbVRBUDgvO2bCefzWXEj4I8PDtyXOYzQ0cVi4WMonAmWSR8HIDWbzUZ33grXNKifTqcA3Ov1FNUfB3AdhdOv4h6+S0D6fr/HWLVaLd1jBgsAFNChV5RLAVpKelDfbrd16lk1QCLczLZjoPEW6SiMG4FAdUphXO/tCSkD8GEwi9uVDvZLny6gZg6HQ8YvDYBr23g8DnR9319S6XjH5XIJGw4Gg7fxZwwiFDfsyGfQSQeRvnci1ghE+XXz1d3W7bb5WVF3ABpzvpZVdwDM+8CYqyOAmzPRx6l6ARyPx3w/CNd9jQDgNEHq+RO6LgCgvt/vA8Dlcol2tjLnQPRmhW00n+W4rNPpPB6P6J5cAHofqnhlSffIAIDT8/k8n+jNZhO8l6qPHOYKPxlJ3+Wj1swpqJRzKPc06n6JIOf4GBmz1U778kpWxJmvQ9EjEOQergEX1KegcEnIAHAvPgaIRgDpMwO/jjUA/N1hJT3Hia7iL64c4KtRfP/4mkQrq9r3rVUngEBMUgQYCZtqIGRSSqGUQgwHUgoZTSrrQ3KhjN8oYiN/+PJPqpb83Htu7qcAAAAASUVORK5CYII="
      />

      <p>You are pointing at some <strong><span id="selector">color</span></strong>
      </p>

      <hr/>
      <h4>Layer image (reference only, not displayed in page)</h4>

      <img id="layer" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA5klEQVR4Xu3WMQ7CMAwF0IxcgCtw/xsGdWApItWHKorLQ8qESe2HbWjNiwABAgQIECBAgAABAgQIECBAgMAUgd4e/ehMSeTMh4wK2j/nqPjt/TNzm3IXgEFb64CdgBG44hKcsmg8pKDAvbf+7SlY7nvK3xb/+lx5BAA/jMCGpwOqC/z9CFT/ApfP/9Z6T87yBaUJJsVvsen9y8cDMAJ2gCWY7IHll1qaYFL84a9AelnF+CFwxYLSnAGMBFLNivE6QAcMBCq2dJqzETACRuCzQDpPFePTv9riCRAgQIAAAQIECBC4nsATagY67TVyuhAAAAAASUVORK5CYII="
      />
    </body>

    关于web - 检测网页图像中的图形区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26322677/

    24 4 0
    文章推荐： angularjs - 以 Angular 动态设置剑道窗口标题和内容，然后在单击表单上的按钮时打开窗口
    文章推荐： xcode - 应用突然无法在设备上运行
    文章推荐： .net - 在 Razor 网页的 View 中调用方法
    文章推荐： asp.net-mvc - MVC 按钮单击在新窗口中打开
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com