0
これで、キャンバス要素をもう少し理解するのに役立つ多くのチュートリアルといくつかのスレッドをここで読んだことがありますが、働く私が使用していたコードは以下の通りです：キャンバス要素を使用してイメージをクロップする
<!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>
私の元の画像は、私は自分のサーバーにアップロードした画像であり、それが正しく表示されている、しかし私のトリミングされた画像は、まったく表示されません。これは明日の夜に予定されている学校プロジェクトのため、どんな助けもありがたいです。ありがとうございました！