Question

好的，所以我在stackoverflow上阅读了很多教程和一些线程，这有助于我更多地理解canvas元素，但是仍然难以让裁剪工作。我正在使用的代码如下：

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

我的原始图片是我上传到服务器的图片，并且显示正确，但我的裁剪图片根本不会显示。这是一个明天晚上到期的学校项目，所以任何帮助将不胜感激。先谢谢！

Answer 1

想出来！我误读了我的教科书，在我的原始代码中，我有：

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

将我的代码更改为：

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

图像显示正确。现在只需要编写代码就可以实现我需要的功能。

使用canvas元素裁剪图像

1 个答案: