Hire the author: Dennis M
Introduction
An app screenshot builder is developed with Fabric.js is a great way to provide users with an easy and efficient platform to create screenshots in no time. Fabric.js is a powerful and versatile JavaScript library for creating and manipulating images and objects on the web. It has a wide range of features that we can use to build a comprehensive screenshot builder.
Using Fabric.js, developers can easily create a canvas for users to drag and drop images, text, and shapes onto, allowing them to quickly and easily create screenshots. As well, Fabric.js offers powerful image transformation capabilities, allowing users to rotate, resize, and crop screenshots with ease.
To build a complete screenshot builder, we’ll use various features of Fabric.js in this article. First, I’ll explain how to create a canvas with Fabric.js, and then show how to add text, shapes, and images to the canvas. This article will show you how to use JavaScript and Fabric.js to create an app screenshot builder that allows you to customize an app screenshot. Finally, users can download their creations using different devices, backgrounds, QR codes, and captions.
Photo Preview
Prerequisites
This tutorial focuses on a few languages, thus you should be familiar with:
- Basics of CSS and HTML
- Basics of JavaScript
- Excitement to learn
It is advantageous but not necessary to have some familiarity with the Canvas API and the <canvas> element.
Glossary
Fabric.js is a JavaScript library that makes it easy to create interactive, object-oriented graphics for web applications. It is capable of producing everything from simple web graphics to fully interactive 3D graphics. It provides a powerful, yet simple-to-learn, API for creating and manipulating graphical elements on the web. With Fabric.js, developers can quickly create interactive, highly-customizable graphics and animations that are both visually appealing and highly functional.
JavaScript is a high-level, often ECMAScript-compliant, just-in-time compiled language. As such, it supports dynamic typing, prototype-based object-oriented programming, and first-class functions. Finally, JavaScript supports event-driven, functional, and imperative programming styles, and is multi-paradigm. Also, it supports text, dates, regular expressions, standard data structures, and the Document Object Model (DOM) through an application programming interface (API).
Why Fabric.js?
Fabric.js has several features that make it a great choice for building an app screenshot builder. Lightweight and won’t bog down the user’s computer or take up too much memory. Also, it offers a wide range of features that make it easy to create complex graphics and animations. It provides an intuitive interface that is easy to learn and allows easy manipulation of objects in the scene.
Additionally, it supports a variety of formats, including SVG, PNG, and JPG, so developers can create graphics in any format they need. Fabric.js also makes it easy to create responsive designs. It works on both desktop and mobile, allowing developers to quickly create designs that look great on any device.
Step-by-step Procedure
Step 1: Cloning the launcher code
To keep this tutorial’s focus on JavaScript and Fabric.js, I’ve created a starter-code branch in the tutorial’s GitHub repository that contains the project’s HTML and CSS and the app screenshot data. Check out the main branch for the full product.
Type the following commands to clone the repository, checkout the starter-code branch, and enter the repository:
| $ git clone https://github.com/Dmuasya/app-screenshot-builder.git | |
| $ cd app-screenshot-builder |
Open your text editor and navigate to the Fabric.js app screenshot directory. The following directories and files should be visible:
Step 2: Using the Live Server in VS code
While working through this tutorial, I recommend using VS Code as the text editor with the Live Server extension. Simply open index.html and press alt+L, alt+O on Windows or cmd+L, cmd+O on Mac OS to start the local development server, and the server will reload whenever the project changes. Also, an easier method is clicking on the Go Live button at the bottom right of the screen
Step 3: Investigating the starter code
index.html
This is our project’s HTML file. Screenshots are created in a <div> with the drawingArea ID, and any changes made to the drawing area are rendered by our JavaScript and Fabric.js. To download our screenshot, we’ll add an event listener to the <canvas> element, and then we’ll render our screenshot on the <canvas> element.
css/apps-screenshot.css
The styles for this project are fairly straightforward, but I’d like to highlight the apps-screenshot CSS class. Whenever we make changes, we’ll apply this class to the button to show which screenshot is currently selected.
img/
This directory will store all the backgrounds and images for our screenshot app. I’ll leave it up to you to download the images and save them as the following filenames in img:
- As.png
- Gp.png
- Preview.png
- Screenshot.jpg
(As.png is not required; you can safely delete it.)
Step 4: Exploring the screenshot preview
When we load our screenshot app and choose export, we will render the screenshot on the canvas. Each template is a JavaScript object that contains screenshot metadata such as background, image, device, and title. Fabric uses this information to render the screenshot on the canvas. js/apps-screenshot.js exports all templates as an array:
| $("#deviceTypes").change(function(e) { | |
| $(".device").removeClass('device-android'); | |
| $(".device").removeClass('device-samsung'); | |
| $(".device").removeClass('device-htc'); | |
| $(".device").removeClass('device-nexus'); | |
| $(".device").removeClass('device-tablet'); | |
| $(".device").removeClass('device-windows'); | |
| $(".device").removeClass('device-iphone'); | |
| $(".device").addClass($(this).val()) | |
| }); | |
| $("#bcTypes").change(function(e) { | |
| var bc = $(this).val(); | |
| if (bc == 'big') { | |
| $('#appDiv').css('width', '820px'); | |
| $('#appDiv').css('padding', '20px'); | |
| $('.' + $("#deviceTypes").val()).css('margin', '20px'); | |
| canvas.setHeight(620); | |
| canvas.setWidth(800) | |
| } else { | |
| $('#appDiv').css('width', '400px'); | |
| $('#appDiv').css('padding', '120px 0px 120px 0px'); | |
| $('.' + $("#deviceTypes").val()).css('margin', 'auto'); | |
| canvas.setHeight(800); | |
| canvas.setWidth(380) | |
| } | |
| }); | |
| $("#saveImg").click(function() { | |
| html2canvas($("#appDiv"), { | |
| onrendered: function(fgfg) { | |
| window.open(fgfg.toDataURL('png')) | |
| } | |
| }) | |
| }); |
Let’s break down the properties of the objects in our screenshot app:
- #deviceTypes: The template’s display name of the app in the screenshot app.
- #saveImg: The path to the background image of the template where we keep all of the images locally
- canvas.setHeight(380): The height of the image in pixels. You can use this to specify the width of the canvas.
- canvas.setWidth(800): The image’s width in pixels. You can use this to specify the height of the canvas.
- #bcTypes: An array of objects describing the Type of background to render.
Step 5: Accessing the canvas with Fabric.js
Now that we’ve grasped the provided code, let’s get started by navigating to the canvas. To begin, we must create a JavaScript file containing all of the code for our screenshot app. To refer to it, create a . JS file called apps-screenshot.js and include a <script> tag in index.html. Finally, above the one we just added, add another <script> tag to load Fabric:
| <body> | |
| <!-- ... --> | |
| <script src="./js/apps-screenshot.js" type="module"></script> | |
| <!-- Fabric.js --> | |
| <script type="text/javascript" src="vendor/js/fabric.js"></script> | |
| <!-- miniColors --> | |
| <script type="text/javascript" src="vendor/js/jquery.miniColors.min.js"></script> | |
| <!-- html2canvas --> | |
| <script type="text/javascript" src="vendor/js/html2canvas.min.js"></script> | |
| <!-- appScreenshot --> | |
| <script src="src/js/apps-screenshot.js"></script> | |
| <script> | |
| $(function() { | |
| appScreenshot(); | |
| }); | |
| </script> | |
| </body> |
We can now create the fabric.Canvas object to gain access to the canvas. At the top of index.js, add the following code: Canvas is a <canvas> element wrapper that manages all Fabric objects on it. Also, we can modify canvas settings such as the size and background color.
Let’s double-check that we accessed the canvas correctly by adding the following code to set the canvas’ width, height, and background color:
| canvas.setWidth(500); | |
| canvas.setHeight(500); | |
| canvas.setBackgroundColor("red"); |
Finally, if you open index.html in your browser or launch Live Server, you should see the canvas..
Step 6: Making of an app screenshot
Given that Fabric.js has access to the canvas, let’s write a function called customTshirt() that will render a screenshot on the canvas. We’ll pass the metadata from the corresponding screenshot (from apps-screenshot.js) to the function when we click the save button.
In apps-screenshot.js, add the following function declaration:
| var appScreenshot = function customTshirt() { | |
| var canvas, | |
| a, | |
| b; | |
| } |
The screenshot is one of the objects in our metadata array. Then, in order to obtain the data required for the canvas, we will destruct the app screenshot object:
| var canvas, | |
| a, | |
| b; | |
| canvas = new fabric.Canvas('tcanvas', { | |
| hoverCursor: 'pointer', | |
| selection: true, | |
| selectionBorderColor: 'blue' | |
| }); |
The remainder of this function will be in charge of determining the dimensions of the canvas, selecting a background image, and adding the screenshot text fields.
With Fabric’s canvas, adjusting the dimensions is canvas.on function
| canvas.on({ | |
| 'object:moving': function(e) { | |
| e.target.opacity = 0.5 | |
| }, | |
| 'object:modified': function(e) { | |
| e.target.opacity = 1 | |
| }, | |
| 'object:selected': onObjectSelected, | |
| 'selection:cleared': onSelectedCleared | |
| }); |
This ensures that the canvas and background image are the same size. Canvas will be used to create the background image. FindTarget takes two arguments: the image’s URL and a callback to be called when the image loads. It points to an image in the img directory in our case, and the callback will re-render the canvas:
| canvas.findTarget = (function(b) { | |
| return function() { | |
| var a = b.apply(this, arguments); | |
| if (a) { | |
| if (this._hoveredTarget !== a) { | |
| canvas.fire('object:over', { | |
| target: a | |
| }); | |
| if (this._hoveredTarget) { | |
| canvas.fire('object:out', { | |
| target: this._hoveredTarget | |
| }) | |
| } | |
| this._hoveredTarget = a | |
| } | |
| } else if (this._hoveredTarget) { | |
| canvas.fire('object:out', { | |
| target: this._hoveredTarget | |
| }); | |
| this._hoveredTarget = null | |
| } | |
| return a | |
| } |
Finally, we must create an app screenshot and add it to the canvas. We’ll use Fabric’s class to create interactive text fields that we can reposition, resize, and edit directly on the canvas. The constructor also accepts options’ objects with options like the font family, size, and color of the text and adds them to the canvas using canvas.getActiveObject:
| $("#text-string").keyup(function() { | |
| var a = canvas.getActiveObject(); | |
| if (a && a.type === 'text') { | |
| a.text = this.value; | |
| canvas.renderAll() | |
| } | |
| }); |
Let’s test our renderAll implementation by exporting and saving a screenshot of our app. If everything goes well, you should see the following web app in your browser:
Experiment with different objects and changing the background of the app screenshot. Finally, Fabric.js provides us with this functionality with minimal effort.
Future Directions
The screenshot app builder is straightforward, and you can modify it to add more template customization. Here are some ideas for expanding on this project:
- It is possible to add and remove text fields.
- Allow users to alter text styles such as font family, color, and outline.
- Other than simple text over a background image, include template styles.
Learning Tools
To create an application screenshot builder, you must first read the Fabric.js documentation. I recommend starting with their Introduction to Fabric.js tutorials if you want to learn more about Fabric.js. Fabric.js has comprehensive documentation that can be helpful to you. Be sure to check out the documentation when you are working on your app screenshot builder, as it will provide you with detailed information about the different features and methods available in the library.
Finally, there are many online resources available to help you learn about Fabric.js and building an app screenshot builder. Make use of tutorials, videos, and forums to expand your knowledge and improve your skills.
Learning Strategies
Before diving into the more advanced features of Fabric.js, it’s important to first understand the basics of the library. This library includes learning about the different types of objects that you can create, such as shapes, text, and images, as well as the different methods and properties that are available for manipulating these objects.
Practice, practice, practice! As with any skill, practice is crucial when it comes to building an app screenshot builder using Fabric.js. Try experimenting with different objects, methods, and properties to see how they work, and use this experimentation to create your custom objects and interactions. Lastly, Stack Overflow was an excellent resource for creating the app screenshot builder.
Reflective Analysis
One of the main challenges when building an application screenshot builder with Fabric.js is the need to create a user-friendly interface. The app should be intuitive and easy to use, even for those who are not familiar with graphic design or programming. To overcome this challenge, it is important to invest time in the design and user testing phase, to ensure that the final product is user-friendly and easy to use.
Another challenge that can arise when building an app screenshot builder with Fabric.js is managing the different elements and layers in the canvas. Fabric.js allows for the creation of multiple layers in a single canvas, which can make it difficult to keep track of all the elements and make changes to them. To overcome this challenge, it is important to implement a strong organizational system as well as document the structure of the canvas.
Building an app screenshot builder with Fabric.js can be a challenging task, but the result is a powerful and versatile tool that you can use to create beautiful and engaging app screenshots. By investing time in the design and user testing phase, and implementing a robust organizational system, it is possible to overcome the challenges and create a high-quality and user-friendly app screenshot builder.
Conclusion
In conclusion, using Fabric.js to build an app screenshot builder allows for easy manipulation of elements in the screenshot, including the ability to add text, shapes, and images. The library’s powerful API and built-in functionality make it a great choice for creating a customizable and user-friendly screenshot builder. With some basic knowledge of JavaScript, developers can quickly and efficiently build a functional screenshot builder that can be integrated into larger projects or used as a standalone tool. Overall, Fabric.js provides a solid foundation for creating a powerful and versatile application screenshot builder.
Hey @Dennis M, well-written article a few things I noted however that might need improvement:
1. Commands provided for opening live-server did not work for me after reading the extension’s docs I discovered why below are the commands required (it’s a combination of two commands)
– PC (alt+L, alt+O).
– MAC (cmd+L, cmd+O)
Also, an easier method is clicking on the `Go Live` button at the bottom right of the screen
2. The code you provided as the starter-code does not have a `starter-code` branch just the main branch which has the final code.
3. I could follow through since I have some background knowledge but struggled sometime, it would help to know where exactly I am adding the code snippets for instance am I adding them into an existing function or am i creating a new one. If possible after adding a function showing how it affects the existing UI. So we build each part on step at a time.