2017-03-07 5 views
1

cutImageUpは、すでにSE(ここではShattering image using canvas)で議論されているjsスクリプトです。しかし、私はそれを使用することについて別の質問があります。私が試したHTMLは何もしません。私は単純な間違いをしたと確信していますが、私はあまりにもそれを見てnoobのです。JS画像変換関数を実行するHTML

cutImageUpスクリプト:

<script type="text/javascript"> 

var image = new Image(); 
image.src = "letere.png"; image.onload = cutImageUp; 
var imagePieces = []; 

function cutImageUp() { 

for(var x = 0; x < 5; x++) { 
    for(var y = 0; y < 5; y++) { 
     var canvas = document.createElement('canvas'); 
     canvas.width = 50; 
     canvas.height = 50; 
     var context = canvas.getContext('2d'); 
     context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50); 

     imagePieces.push(canvas.toDataURL()); 
    } 
} 

var anImageElement = document.getElementById('img'); 
anImageElement.src = imagePieces[0]; 
} 
</script> 

私のHTMLは:私は、ページを実行すると

<html> 
    <head> 
     <script src="cutImageUp.js"></script> 
    </head> 
<body> 
<img src="letere.png" onload="cutImageUp()" width="50" height="50"> 
</img> 
</body> 
</html> 

、画像が適用される機能せず、表示されます。私はjsなしでページを実行することもできます。ところで、ファイルは同じフォルダにあり、Base64を使ってみました。

+0

最初に、 'cutImageUp.js'ファイルで、最初に' 'を削除してください。 – Teocci

答えて

2

スクリプト>のcutImageUp.jsのJavaScriptコードのタグを削除します。 JSコードをHTMLファイルに埋め込むときにのみ必要です。

+0

スクリプトタグはjsにありません。入力ミスを申し訳ありません。だからそれはまだ動作しませんでした。オリジナルの画像が高さ:250幅:50の場合、各キャンバスは1/5です。 JSファイルでは、イメージがそれぞれのキャンバスを描画します。 HTMLでは、イメージは元のイメージです。それが問題だろうか? –

+0

私は必要なことをするためにCSSスプライトを使用しました。私はまだこのw/JSを実行したいと思います。 –