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

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.mfbz.cn/a/36694.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot项目中引入本地依赖jar包,并打包到lib文件夹中

1.springboot项目中引入本地依赖jar包&#xff0c;并打包到lib文件夹中 描述&#xff1a;下载了第三方相关jar包后&#xff0c;项目中引入本地jar&#xff0c;测试环境正常&#xff0c;打包线上报错提示为找到该jar 原因&#xff1a;应该在/WEB-INF/lib/xxx.jar&#xff0c;被…

基于深度学习的高精度刀具检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度刀具检测识别系统可用于日常生活中或野外来检测与定位刀具目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的刀具目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型…

当你按下键盘A键

CPU 里面的内存接口&#xff0c;直接和系统总线通信&#xff0c;然后系统总线再接入一个 I/O 桥接器&#xff0c;这个 I/O 桥接器&#xff0c;另一边接入了内存总线&#xff0c;使得 CPU 和内存通信。再另一边&#xff0c;又接入了一个 I/O 总线&#xff0c;用来连接 I/O 设备&…

前端框架Layui的使用讲解(Layui搭建登录注册页面)

目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面&#xff08;公用页面&#xff09; jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭…

DAY41:贪心算法(十)监控二叉树

文章目录 968.监控二叉树思路遍历顺序空节点处理情况列举 最开始的写法debug测试&#xff1a;travelsal的输出多了1 修改版二叉树注意点时间复杂度总结 968.监控二叉树 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及…

​python接口自动化(三十一)--html测试报告通过邮件发出去——下(详解)​

简介  本篇总结了 QQ &#xff08;SSL&#xff09;邮箱和 163&#xff08;非SSL&#xff09; 邮箱发送邮件&#xff0c;专治各种不行&#xff0c;总之看完这篇以后麻麻再也不用担心我的邮件收不到了。以下代码兼容 python2 和 python3&#xff0c;运行无异常&#xff0c;放心大…

语义分割大模型SAM论文阅读(二)

论文链接 Segment Anything 开源代码链接 SAM 论文阅读 摘要 We introduce the Segment Anything (SA) project: a new task, model, and dataset for image segmentation. Using our efficient model in a data collection loop, we built the largest segmentation dat…

Vue数据项加圆点

目录 Html 样式 方法 Html <el-table-column prop"status" label"数据状态" header-align"center" width"200"><template slot-scope"scope"><div style"display: flex; justify-content: center; a…

fun函数方法体=返回值,kotlin

fun函数方法体返回值&#xff0c;kotlin var str: String "fly"fun main(args: Array<String>) {println(getMyString())println(getMyInt())str "phil"println(getMyString())println(getMyInt()) }fun getMyInt(): Int {return if (str.equals(&…

使用OpenCV在图像上绘制质心

这段代码中已经实现了在图像上绘制质心的功能。质心,也称为重心,是物体质量分布的几何中心,可以通过物体质量和位置的加权平均来求得。 在这个程序中,图像的质心(重心)是通过计算像素强度(可以被看作是“质量”)的加权平均位置得到的。图像上每一个像素都有一个位置(…

搭建SpringBoot项目 详细教程

一、搭建SpringBoot项目 这个项目&#xff0c;可以作为种子项目&#xff0c;我打算把它放置Gitee上。包含大部分web开发的相关功能&#xff0c;后期所有的Spring Boot项目都可以用这个项目&#xff0c;简单修改一下配置&#xff0c;就可以快速开发了。 选择Spring initializr…

【Java】链表LinkedList

文章目录 一、链表1.1 链表的概念1.2 链表的结构 二、LinkedList的简介三、LinkedList的使用3.1 构造方法3.2 常见操作3.3 遍历方法 四、LinkedList的模拟实现五、LinkedList 和 ArrayList 的区别 一、链表 1.1 链表的概念 链表&#xff08;Linked List&#xff09;是一种常见…

预付费智能水表远程控制系统

预付费智能水表远程控制系统是一种基于物联网技术的智能水表管理系统&#xff0c;它通过远程通信技术和云计算平台&#xff0c;实现了对水表的实时监控、数据采集、费用计算、远程控制等功能。该系统不仅可以提高水务公司的管理效率&#xff0c;还可以为用户提供更加便捷、可靠…

Todo-List案例版本二

(160条消息) Todo-List案例版本一_bubbleJessica的博客-CSDN博客 引入了localStorage&#xff0c;让案例更加完善 src/App.vue <template><div id"root"><div class"todo-container"><div class"todo-wrap"><MyHe…

emacs下相对行号的设置

全局设置 全局开启行号显示&#xff1a;global-display-line-numbers-mode t 并设置 display-line-numbers-type的样式: relative 相对 配置代码如下: (use-package emacs:ensure t:config (setq display-line-numbers-type relative) (global-display-line-numbers-mode t)…

TypeScript 学习笔记(三):函数

一、函数定义 函数是由一连串的子程序&#xff08;语句的集合&#xff09;所组成的&#xff0c;可以被外部程序调用&#xff0c;向函数传递参数之后&#xff0c;函数可以返回一定的值。 通常情况下&#xff0c;TypeScript 代码是自上而下执行的&#xff0c;不过函数体内部的代…

SELECT * 会导致查询效率低的原因

SELECT * 会导致查询效率低的原因 前言一、适合SELECT * 的使用场景二、SELECT * 会导致查询效率低的原因2.1、数据库引擎的查询流程2.2、SELECT * 的实际执行过程2.3、使用 SELECT * 查询语句带来的不良影响 三、优化查询效率的方法四、总结 前言 因为 SELECT * 查询语句会查…

Spring整合Elasticsearch

启动Elasticsearch的集群,如果不会搭建集群可以看我以前的文章 进入到head的扩展应用,连接后面的健康值为green就表示集群没问题 Spring Data Elasticsearch 特征: Spring配置支持使用基于Java的 Configuration 类或ES客户端实例的XML命名空间。 Elasticsearc…

谈一谈LLM在推荐域的一些理解

作者&#xff1a;陈祖龙(葬青) 一、前言 最近大模型真的很火&#xff0c;从个人到公司&#xff0c;各行各业都在学习大模型、总结大模型和尝试应用大模型。大模型其实不是一个新的产物&#xff0c;已经在NLP发展了很多年。ChatGPT的诞生&#xff0c;经验的效果震惊了所有人&…

Java设计模式之结构型-外观模式(UML类图+案例分析)

目录 一、基础概念 二、UML类图 三、角色设计 四、案例分析 五、总结 一、基础概念 外观模式&#xff0c;为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用。 二、UML类图 三、角色设计 角…
最新文章