無法讀取屬性'完整'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 - 完成

回答

相關問題