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

这篇具有很好参考价值的文章主要介绍了记录一个heatmap.js在strict模式下的bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

记录一个heatmap.js在strict模式下的bug,js,javascript,bug
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文章来源地址https://www.toymoban.com/news/detail-543943.html

到了这里,关于记录一个heatmap.js在strict模式下的bug的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 记录关于智能家居的路程的一个bug___Segmentation fault(段错误)

    其实发生段错误的情况有很多: 其实在项目的开发中最有可能的错误就是①和②,考虑到本项目数组用的比较少,所以主要是考虑错误①指针的误用。 有时候错误就是那么离谱,声音也算是一种设备????? 有时候又没有段错误 怀疑是多线程的问题,把线程一个一个注释

    2024年04月15日
    浏览(33)
  • 用js做一个简单的网页,用javascript做一个网页

    大家好,小编为大家解答用javascript写简单网页家乡的介绍代码的问题。很多人还不知道用javascript写简单网页小游戏,现在让我们一起来看看吧! 八、JavaScript基础 1.JavaScript JavaScript简称JS是用于制作网页的动态效果的,如:页面的弹出广告、浮动广告、下拉菜单、表单验证等

    2024年02月03日
    浏览(46)
  • 记录一个IDEA中使用GIT的严重BUG,导致测试分支合并到主分支,以及代码恢复解决方案

    在做项目时遇到了一个问题,就是不知道什么操作,无缘无故把test分支代码合并到了master,导致花了好长时间去恢复master分支的代码,所以研究了一下,到底是什么原因导致的这个问题 PS: 后来分析出来根本原因,确定这确实是IDEA的一个BUG,在下面会有详细描述 当我们在test分支时,

    2023年04月14日
    浏览(74)
  • 用javascript做一个计算器,用js做一个计算器代码

    大家好,给大家分享一下怎么用javascript做一个简单的计算器,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 页面布局设计(HTML+CSS)   由于在之前的博客中有对html和css进行详细的讲解,再次就不多叙述,直接上代码。因为js中用到了JQuery选择器所以在

    2024年02月04日
    浏览(69)
  • 【pytorch】同一个模型model.train()和model.eval()模式下的输出完全不同

    测试时为什么要使用model.eval() - 小筱痕 - 博客园 (cnblogs.com) 输出不同的原因是由于student模型中的某些层的行为不同。一些层,如dropout和batch normalization,在训练和评估过程中的行为是不同的。 在训练过程中,dropout层会随机将一部分输入置为零,这有助于防止过拟合。dropou

    2024年02月12日
    浏览(61)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(58)
  • 【js&vue】联合gtp仿写一个简单的vue框架,以此深度学习JavaScript

    lifecycle.js 注解: this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别: call(this)  的作用是将当前对象( this )作为参数传递给  beforeMount  方法,使得在  beforeMount  方法内部可以通过  this  访问到当前对象的上下文 直接调用了  beforeMount  方法,没有指定上下

    2024年02月09日
    浏览(56)
  • 完成一个有趣的Web期末大作业(html、css、javascript、MySQL、Node.js)

    题目:学校老师的要求很开放,要自己做一个感兴趣的网页,要求使用基础的html、css和javascript,后端要使用数据库。 网上都是各种管理系统,看多了觉得没啥意思,要做一个自己感兴趣的网站。近几年沉迷犬夜叉这部动漫,就花了两天的时间创建了一个犬夜叉的网站,对于

    2024年02月04日
    浏览(50)
  • 记录--一个好用的轮子 turn.js 实现仿真翻书的效果

    官网传送门 Github地址 github上有几个demos例子,介绍了基础用法。  我参考官网的例子,写了一个demo示例   turn.js 依赖 jquery 库,所以需要先安装 jquery 下载 turn.js 文件,然后在组件中引入  或者,这样: 完整代码,已经放到 Gitee 上面了,组件名为 TurnjsComponent Gitee地址    

    2024年02月15日
    浏览(39)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包