4

Is there any tools available that enables a user to …

  • draw custom text blocks in a canvas area with custom font styles
  • change background color, image etc and also allow to paste an image in any portion of canvas
  • remove the custom blocks [ text block or image blocks added ] on the canvas and to drag and change the position to anywhere in the canvas
  • edit the blocks he added text and image etc
  • view the custom card in admin side with all needed properties as well [ Like metadata of every blocks of texts or images with its values ]

The main aim is to allow user to design a custom card like in sites like PrintLand and PrintVenue etc.

  • Do you search for a library on which you can build such a program or do you need an already scripted program which you can place on your website? – ComFreek Sep 12 '14 at 11:01
  • I am looking for both options. If some already scripted tools available in a ready to integrate Or some opensource kind of stuffs – Jibin Mathew Sep 15 '14 at 4:32
3

Fabric.js

  • Open source
  • You can insert custom text blocks with custom formatting. See the documentation about text manipulation.
  • A background can be set. See the documentation (scroll down to the heading Canvas background and overlay).
  • An image can be loaded anywhere into the canvas. See the documentation about images.
  • Support for dragging is included. Try it on the Fabric.js homepage: http://fabricjs.com/
  • Deleting objects is very easy, I've done it before. You have to include a button on your site (e.g. "delete selected object"), get the selected object via Fabric.js' API and delete it.
  • Editing text is integrated, see https://stackoverflow.com/a/22126898/603003
  • Editing images is (as far as I know) up to you. You have image filters though: http://fabricjs.com/fabric-intro-part-2/
  • The canvas' state can be serialized and can be loaded again at any time. The easiest way to use metadata is to simply add your keys and values to Fabric.js' objects (which are 'nothing' more than JS objects).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.