0
Okay, also habe ich hier auf stackoverflow zahlreiche Tutorials und ein paar Threads gelesen, was mir geholfen hat, das Canvas-Element ein wenig mehr zu verstehen, aber immer noch Schwierigkeiten habe, den Crop zu bekommen arbeiten. Der Code, den ich verwende, ist unten:Verwenden des canvas-Elements zum Beschneiden eines Bildes
<!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>
Meine ursprüngliche Bild ist ein Bild, das ich auf meinen Server hochgeladen haben, und es wird korrekt angezeigt, aber mein beschnittene Bild wird nicht zeigen. Dies ist für ein Schulprojekt, das morgen Abend fällig ist, also würde jede Hilfe geschätzt werden. Danke im Voraus!