看效果：点击空白区域红色1、点击实体区域红色2。分别得到颜色数据（包括透明度数据），控制台蓝色1、2。根据颜色数据即可解决png透明部分的点击问题。

让图片不能点击，分两种

1. 整张图片不能点击。这个很好解决，直接用css样式进行控制即可。在目标图片上添加样式：

.targetPic{

    pointer-events: none;

}

2. 图片透明部分不可点击，实体部分可点击

思路：用canvas画一个同等大小、同一位置的图片。用canvas固有方法判断点击位置是否透明。

// jQuery自己引入, 也可以用js语法书写。1.png为图片资源，自己随便找一个。此处只是抛砖引玉

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>png图片透明区域点击解决方案</title>

        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

                box-sizing: border-box;

            }

        </style>

    </head>

    <body>

        <div id="canvasBox" style="position: relative;border: 1px solid red;">

            <img id="imgPic" src="data:images/1.png" style="opacity: 0;">

            <canvas id="myCanvas" style="position: absolute;top: 0;left: 0;">

                您的浏览器不支持 HTML5 canvas 标签。

            </canvas>

        </div>

        <script>

            // 原始图片的宽高

            var imgW = $("#imgPic").width(); // 宽

            var imgH = $("#imgPic").height(); // 高

            console.log("图片尺寸imgW,imgH", imgW, imgH);

            // 调整canvas画布大小 - 让canvas与原图大小一致

            document.getElementById('myCanvas').width = imgW;

            document.getElementById('myCanvas').height = imgH;

            // 注：不能使用以下更改css的写法，否则图片会被拉扯变形

            // $('#myCanvas').width(imgW);

            // $('#myCanvas').height(imgH);

            // canvas画图

            var c = document.getElementById("myCanvas");

            var ctx = c.getContext("2d");

            var img = document.getElementById("imgPic");

            ctx.drawImage(img, 0, 0, imgW, imgH);

            // 点击事件

            $("#canvasBox").click(function(e) {

                var x = e.offsetX;

                var y = e.offsetY;

                console.log("点击元素相对偏移量x,y", x, y)

　　　　　　　　　 
　　　　　　　　　 // canvas取色

                var imgdata = ctx.getImageData(x, y, 1, 1);

                console.log("点击位置的全部颜色数据[r,g,b,a]", imgdata.data);

                console.log("点击位置的透明度颜色数据(0~255，0代表完全透明，255代表完全不透明) value：", imgdata.data[3]);

            })

        </script>

    </body>

</html>

前端点击png透明部分解决方案的更多相关文章

  1. 前端点击下载excel表格数据

    <el-button type="primary" @click="downloadChartData" size="mini"> ...

  2. 前端点击删除按钮删除table表格的数据

    table.on('tool(hostTable)', function (obj) { var data = obj.data;//须写 if (obj.event === 'del') { var ...

  3. 移动端点击事件300ms延迟问题解决方案——fastclick.js

    移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...

  4. 移动端点击300ms延迟

    转载自:http://www.jianshu.com/p/6e2b68a93c88 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300m ...

  5. 在IOS端点击数字后会调起系统拨号界面

    在IOS端点击数字后会调起系统拨号界面,解决方案: <meta name="format-detection" content="telephone=no" ...

  6. （Vue）移动端点击输入框，弹出键盘，底部被顶起问题

    (Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...

  7. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  8. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  9. 取消a标签或者onclick在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

随机推荐

  1. 【白话科普】《逆局》最终 boss 隐藏自己的方式是？

    二狗子最近在看一个很火的电视剧<逆局>.作为一部悬疑犯罪剧,剧中多个案件交织并进,悬念和转折拉满,让狗子看的直呼过瘾.特别最后一幕,杨副座和主角团同时对 U 盘中的关键证据"器官 ...

  2. 【linux】Ubuntu20.04使用apt安装tomcat9

    Ubuntu20.04使用apt安装tomcat9 前言 系统环境:ubuntu20.04 java版本:openjdk version "11.0.11" 2021-04-20 ...

  3. 第01讲：Flink 的应用场景和架构模型

    你好,欢迎来到第 01 课时,本课时我们主要介绍 Flink 的应用场景和架构模型. 实时计算最好的时代 在过去的十年里,面向数据时代的实时计算技术接踵而至.从我们最初认识的 Storm,再到 Spa ...

  4. vscode自定义代码片段，自定义注释片段（动态时间）

    下载vscode 一.打开vscode,点击左下角设置图标. 二.点击用户代码片段 三.点击新建全局代码片段文件 四.输入自定义代码片段配置文件名,例如:vue.json 五.进行代码片段配置示例如下 ...

  5. iptables的概念与底层原理(详解）

    目录 一:iptables 1.iptables简介 2.什么是防火墙? 3.防火墙种类 二:iptables基本介绍 1.解析内容 三:iptables流程(讲解) 1.流入本机 2.解析(流入本机 ...

  6. Java安全之C3P0利用与分析

    Java安全之C3P0利用与分析 目录 Java安全之C3P0利用与分析 写在前面 C3P0 Gadget http base C3P0.getObject() 序列化 反序列化 Class.forN ...

  7. C++ 微信多开

    应用是如何判断多开 一.通过查找窗口标题或者类名来判断程序是否正在运行. 二.通过互斥对象确定程序是否运行,大多数软件都是使用CreateMutexW 判断多开的. 三.内存映射物理文件,控制多开. ...

  8. iBooker AI+财务提升星球 2020.4 热门讨论

    比特币量化套利的心路历程(附python量化招聘)(分享自知- 如何选择一份好的工作? 你知道为什么大家都想去好公司吗? 不- #财务知识# 可转债套利 辉丰转债128012套利之三个知道- #财务知 ...

  9. JVM垃圾收集器（八）

    一.垃圾收集器 有了前面JVM参数的了解下面来看下JVM的垃圾收集器:如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.  JVM(HotSpot)有7种垃圾收集器,7种垃圾收集 ...

  10. AQS源码一窥-JUC系列

    AQS源码一窥 考虑到AQS的代码量较大,涉及信息量也较多,计划是先使用较常用的ReentrantLock使用代码对AQS源码进行一个分析,一窥内部实现,然后再全面分析完AQS,最后把以它为基础的同步 ...