cutImageUp是一個js腳本,在SE中已經討論過了,這裏是Shattering image using canvas。但是我有關於使用它的另一個問題。我嘗試的HTML沒有做任何事情。我敢肯定,我做了一個簡單的錯誤,但我太過分了。HTML運行JS圖像轉換功能
的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