I'm currently working on web app for photo editing using FabricJS and one of features I need to implement is something like Clipping masks from Photoshop.
For example I have this assets: frame, mask and image. I need to insert image inside frame and clip it with mask. Most tricky part is in requirements:
User should be able to modify image inside frame, e.g. move, rotate, skew... Frame itself also can be moved inside canvas.
Number of layers is not limited so user can add objects under or above masked image.
Masks, frames and images is not predefined, user should be able to upload and use new assets.
My current solution is this:
Load assets
Set globalCompositeOperation of image to source-out
Set clipTo function for image.
Add assets on canvas as a group
In this solution clipTo function preserve image inside rectangular area of frame and with help of globalCompositeOperation I'm clipping image to actual mask. At first sight it works fine but if I add new layer above this newly added group it will be cutted off because of globalCompositeOperation="source-out" rule. I've created JSFiddle to show this.
So, that else could I try? I've seen some posts on StackOverflow with advices to use SVGs for clipping mask, but if I understand it correctly SVG must contain only one path. This could be a problem because of third requirement of my app.
Any advice in right direction will help, because right now I'm totally stuck with this problem.
You can do this by using ClipPath property of Img Object which you want to mask. With this, you can Mask Any Type of Object. and also you need to add some Ctx Configuration in ClipTo function of Img Object.
check this link https://jsfiddle.net/naimsajjad/8w7hye2v/8/
(function() {
var img01URL = 'http://fabricjs.com/assets/printio.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "red";
canvas.setHeight(500);
canvas.setWidth(500);
canvas.setZoom(1)
var circle = new fabric.Circle({radius: 40, top: 50, left: 50, fixed: true, fill: '', stroke: '1' });
canvas.add(circle);
canvas.renderAll();
fabric.Image.fromURL(img01URL, function(oImg) {
oImg.scale(.25);
oImg.left = 10;
oImg.top = 10;
oImg.clipPath = circle;
oImg.clipTo = function(ctx) {
clipObject(this,ctx)
}
canvas.add(oImg);
canvas.renderAll();
});
var bili = new fabric.Path('M85.6,606.2c-13.2,54.5-3.9,95.7,23.3,130.7c27.2,35-3.1,55.2-25.7,66.1C60.7,814,52.2,821,50.6,836.5c-1.6,15.6,19.5,76.3,29.6,86.4c10.1,10.1,32.7,31.9,47.5,54.5c14.8,22.6,34.2,7.8,34.2,7.8c14,10.9,28,0,28,0c24.9,11.7,39.7-4.7,39.7-4.7c12.4-14.8-14-30.3-14-30.3c-16.3-28.8-28.8-5.4-33.5-11.7s-8.6-7-33.5-35.8c-24.9-28.8,39.7-19.5,62.2-24.9c22.6-5.4,65.4-34.2,65.4-34.2c0,34.2,11.7,28.8,28.8,46.7c17.1,17.9,24.9,29.6,47.5,38.9c22.6,9.3,33.5,7.8,53.7,21c20.2,13.2,62.2,10.9,62.2,10.9c18.7,6.2,36.6,0,36.6,0c45.1,0,26.5-15.6,10.1-36.6c-16.3-21-49-3.1-63.8-13.2c-14.8-10.1-51.4-25.7-70-36.6c-18.7-10.9,0-30.3,0-48.2c0-17.9,14-31.9,14-31.9h72.4c0,0,56-3.9,70.8,26.5c14.8,30.3,37.3,36.6,38.1,52.9c0.8,16.3-13.2,17.9-13.2,17.9c-31.1-8.6-31.9,41.2-31.9,41.2c38.1,50.6,112-21,112-21c85.6-7.8,79.4-133.8,79.4-133.8c17.1-12.4,44.4-45.1,62.2-74.7c17.9-29.6,68.5-52.1,113.6-30.3c45.1,21.8,52.9-14.8,52.9-14.8c15.6,2.3,20.2-17.9,20.2-17.9c20.2-22.6-15.6-28-16.3-84c-0.8-56-47.5-66.1-45.1-82.5c2.3-16.3,49.8-68.5,38.1-63.8c-10.2,4.1-53,25.3-63.7,30.7c-0.4-1.4-1.1-3.4-2.5-6.6c-6.2-14-74.7,30.3-74.7,30.3s-108.5,64.2-129.6,68.9c-21,4.7-18.7-9.3-44.3-7c-25.7,2.3-38.5,4.7-154.1-44.4c-115.6-49-326,29.8-326,29.8s-168.1-267.9-28-383.4C265.8,13,78.4-83.3,32.9,168.8C-12.6,420.9,98.9,551.7,85.6,606.2z',{top: 0, left: 180, fixed: true, fill: 'white', stroke: '', scaleX: 0.2, scaleY: 0.2 });
canvas.add(bili);
canvas.renderAll();
fabric.Image.fromURL(img02URL, function(oImg) {
oImg.scale(0.5);
oImg.left = 180;
oImg.top = 0;
oImg.clipPath = bili;
oImg.clipTo = function(ctx) {
clipObject(this,ctx)
}
canvas.add(oImg);
canvas.renderAll();
});
function clipObject(thisObj,ctx)
{
if (thisObj.clipPath) {
ctx.save();
if (thisObj.clipPath.fixed) {
var retina = thisObj.canvas.getRetinaScaling();
ctx.setTransform(retina, 0, 0, retina, 0, 0);
// to handle zoom
ctx.transform.apply(ctx, thisObj.canvas.viewportTransform);
thisObj.clipPath.transform(ctx);
}
thisObj.clipPath._render(ctx);
ctx.restore();
ctx.clip();
var x = -thisObj.width / 2, y = -thisObj.height / 2, elementToDraw;
if (thisObj.isMoving === false && thisObj.resizeFilter && thisObj._needsResize()) {
thisObj._lastScaleX = thisObj.scaleX;
thisObj._lastScaleY = thisObj.scaleY;
thisObj.applyResizeFilters();
}
elementToDraw = thisObj._element;
elementToDraw && ctx.drawImage(elementToDraw,
0, 0, thisObj.width, thisObj.height,
x, y, thisObj.width, thisObj.height);
thisObj._stroke(ctx);
thisObj._renderStroke(ctx);
}
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
Not sure what you want.
If you want the last image loaded (named img2), the one you send to the back to not effect the layers above do the following.
You have mask,frame,img, and img2;
Put them in the following order and with the following comp settings.
img2, source-over
img, source-over
mask, destination-out
frame, source-over
If you want something else you will have to explain it in more detail.
Personally when I provide masking to the client I give them full access to all the composite methods and allow them to work out what they need to do to achieve a desired effect. Providing a UI that allows you to change the comp setting, and layer order makes it a lot easier to sort out the sometimes confusing canvas composite rules.
I'd suggest looking at this solution.
Multiple clipping areas on Fabric.js canvas
You end up with a shape layer that is used to define the mask shape. That shape then gets applied as a clipTo to your image.
The one limitation I can think off though that you might run into is when you start to rotate various shapes. I know I have it working great with a rectangle and a circle, however ran into some issues with polygons from what I recall... This was all setup under and older version of FabricJS however, so there may have been some improvements there that I'm not experienced with.
The other issue I ran into was drop shadows didn't render correctly when passed to a NodeJS server running FabricJS.
I've checked this forum/the internet/google forwards and backwards for my particular question, but to no avail. I get examples that come close to mine - which I try to impart into my own example, but nothing doing. Please help! Again I apologize if this has been answered and I just overlooked, if so please throw me a link - otherwise here is my code:
All I'm trying to do is animate a single sprite image of a jumping Mega Man.
Thanks, and Happy Holidays!
NOTE: Here the sprite I'm using
HERE IS MY: JsFiddle
var stage, canvas,
bmpA, data,
megaman, spriteSheet;
function Main() {
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
container = new createjs.Container();
megaman = new Image();
megaman.src = "megaman__jump.png";
var bmpA = new createjs.Bitmap(megaman);
data = new createjs.SpriteSheet({
images: [bmpA],
frames: {
width: 79,
height: 139,
count: 7
},
animations: {
jump: [0, 6, "jump"]
}
});
spriteSheet = new createjs.BitmapAnimation(data);
spriteSheet.gotoAndPlay("jump");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
stage.addChild(spriteSheet);
stage.update();
}
</script>
</head>
<body onload = "Main();">
<canvas id = "canvas" width = "780" height = "300"
style = "border: 1px solid #000;"></canvas>
</body>
</html>
[1]: http://i.imgur.com/Q1OQM.png
Here is a quick edit. http://jsfiddle.net/lannymcnie/f58mr0Lk/9/
Your Fiddle wasn't very helpful, since it was just your code pasted in. I modified it to drop the body tag (jsfiddle does that for you), import easeljs, and use the full image path.
The BitmapAnimation class was renamed to Sprite sometime ago. I am not sure what version of EaselJS you are using, but it might not have that class anymore.
I removed the Bitmap. The SpriteSheet data accepts either a string path, or an Image reference, not a Bitmap.
As I suggested below, I pulled out the entire update method, added the Sprite one time, and then had the tick just update the stage directly.
The fiddle "works" now, but the spritesheet dimensions don't seem right. Have a look.
data = new createjs.SpriteSheet({
images: ["http://i943.photobucket.com/albums/ad274/Rah5er0/megaman__jump.png~original"],
frames: {
width: 79,
height: 139,
count: 7
},
animations: {
jump: [0, 6, "jump"]
}
});
var sprite = new createjs.Sprite(data);
eUsing Raphael.js 2.1.0 I am trying to add two background image to the paper object like:
var w = 794;
var h = 680;
var map = Raphael("canvas");
map.image('http://1.png', 0, 0, 794, 680);
map.image('http://2.png', 0, 0, 794, 680);
Or
var w = 794;
var h = 680;
var map = Raphael("canvas");
map.rect(0,0, 794, 680).attr({
fill: "url(http://1.png)"
});
map.rect(0,0, 794, 680).attr({
fill: "url(http://2.png)"
});
now I need to find a way to enable user to change ONLY the second background image (from image() or fill:) by changing a Select option list of images but I do not know how to target the second background using jQuery or JavaScript.
Can you please let me know how I can do this?
Thanks
There's a few bits to get to the point mentioned in the comment.
You need to reference the image2, and then you will need to remove() it. So your click function would look something like this...
$("#change").on("click",function(){
image2.remove();
image2 = map.image('myimageurl.png', 0, 0, 500, 500).insertBefore( circle );
});
Note the .insertBefore( element ) function thats used. This will put the element behind the circle, so the hover will still work.
jsfiddle
I am working on a collage in HTML5 canvas. However, I am finding difficulty in arranging the images in different angles. I want to arrange first pic at angle of PI/4 and the other one at angle -PI/70. Here is the jsFiddle with the problem.
var pic1 = new Image();
pic1.src = "http://www.fantom-xp.com/wallpapers/23/Windows_7_-_Swan.jpg";
context.translate(170,170);
context.rotate(Math.PI/8);
pic1.onload = function(){
context.drawImage(pic1, 20, 20, 200, 200);
}
var pic2 = new Image();
pic2.src = "http://www.redorbit.com/media/uploads/2004/10/38_ec8164eb3e4bddf76ef1b8eb564b9514.jpg";
context.translate(100,10);
context.rotate(-Math.PI/70);
pic2.onload = function(){
context.drawImage(pic2, 0, 0, 200, 200);
}
What am I missing?
Assuming you want to rotate your images around their center points you need to use this drawImage:
context.drawImage(image, -image.width/2, -image.height/2).
That's because the translate point becomes the rotation point.
Here's a generic image rotation function:
function tiltedPicture(centerX,centerY,degreeAngle,image){
ctx.save();
ctx.translate(centerX,centerY);
ctx.rotate(degreeAngle*Math.PI/180);
ctx.drawImage(image,-image.width/2,-image.height/2);
ctx.restore();
}
There are some issues in your code.
First of all, your first image couldn't be loaded. You will see it when you add:
pic1.onerror = function() {
console.log('Error loading');
}
Next you should use save and restore methods. Read here.
The problem is when you call twice context.translate(170,170); you will get th final translation at x: 340, y: 340. If you will combine more complex transformaions you could get result which is hard to predict. Fortunatelly there are methods save and restore. Save - saves current transformation state, and Restore - restores last saved state.
Usage in your case (for the first pic):
pic1.onload = function(){
context.save();
context.translate(170,170);
context.rotate(Math.PI/2);
context.drawImage(pic1, 20, 20, 200, 200);
context.restore();
}
pic1.onerror = function() {
console.log('error loading');
}
See demo.
I'm trying to build a transform manager for KineticJS that would build a bounding box and allow users to scale, move, and rotate an image on their canvas. I'm getting tripped up with the logic for the anchor points.
http://jsfiddle.net/mharrisn/whK2M/
I just want to allow a user to scale their image proportionally from any corner, and also rotate as the hold-drag an anchor point.
Can anyone help point me in the right direction?
Thank you!
Here is a proof of concept of a rotational control I've made:
http://codepen.io/ArtemGr/pen/ociAD
While the control is dragged around, the dragBoundFunc is used to rotate the content alongside it:
controlGroup.setDragBoundFunc (function (pos) {
var groupPos = group.getPosition()
var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y))
status.setText ('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation); layer.draw()
group.setRotationDeg (rotation); layer.draw()
return pos
})
I am doing the same thing, and I've posted a question which is allmoast the same, but I found a link where you have the resize and move tool ready developed. So I have used the same. It does not contain the rotate tool however, but this can be a good start for you too, it is very simple and logical. Here is the link: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
I will come back with the rotation tool as well if I manage to get it working perfectly.
I hope I am not late yet for posting this code snippet that I made. I had the same problem with you guys dealing with this kind of task. Its been 3 days since I tried so many workarounds to mimic the fabricjs framework capability when dealing with images and objects. I could use Fabricjs though but it seems that Kineticjs is more faster/consistent to deal with html5.
Luckily, we already have existing plugin/tool that we could easily implement together with kineticjs and this is jQuery Transform tool. SUPER THANKS TO THE AUTHOR OF THIS! Just search this on google and download it.
I hope the code below that I created would help lots of developers out there who is pulling their hair off to solve this kind of assignment.
$(function() {
//Declare components STAGE, LAYER and TEXT
var _stage = null;
var _layer = null;
var simpleText = null;
_stage = new Kinetic.Stage({
container: 'canvas',
width: 640,
height: 480
});
_layer = new Kinetic.Layer();
simpleText = new Kinetic.Text({
x: 60,
y: 55,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calbiri',
draggable: false,
name:'objectInCanvas',
id:'objectCanvas',
fill: 'green'
});
//ADD LAYER AND TEXT ON STAGE
_layer.add(simpleText);
_stage.add(_layer);
_stage.draw();
//Add onclick event listener to the Stage to remove and add transform tool to the object
_stage.on('click', function(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
// get the shape that was clicked on
ishape = evt.targetNode;
//Add and show again the transform tool to the selected object and update the stage layer
$(ishape).transformTool('show');
ishape.getParent().moveToTop();
_layer.draw();
});
function removeTransformToolSelection(){
//Search all objects inside the stage or layer who has the name of "objectInCanvas" using jQuery iterator and hide the transform tool.
$.each(_stage.find('.objectInCanvas'), function( i, child ) {
$(child).transformTool('hide');
});
}
//Event listener/Callback when selecting image using file upload element
function handleFileSelect(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
//Create image object for selected file
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
name:'objectInCanvas',
draggable:false,
id:'id_'
});
//Add to layer and add transform tool
_layer.add(myImage);
$(myImage).transformTool();
_layer.draw();
}
//Adding source to Image object.
var f = document.getElementById('files').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
//Attach event listener to FILE element
document.getElementById('files').addEventListener('change', handleFileSelect, false);
});