Online maker of cards, posters and banners GRAPHER Visit site

Vue.js
JavaScript
Canvas
Php

Online editor for designing a graphic project. The finished work can be downloaded, printed, sent by mail, WhatsApp or Viber, and also shared on social networks.

Vue.js online maker of cards, posters and banners

The GRAPHER editor is intended for constructing a graphic project in a browser.

In it, you can make your own postcard, invitation or advertising banner for the site in just 3 minutes. Intuitive, all functions are visible, no need to look for anything. Any element can be changed instantly without unnecessary clicks on functional blocks and command context menus.

The finished work can be downloaded, printed, sent by mail, WhatsApp or Viber, as well as shared on social networks.

GRAPHER is a free service and no watermark with a logo. With its help, any user can immerse themselves in creativity, engage in graphic design, experiment with different design of compositional elements.

What a constructor can do

Choose a background color or image, upload your own background image, tint the background.
Add pictures or upload your own. Crop the image, add a border and round the corners.
Overlay a title or block of text.
Tools for working with text: color, font, font size, text alignment, weight and type, letter and line spacing, shadow, transparency.
Add frames and corners, set them the desired color.
Place geometric shapes on the sheet, choose their color, add an outline.

Any element can be:

move around the sheet,
scale and rotate with the mouse,
flip horizontally and vertically,
rearrange to a level lower or higher,
change its transparency,
delete.

Technologies and plugins used:

Vue.js
JavaScript mouse events
Canvas
SVG
Generating and connecting web fonts
Dom-to-image (getting an image from an HTML element)
Uploading an image to a server (PHP)
Vue-social-sharing (share buttons)

Links

Project address: Online constructor GRAPHER

View all folders and files

Here below is just the script file:

app.js

										const bodyTag = document.querySelector('body');
const navToggler = document.querySelector('.nav-toggler');