admin管理员组文章数量:1334808
i have an image drawn to a canvas. I want to clip that image and create a new image using the clipped region from the old image. How am i suppose to do that using html5 and javascript? Clipping the image will be dynamic as like used in 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>
now i want to clip the image. just like what photoshop clipping path is doing to an image...
i have an image drawn to a canvas. I want to clip that image and create a new image using the clipped region from the old image. How am i suppose to do that using html5 and javascript? Clipping the image will be dynamic as like used in 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>
now i want to clip the image. just like what photoshop clipping path is doing to an image...
Share Improve this question edited Jul 2, 2013 at 3:33 charm asked Jul 2, 2013 at 3:16 charmcharm 451 gold badge1 silver badge10 bronze badges 1- 3 You have an image drawn to a canvas, please supply us some basic JavaScript showing how you do this, as this is ALL within javascript; there is no HTML5 involved, assuming you just want to take an area of an image... – Christian Stewart Commented Jul 2, 2013 at 3:22
2 Answers
Reset to default 3You can clip an image using canvas context’s drawImage with extra parameters
This code will clip from the source image at position [clipX,clipY] that's [clipWidth x clipHeight] in size.
ctx.drawImage(image,clipX,clipY,clipWidth,clipHeight,0,0,clipWidth,clipHeight);
Then you can save the canvas to an image using canvas.toDataURL
This code will find an image element on the page and set it’s src to the clipped canvas.
var clippedImg=document.getElementById("clipped");
clippedImg.src=canvas.toDataURL();
Here’s a Fiddle that (must be viewed in Chrome/FF—not IE): http://jsfiddle/m1erickson/VJdmL/
And here’s code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery./jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
clipImage(img,140,2,120,110);
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent./u/139992952/stackoverflow/faces.png";
function clipImage(image,clipX,clipY,clipWidth,clipHeight){
// draw the image to the canvas
// clip from the [clipX,clipY] position of the source image
// the clipped portion will be clipWidth x clipHeight
ctx.drawImage(image,clipX,clipY,clipWidth,clipHeight,
0,0,clipWidth,clipHeight);
var clippedImg=document.getElementById("clipped");
clippedImg.src=canvas.toDataURL();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Canvas (Left) and New clipped PNG (Right)</p>
<canvas id="canvas" width=120 height=110></canvas>
<img id="clipped" src="faces.png" width=120 height=110><br>
<p>Original Image</p>
<img src="https://dl.dropboxusercontent./u/139992952/stackoverflow/faces.png" width=400 height=234>
</body>
</html>
You jus need to create a path and then use the canvas context's clip method to define a clipping region before you draw the image. Here is an example:
https://developer.mozilla/samples/canvas-tutorial/6_2_canvas_clipping.html
More info here:
http://www.html5canvastutorials./advanced/html5-canvas-clipping-region-tutorial/
(Note, paths don't have to be defined by arcs; there's quite a number of path defining methods: https://developer.mozilla/en-US/docs/Trash/Canvas_tutorial-broken/Drawing_shapes )
本文标签: htmlClipping images using html5 and javascriptStack Overflow
版权声明:本文标题:html - Clipping images using html5 and javascript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742249636a2440506.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论