无法读取 null 的属性“完成” - 完成答案

【问题标题】：Cannot read property 'complete' of null - complete无法读取 null 的属性“完成” - 完成
【发布时间】：2018-01-19 16:02:19
【问题描述】：

我想让this effect 在我的网页上工作。

但我已经尝试过多次，但每次都失败了。所以，这就是为什么我要先在本地尝试它的原因。我复制了您在 codepen.io 网页上可以看到的所有内容，并用我的图片替换了这两个图像。此外，我将 id id="coverart" 添加到 img 中，就是这样。

但是我得到一个错误：

if (image.complete) {

原因是：

无法读取 null 的“完整”属性

但如果我在控制台中输入：

document.getElementById('coverart');

我找回了元素：

<img id="coverart" src="https://gamekeys-shop.de/wp-content/uploads/2017/01/coverart.png">

所以，它不能为空......这可能是什么原因，我该如何解决？ Here you can download the little html, css and js files.

编辑：

如果你插入alert(image)，你会得到null。如果你替换这个

if (image.complete) {
  start();
} else {
  image.onload = start;
}

有了这个

image.onload = start;

你会得到同样的null错误...为什么我会得到null...它不能为null？

【问题讨论】：

@hsnbl image.complete 返回图像是否已完全加载。如果有，则返回true
@TobiasGlaus 感谢您提供信息 :)
@Erik 你尝试使用 $(document).ready(function(){ //你的代码在这里 })
是的，这可能是可能的解决方案。在 codepen 上，无需将所有内容包装在 $(document).ready(function(){...}); 或 $(function(){...}); 中。因此，请尝试将所有代码包装在其中一个函数中（它们是相同的）
@Erik 你解决问题了吗？

标签： javascript jquery html css jquery-selectors

【解决方案1】：

因为没有必要将您的代码包装在 $(document).ready(function(){...}); 或 $(function(){...}); 中在 codepen 上。

所以尝试这样做。你需要 jQuery 来做到这一点。所以只需添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">

到您的 HTML head。

$(document).ready(function(){
  var image = document.querySelector('img');
  var imageCanvas = document.createElement('canvas');
  var imageCanvasContext = imageCanvas.getContext('2d');

  ...

  imageCanvasContext.drawImage(image, 0, 0, width, height);
  imageCanvasContext.globalCompositeOperation = 'destination-in';
  imageCanvasContext.drawImage(lineCanvas, 0, 0);
  }
});

在本地主机上为自己尝试过，效果很好

【讨论】：

【解决方案2】：

您可以将您的 jquery 定义放在 body 标记的底部并使用 jquery $(document).ready() 事件，如下所示。

$(document).ready(function(){
    var image = document.getElementById("coverart");
    if(image.complete){
        console.log("loaded");
    }
})

<img id="coverart" src="http://via.placeholder.com/350x150"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案3】：

有几种可能的改进方法： 1）只需将您的javascript文件放在img标签之后即可。

2) 或者仅在加载文档时运行代码。

【讨论】：

为什么？逻辑在哪里？
在您的示例中，您尝试获取图像标签，但尚未加载图像元素，这就是您使用 null 而不是元素的原因。如果您在初始化图像元素后放置 javascript 文件，一切都会好起来的。正如我之前所说，您可以使用另一种方式：尝试$(document).ready(function(){...});