使用画布元素来裁剪图像

好的，所以我在这里阅读了大量的教程和一些线程，它们帮助我更好地理解画布元素，但是仍然难以获得裁剪上班。我使用的代码如下：使用画布元素来裁剪图像

<!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

使用画布元素来裁剪图像

回答

相关问题