โดย สมโภชน์ กุลธารารมณ์
<!doctype html>
<html>
<head>
<title>Image Crop HTML5 (ProgImage2.htm)</title>
<script>
window.onload = function()
{
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
var imageObj = new Image();
imageObj.onload = function()
{
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 – destWidth / 2;
var destY = canvas.height / 2 – destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight);
};
imageObj.src = “image1.gif”;};
</script>
</head>
<body>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>
