点击透明图像像素

2024-04-01

我不希望图像的透明部分可点击。
我发现<map>但坐标以像素为单位,我想做一些响应式的事情。 另一个问题:我找不到为什么第一张图片的底部和第二张图片的顶部之间有一些像素。

https://jsfiddle.net/tsfxy84u/ https://jsfiddle.net/tsfxy84u/

.container {
  width: 90%;
  margin: 0 auto;
  overflow: auto;
}
.left {
  float: left;
}
.right {
  float: right;
}
.resize {
  width: 50%;
}
img {
  width: 50%;
}
.two {
  -webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}
.one {
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}
<section class="container">
  <a class="two" href="#"><img src="_img/test.png" alt="image test" /></a>
  <div class="resize left">
    <h1>Mama mia</h1>
    <p>blabla</p>
  </div>
</section>
<section class="container">
  <div class="resize right">
    <h1>Mama mia</h1>
    <p>blabla</p>
  </div>
  <a class="one" href="#"><img src="_img/test.png" alt="image test" /></a>
</section>

非常感谢你的帮助。


打破常规思考问题:

  1. 如果在点击坐标像素 Alpha 通道是透明的 (0)- 暂时隐藏该图像,并获取下一个elementFromPoint(x, y)← 重复•1
  2. 如果阿尔法是不透明- 获取图像数据并显示所有临时隐藏的图像。
  3. 如果目标不是 IMG - 显示所有隐藏图像(未单击可见图像像素)

PS:代替Element.hidden我们可以使用CSSpointer-events: "[none, auto]"

const ctx = document.createElement("canvas").getContext("2d");
let stack = [];

function transPNG(ev, target) {
  if(!target.offsetParent) return;

  // Get click coordinates
  const isImage = /img/i.test(target.tagName),
    x = ev.pageX - target.offsetParent.offsetLeft,
    y = ev.pageY - target.offsetParent.offsetTop,
    w = ctx.canvas.width = target.width,
    h = ctx.canvas.height = target.height;
  let alpha;

  // Draw image to canvas and read Alpha channel value
  if (isImage) {
    ctx.drawImage(target, 0, 0, w, h);
    alpha = ctx.getImageData(x, y, 1, 1).data[3]; // [0]R [1]G [2]B [3]A
  }

  if (alpha === 0) {          // If pixel is transparent...
    target.hidden = 1         // Make image hidden
    stack.push(target);       // Remember
    return transPNG(ev, document.elementFromPoint(ev.clientX, ev.clientY)); // REPEAT
  } else {                    // Not transparent! We found our image!
    stack.forEach(el => (el.hidden = 0)); // Show all hidden elements
    stack = [];               // Reset stack
    console.clear(); console.log(target.getAttribute("alt"));
    // document.location = target.dataset.href; // if you want to navigate to HREF
  }
}

const pngs = document.querySelectorAll("#composite img");
pngs.forEach(img =>img.addEventListener("click", ev => transPNG(ev, ev.currentTarget)));
#composite { position: relative; width: 60px; height: 60px;}
#composite img { position: absolute; top: 0; }
Three overlapping PNG images. Click to explore:<br>
<div id="composite">
  <img alt="Red paint" data-href="page3.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzczNTY0QjREQkExMTFFOThDNjBEQUI0RjNDMzI4QTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzczNTY0QjVEQkExMTFFOThDNjBEQUI0RjNDMzI4QTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NzM1NjRCMkRCQTExMUU5OEM2MERBQjRGM0MzMjhBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NzM1NjRCM0RCQTExMUU5OEM2MERBQjRGM0MzMjhBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ptm+qYEAABGFSURBVHja7FpLj13Z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"/>
  <img alt="Black birds" data-href="page2.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUNBRTlGOEJEQkExMTFFOUE0N0Q4RDZBRkE1MTUwMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUNBRTlGOENEQkExMTFFOUE0N0Q4RDZBRkE1MTUwMzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5Q0FFOUY4OURCQTExMUU5QTQ3RDhENkFGQTUxNTAzMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5Q0FFOUY4QURCQTExMUU5QTQ3RDhENkFGQTUxNTAzMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpqX8YAAAAZ/SURBVHja7FppbFRV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"/>
  <img alt="Cute bird" data-href="page1.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjFCNUZDMjdEQkExMTFFOUI5NDU4N0RBRkNBNjJCQkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjFCNUZDMjhEQkExMTFFOUI5NDU4N0RBRkNBNjJCQkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MUI1RkMyNURCQTExMUU5Qjk0NTg3REFGQ0E2MkJCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MUI1RkMyNkRCQTExMUU5Qjk0NTg3REFGQ0E2MkJCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlUbcQUAABl5SURBVHja5Ht5rF31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"/>
</div>

上面的演示仅适用于 1:1 未转换(使用 CSSobject-fit、浏览器调整大小等)图像。如果这是您的情况,那么您应该考虑改进在画布上绘制精确图像尺寸/位置的逻辑。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

点击透明图像像素 的相关文章

  • 打开图层地图,经纬度获取地址

    我正在尝试获取带有经度和纬度的地址 城市 邮政编码 街道地址 但我不知道如何获取 我正在使用开放图层 当我单击地图的一部分时 会获取该位置的经度和纬度 有人有解决方案吗 div class map div
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • jQuery:在方法上取消绑定 jQuery 2.0

    在 jQuery 1 9 中live 已被弃用 因此新方法变为 document on mouseover blahblahfunc 我无法解除 blahblahfunc 的绑定 通过 unbind mouseover mouseout c
  • 如何在alert()之后给予focus()?

    我有类似的东西
  • RxJS 将三元组中的属性组合到表中

    我有一项服务生成类似于三元组的对象 它们将采用以下格式 country attribute value Example country usa attribute population value 100 country mexico at
  • Ember 未在生产环境中加载某些图像

    我有一个 Ember cli 1 13 应用程序 它在公共目录中存储了很多图像 现在 它将正确加载除特定组件中的图像之外的所有图像 该组件的调用方式如下 list item url list url name List Name price
  • 有没有办法在 Blazor 中隐藏 div?

    我正在使用 Blazor 并且想在按下导航栏切换器图标时隐藏侧边栏 列表项崩溃了 但问题是 div 仍然存在 div class page div class sidebar div class nav top row pl 4 navba
  • JavaScript 中 == 和 === 的区别[重复]

    这个问题在这里已经有答案了 有什么区别 and 在 JavaScript 中 我也见过 and 运营商 还有更多这样的运营商吗 看看这里 http longgoldenears blogspot com 2007 09 triple equ
  • 在 html 中创建子页面 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 假设我有一个网站http www example com http www example com 如何为此页面创建更多子页面 即 w
  • 尝试利用?

    我看到我的 nopCommerce 网站记录了以下搜索 ADw script AD4 alert 202 ADw script AD4 我有点好奇他们想要完成什么 我搜索了一下 似乎是ADw script AD4 以 UTF7 编码为
  • (jQuery) 在 cookie 中单击时保存复选框状态

    关于此功能有很多主题 但我似乎无法让它工作 我在谷歌上搜索了这个具体案例 有一堆链接让我来到这里 但奇怪的是我似乎无法让它们工作 我所做的唯一工作如下 http dl dropbox com u 2238080 a old z htm ht
  • 无法在heroku上推送node.js应用程序

    我尝试在heroku 上推送我的node js 应用程序 但是 无法检测到此应用程序的默认语言 我什至尝试过heroku buildpacks set heroku nodejs 但还是无法推动 Counting objects 31 do
  • 脚本和链接标签的简写 http:// 为 // ?有人以前看过/用过这个吗?

    问题如下 如果您使用 addthis 共享按钮 查看任何网站 一旦您浮动在 addthis 按钮上 并且加载了所有必需的资源 请使用 firebug 或 chrome 检查器查看文档的正文 不是源代码 而是屏幕上的实际文档 对象检查器 你会
  • 监听鼠标事件……除了 div 的溢出:滚动滚动条?

    关于如何监听 mousedown 的任何建议 document exceptdiv 的溢出 滚动滚动条 我不确定滚动条是什么元素is为了参考它 您可以使用以下命令自行检查目标 document on mousedown function e
  • 在客户端将大文件(> 2GB)压缩为 ZIP

    我使用构建上传工具node js and socket io 因为他们通常会上传令人难以置信的巨大文件 而普通的上传表单将无法工作 问题是他们想在发送之前将文件压缩成zip 以提高传输效率 我一直在研究压缩方法 例如JSZip http s
  • Dojo 是否可以与其他 JS 框架结合?

    我们使用 Dojo 1 9 3 作为构建单页面应用程序的 JS 框架 然而 我们在 Dojo 的怪癖上花费了太多时间 因此即使是简单的任务也需要很长时间才能实现 由于缺乏适当的文档 我们经常不得不求助于阅读源代码 然后实施解决方法 我觉得如
  • 使用 php 将 HTML 输出转换为纯文本

    我正在尝试将示例 HTML 输出转换为纯文本 但我不知道如何操作 我使用 file get contents 但我尝试转换的页面返回的结果最相似 raw http localhost guestbook profiles php file
  • 推荐的增长缓冲区的方法?

    假设我正在 Node js 中构造一个可变长度的字符串或一系列字节 buf write 的文档说 https nodejs org api buffer html buffer buf write string offset length
  • JQuery 可拖动图像并保存位置

    好吧 这变得很尴尬 已经搜索并尝试了大约 5 个小时 但我只是在兜圈子 场景很简单 它是用户个人资料的标题图像 可以将其拖动到某个位置 然后将图像的顶部位置保存到数据库中 感谢 Beetroot Beetroot 的 遏制 父级 我开始关注
  • Google Universal Analytics - 命令被忽略

    我正在使用 Google Universal Analytics 来跟踪页面浏览量 当我导航到具有 Google Analytics 网站实时功能的页面时 我可以看到 因此我的代码一定可以正常工作 然而 Chrome 一直在控制台中显示 I

随机推荐