Ví dụ tag canvas img crop

<canvas> image crop

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var canvasImg = new Image();
    canvasImg.onload = function(){
    // draw cropped image
    var xImg = 200; //Tọa độ image theo trục x
    var yImg = 65; //Tọa độ image theo trục y
    var widthNew = 150; //Chiều rộng mới của hình
    var heightNew = 100; //Chiều dài mới của hình
    var widthCrop = widthNew; //Chiều rộng của khung crop
    var heightCrop = heightNew; //Chiều dài của khung crop
    var xCrop = canvas.width / 2 - widthCrop / 2; //Tọa độ khung crop theo trục x
    var yCrop = canvas.height / 2 - heightCrop / 2; //Tọa độ khung crop theo trục y
    context.drawImage(canvasImg, xImg, yImg, widthNew, heightNew, xCrop, yCrop,
    widthCrop, heightCrop);
    };
    canvasImg.src = "images/img_flower.jpg";
};
</script>
</head>

<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
</body>
</html>

<canvas> - image size

<canvas> - line