我有一张画在画布上的图片。我想要剪切这张图片并使用旧图片中被剪切区域来创建一张新图片。我应该如何在HTML5和JavaScript中实现这个目标?像Photoshop中一样,剪切图片会是动态的。
<!--my javascroipt that draw the image to the canvas -->
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
function drawImage(imageObj){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageX = 0;
var imageY = 0;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(imageObj, imageX, imageY);
}
var image = getURLParameter('image');
if(image != null){
//now put the image to the canvas lolol
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = 'http://localhost/clip/temp/'+image;
}
</script>
<!--here is my canvas..-->
<div id="container" class="unselectable">
<canvas id="canvas" width="500px" height="500px" class="unselectable">
</canvas><br/>
</div>
现在我想裁剪图片。就像Photoshop的剪贴路径对图像所做的那样...