记录一个heatmap.js在strict模式下的bug

news2024/9/28 0:03:48

ImageData的data属性只读,无法修改
ImageData的data属性只读,无法修改
出问题的在原始代码的490行~528行

var img = this.shadowCtx.getImageData(x, y, width, height);
      var imgData = img.data;
      var len = imgData.length;
      var palette = this._palette;


      for (var i = 3; i < len; i+= 4) {
        var alpha = imgData[i];
        var offset = alpha * 4;


        if (!offset) {
          continue;
        }

        var finalAlpha;
        if (opacity > 0) {
          finalAlpha = opacity;
        } else {
          if (alpha < maxOpacity) {
            if (alpha < minOpacity) {
              finalAlpha = minOpacity;
            } else {
              finalAlpha = alpha;
            }
          } else {
            finalAlpha = maxOpacity;
          }
        }

        imgData[i-3] = palette[offset];
        imgData[i-2] = palette[offset + 1];
        imgData[i-1] = palette[offset + 2];
        imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;

      }

      img.data = imgData; //这一行会在“use strict”后报错
      this.ctx.putImageData(img, x, y);

重点在于527行的img.data = imgData
由于ImageData对象的data属性是只读属性,因此在严格模式下会报错的
知道问题出在哪儿了,就可以修改了,
npm add heatmap.js后
node modules/heatmap.js/build里面,heatmap.js,heatmap.min.js两个都要改
正确的做法应该是
heatmap.js

//img.data = imgData; 
//改成
img = new ImageData(imgData, width, height);

heatmap.min.js

//k.data=l;
//改成
k=new ImageData(l,c,d);

或者去掉img.data = imgData;(k.data=l;)也可以,因为上面已经对imgData数组进行修改了。

改了之后
使用patch-package打个补丁,参考以下链接
https://blog.csdn.net/KOOK007/article/details/125724586

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/737749.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

拥有铁粉,怀抱CSDN大家庭

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…

收藏备用 | 提高效率的建筑工地技巧

随着城市化进程的加速和建筑业的蓬勃发展&#xff0c;建筑工地扬尘和噪声污染成为了日益突出的问题。这些问题不仅对周边环境造成了不良影响&#xff0c;还对居民的生活质量和健康造成了潜在风险。 为了有效管理和监控建筑工地的扬尘和噪声水平&#xff0c;保障周边居民的权益和…

ROS:rqt工具箱

目录 一、概念二、作用三、rqt安装启动3.1安装3.2启动 一、概念 ROS基于 QT 框架&#xff0c;针对机器人开发提供了一系列可视化的工具&#xff0c;这些工具的集合就是rqt 二、作用 方便的实现 ROS 可视化调试&#xff0c;并且在同一窗口中打开多个部件&#xff0c;提高开发…

nginx简单项目部署

后台可以连接idea服务也可以部署到java上这里不展开 nginx官网下载安装 启动命令&#xff1a; start nginx 或者双击nginx.exe 重启命令 &#xff1a;nginx -s reload 修改配置文件 E:\dev\nginx\nginx-1.22.1\conf\nginx #user nobody; worker_processes 1;#error_log lo…

[Unity实战]EnhancedScroller v2.21.4简单使用[开箱可用]

[Unity实战]EnhancedScroller v2.21.4简单使用[开箱可用] EnhancedScroller v2.21.4 简单使用EnhancedScroller是什么?1.处理UI1.1 加入Canvas1.2 Canvas/Scroller --> 空对象1.3 Scroller加入组件 EnhancedScroller1.4 拖拽Scroller1.5 Scroller/GameObject --> 拖拽到…

GPIO8种工作模式

前言&#xff1a; GPIO是单片机通用的输入输出引脚&#xff0c;基本用途可作为开关&#xff0c;常用于控制LED亮灭、蜂鸣器的鸣响、电机的转停&#xff0c;但由于驱动能力不够&#xff0c;常常要与三极管一起使用。其它的高级用途如I/O作为输入引脚&#xff0c;可检测外部的中…

「解决」pip install xxx 解释器错误: 没有那个文件或目录

bash: /home/raywit/anaconda3/envs/xxx/bin/pip: /home/another/anaconda3/envs/xxx/bin/python: 解释器错误: 没有那个文件或目录 上图是当我拷贝别人环境时发现少包&#xff0c;然后继续pip时出现这样的错&#xff0c;根本原因则是使用pip时路径没修改成自己的。&#xff08…

金九银十互联网大厂Java面试1000问,覆盖一线大厂各种面试痛点

不知不觉马上要到金九银十的跳槽黄金月&#xff0c;跳槽结果有人欢喜有人愁&#xff0c;找到好的下家固然可喜&#xff0c;跳槽结果不理想的朋友也不必丧气&#xff0c;只要扎实提升自己的技术&#xff0c;弄明白大厂面试官的出题逻辑&#xff0c;进大厂必是水到渠成。 之前有…

任天堂 Switch 六月销量破纪录,极有可能成为日本市场销量冠军

任天堂于2017年发布的游戏机Switch已进入第六个年头。虽然该游戏机在硬件性能和品控方面受到一些评价不佳&#xff0c;但销售数据表明绝大多数玩家仍然乐意购买Switch游戏机。 根据日本经济新闻报道&#xff0c;今年6月Switch在日本销售了380,000台机器&#xff0c;同比增长68%…

单片机第一季:零基础3

目录 1&#xff0c;第五章 2&#xff0c;第六章 1&#xff0c;第五章 IDE概念&#xff1a; IDE就是集成开发环境&#xff0c;就是一套用来开发的完整的软件系统。 Keil和MDK&#xff1a; (1)本来只能用来开发51单片机&#xff0c;叫Keil&#xff1b; (2)后来ARM公司收购了Ke…

Python学习笔记(二十)————面向对象

&#xff08;1&#xff09;面向对象的好处 在日常中&#xff0c;记录数据时往往使用统一的表格&#xff0c;这样就不会使得数据信息格式混乱&#xff0c;同样在程序中的数据组织中&#xff0c;仅仅通过变量来记录会显得混乱不统一。 在程序中是可以做到和生活中那样&#xff…

探究Vue源码:mustache模板引擎(5) 对比rollup与webpack,在本地搭建webpack环境

好 从本文开始 我们就来手写一下mustache这个库 他是模板引擎的一个祖先 将模板字符串编译成一个dom字符串 就是它的思想&#xff0c;这也是一个具有跨时代意义的思想 这里的话 我们还是搭一个 webpack 的项目环境 这里值得一提的是 mustache 他官方是通过rollup来进行打包的 …

7-3 种钻石

7-3 种钻石 分数 5 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 2019年10月29日&#xff0c;中央电视台专题报道&#xff0c;中国科学院在培育钻石领域&#xff0c;取得科技突破。科学家们用金刚石的籽晶片作为种子&#xff0c;利用甲烷气体在能量作用下形成碳的等离子体…

抖音seo源码/源代码搭建/源代码部署打包-支持二开

1. 抖音seo源码/源代码搭建/源代码部署打包-支持二开 抖音SEO是指通过提高在抖音平台的关键词排名&#xff0c;来获取流量、获取客户的目的。抖音的流量主要分为付费流量、推荐流量和搜索流量&#xff0c;其中搜索流量因为付费太贵、上热门太累而成为另一种进入方式。与传统搜…

一个UE频繁掉网的问题

这个UE频繁掉网的问题&#xff0c;其实蛮low的&#xff0c;熟悉的人&#xff0c;看一个参数值就搞定这个问题了&#xff0c;但是还是做个记录。问题背景是运营商指定UE锁在某个NR小区&#xff0c;在一个区域的弱信号点(RSRP -110dbm左右)进行TPUT测试&#xff0c;但是最后发现U…

4.日志分布式-ELK

文章目录 日志分布式-ELK概念可以添加的其它组件filebeat 结合 logstash 带来好处为什么要使用 ELK缓存和Fluentd完整日志系统基本特征ELK 的工作原理 部署Elasticsearchjdk环境和防火墙配置安装Elasticsearch修改配置文件优化内存参数启动程序并测试效果安装 Elasticsearch-he…

DTZY-3579-z型三相四线费控智能电能表

智能电能表是现代智能电网中的重要组成部分&#xff0c;它集电能计量、数据采集、远程控制、安全保护等多种功能于一体&#xff0c;为电力系统的高效运行和能源管理提供了有力支持。其中&#xff0c;DTZY-3579-z 型三相四线费控智能电能表是一款性能稳定、功能齐全、安全可靠的…

【百度Linux训练营】

百度Linux训练营 1. Linux基础1.1 操作系统概述1.1 常见目录介绍 2.Linux命令上 1. Linux基础 课程地址 1.1 操作系统概述 操作系统(Operation system) 操作系统是用户和计算机的接口&#xff0c;同时也是计算机硬件和应用程序的接口&#xff0c;也就是我们和计算机底层硬件…

7款非常强大而鲜为人知的国产软件,每一款都是精品!

提起国产软件&#xff0c;大家最常想到的词是乱收费、捆绑安装、不好用、广告多&#xff0c;在过去&#xff0c;这些词在很长一段时间和国产软件捆绑在一起。 其实&#xff0c;有不少鲜为人知的国产软件一直在坚持做好&#xff0c;不仅没有以上问题&#xff0c;功能非常强大&am…

亚马逊云科技数据分析,帮助乐城堡实现更加精细化的业务运营

获得全球三千五百多万用户的认可的移动游戏企业乐城堡希望通过数据分析为游戏业务提供更好的决策支撑。乐城堡在亚马逊云科技上利用Amazon Redshift等服务构建属于自己的云上游戏数据分析平台&#xff0c;实现复杂查询&#xff0c;保证游戏运营人员能快速、近实时地获取所需的数…