我有一张画在画布上的图像。我想剪辑该图像并使用旧图像中的剪辑区域创建一个新图像。我想如何使用 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 剪切路径对图像所做的那样......