使用畫布元素來裁剪圖像

好的，所以我在這裏閱讀了大量的教程和一些線程，它們幫助我更好地理解畫布元素，但是仍然難以獲得裁剪上班。我使用的代碼如下：使用畫布元素來裁剪圖像

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Canvas Image</title> 
<link rel="stylesheet" href="styles.css" /> 
</head> 
<body> 
<!-- comments --> 



<canvas id="canvas" width="640" height="600"></canvas> 
<script> 
var canvas = document.getElementById('canvas').getContext ('2d'); 
var canvasImage = new Image(); 

function drawCanvasImage(){ 
canvas.drawImage(canvasImage, 50, 25, 300, 350); 
}; 

canvasImage.addEventListener('load',drawCanvasImage,false); 

canvasImage.src = "Images/Batman.jpg"; 
</script> 

<script> 
var canvas = document.getElementById('canvas').getContext ('2d'); 
var canvasImage = new Image(); 

function cropImage(){ 
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100); 
}; 

canvasImage.addEventListener('load',drawCanvasImage,false); 

canvasImage.src = "Images/Batman.jpg"; 
</script> 
</body> 
</html>

我原來的印象是我上傳到我的服務器的圖像，並顯示正確，但是我裁剪的圖像將不會顯示在所有。這是一個明天晚上的學校項目，所以任何幫助，將不勝感激。先謝謝了！

來源

2016-05-21 dark_nemesis

想通了！我誤讀了我的書，在我的原代碼，我有：

function cropImage(){ 
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100); 
};

改變我的代碼後：

function drawCanvasImage(){ 
canvas.drawImage(canvasImage, etc.)

圖像正確顯示。現在只需編碼就可以得到我需要的代碼。

來源

2016-05-21 02:14:10

使用畫布元素來裁剪圖像

回答

相關問題