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を使ってみました。
最初に、 'cutImageUp.js'ファイルで、最初に' 'を削除してください。 – Teocci