Skip to content

Instantly share code, notes, and snippets.

@kameshsampath

kameshsampath/photobooth.html

Last active September 24, 2018 16:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kameshsampath/8bf31b108449db1bba43d7c090db465b to your computer and use it in GitHub Desktop.
Save kameshsampath/8bf31b108449db1bba43d7c090db465b to your computer and use it in GitHub Desktop.
Download ZIP
How to use fabricjs and HTML5 to create a image application
Raw
photobooth.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collaby by Code :: Demo Code for Photo and Filter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- the javascript library used for build the Photo with Frames -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="1024" height="512"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var frame0 = "https://cdn3.iconfinder.com/data/icons/people-jobs-2-1/512/xxx018-512.png";
var frame1 = "https://preview.ibb.co/dWKErp/frame1_A.png"
var frame2 = "https://preview.ibb.co/gWqb49/frame3_B.png"
var frame3 = "https://preview.ibb.co/c69VWp/frame2_A.png"
//Layer-0 The photo that was taken with Webcam or any other photo
new fabric.Image.fromURL(frame0, function(img){
img.left = 40;
img.top = 60;
canvas.add(img);
canvas.moveTo(img,0)
img.scaleToWidth(512 * 0.4);
});
//Layer-1 The first frame to be applied - e.g. the purple frame
new fabric.Image.fromURL(frame1, function(img){
img.left = 0;
img.top = 0;
canvas.add(img);
canvas.moveTo(img,1)
});
//Layer-2 The second frame to be applied - e.g the I love Grace Hopper
new fabric.Image.fromURL(frame2, function(img){
img.left = 0;
img.top = 0;
canvas.add(img);
canvas.moveTo(img,2)
});
//Layer-3 The third frame to be applied - e.g the Fedora
new fabric.Image.fromURL(frame3, function(img){
img.left = -10;
img.top = 20;
canvas.add(img);
canvas.moveTo(img,3)
});
//Render all the images
canvas.renderAll();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment