nullの完全なプロパティを読み取ることができません - 完了

Question

私はthis effect私のWebページ上で動作させたいと思います。

しかし、私はすでにこれを複数回試して失敗しました。だから、私は地元のレベルでそれを最初に試してみる理由です。私はあなたがcodepen.ioウェブページで見ることができるすべてをコピーし、両方の画像を自分の写真に置き換えました。さらに、imgにid id="coverart"を追加して、それを確認しました。

しかし、私はこの上のエラーを取得：

if (image.complete) { 

その理由は次のとおりです。

はヌル

の '完全' プロパティを読み取ることができません。しかし、私はこれを入力した場合私のコンソールで：

document.getElementById('coverart'); 

私は戻って要素を取得：

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

だから、それはそれの理由かもしれない何... nullにすることはできませんし、どのように私はそれを修正することができますか？ Here you can download the little html, css and js files.

EDIT：

あなたがalert(image)を挿入した場合、あなたはnullを取得します。あなたはこの

image.onload = start; 

この

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

を交換した場合、私はnullを取得なぜあなたは...同じヌルエラーになります...それはnullにすることはできませんか？

Answer 1

改善のための方法はいくつかあります： 1）imgタグの後にJavaScriptファイルを置くだけです。

2）または、ドキュメントをロードするときにのみコードを実行します。

Answer 2

bodyタグの末尾にjquery定義を配置し、次のような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>

Answer 3

をcodepenに$(document).ready(function(){...});または$(function(){...});以内にあなたのコードをラップする必要はありませんので。

これを試してみてください。それを行うにはjQueryが必要です。だから、あなたのHTML headに

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

を追加します。

$(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); 
    } 
}); 

は、ローカルホスト上で自分のためにということを試してみましたが、それがイメージ `@hsnbl