2017-03-07 81 views
1

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,沒有運氣。

+0

首先,在'cutImageUp.js'文件中,在開頭刪除''。 – Teocci

回答

2

刪除<腳本> cutImageUp.js中JavaScript代碼的標籤。當您將JS代碼嵌入到HTML文件中時,您只需要這些代碼。

+0

腳本標籤不在js中。對不起,錯字。所以它仍然沒有工作。如果原始圖像是高度:250寬度:50,則每個畫布都是其1/5。在JS文件中,圖像繪製每個畫布。在HTML中,圖像是原始圖像。這可能是問題嗎? –

+0

我用CSS sprites來做我所需要的。我仍然想要執行這個w/JS。 –