无法读取属性'完整'null - 完成

我想获得this effect在我的网页上工作。无法读取属性'完整'null - 完成

但我已经尝试过多次，每次都失败。所以，这就是为什么我要先在地方一级尝试它的原因。我复制了您在codepen.io网页上看到的所有内容，并将两张图片替换为我的图片。此外，我添加了id id="coverart" img和多数民众赞成它。

但我得到一个错误在此：

if (image.complete) {

它的原因是：

无法读取属性空

的 '完整' 但是，如果我键入此在我的控制台中：

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)，你会得到空。如果这个

image.onload = start;

替换此

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

你会得到相同的错误无效...为什么我得到空......它不能为空？

来源

2017-08-11 Erik

@hsnbl'图像。完成“返回图像是否已经完全加载。如果有，它返回'true' –

@TobiasGlaus感谢您的信息:) – hasan

@Erik你尝试使用$（document）.ready（function（）{//你的代码在这里）） – hasan

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

2）或者只在文档加载时运行你的代码。

来源

2017-08-11 08:18:41 Pavel

为什么？逻辑在哪里？ – Erik

在你的例子中，你尝试获取图像标签，但图像元素尚未加载，这就是为什么你有null而不是元素。如果你在image元素初始化后放置javascript文件，一切都会好的。如前所述，您可以使用另一种方法：只需尝试'$（document）.ready（function（）{...}）;' – Pavel

你可以把你的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>

来源

2017-08-11 08:32:38 hasan

由于没有必要在codepen内的$(document).ready(function(){...});或$(function(){...});包装你的代码。

所以试试这样做。你需要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); } });

尝试，为自己在本地主机上，它的做工精细

来源

2017-08-11 08:36:34

无法读取属性'完整'null - 完成

回答

相关问题