DEV Community: Ramin

Pikaso now supports NodeJs

Ramin — Sun, 12 Jun 2022 11:13:56 +0000

As of version 2.7.0, NodeJs is supported.
This will enable collaboration between backend and frontend sides in creating images.

Using Pikaso in a NodeJs environment is similar to using it in a browser.

Note that you must install node-canvas separately.

npm install canvas

const { Pikaso } = require('pikaso')

const editor = new Pikaso({
  width: 800,
  height: 600
})

editor.shapes.circle.insert({
  x: 200,
  y: 200,
  radius: 40,
  fill: 'blue'
})

const base64Url = editor.export.toImage()

Github:
https://github.com/pikasojs/pikaso

Website:
https://pikaso.app

Pikaso v2.6 released

Ramin — Mon, 16 May 2022 22:23:02 +0000

Pikaso v2.6 was released. The release contains a number of bug fixes and new features.

Introducing Background Size

From v2.6.0, both editor.loadFromUrl and editor.loadFromFile accept a second parameter with this interface

interface BackgroundOptions {
  size: 'auto' | 'resize' | 'cover' | 'contain' | 'stretch'
  x: number
  y: number
}

The size field describes how a background image should be loaded in the canvas. The functionality is the same as the CSS feature background-size.

editor.loadFromUrl('<url>') // resizes canvas to to file's size by default

editor.loadFromUrl('<url>', {
  size: 'cover'
})

editor.loadFromFile('<File>', {
  size: 'stretch'
})

Improve Label Shape

Labels can now be resized from different perspectives.
The following configuration should be followed to enable resizing from different aspects:
keepScale will be accessible as of v2.6.0 and by setting that to false, the default scaling behavior will be disabled.
Also, all options for Konva.Transformer are available through transformer

editor.shapes.label.insert({
    container: {/* config */},
    tag: {/* config */},
    text: {/* config */},
    config: {
      keepScale: false|true, // By setting keepScale to false, the default scaling behavior will be disabled
      transformer: {
        keepRatio: true, // keepRatio set to true to maintain scaling when scaling from corners
        enabledAnchors: ['middle-left', 'middle-right', 'bottom-right'] // Here are all the options available https://konvajs.org/api/Konva.Transformer.html#enabledAnchors__anchor
      }
    }
  })

Improve Export/Import

zIndex export/import is now supported.

Pikaso v2.5.0 is released

Ramin — Mon, 28 Mar 2022 11:57:07 +0000

I am pleased to announce the release of version 2.5.0 today.

This release includes one new feature and one important improvement.

Introduce Measurement Tag

Resize the red box to see how it works:

Improve SVG drawing

To achieve a smoother drawing experience, the logic for drawing SVG paths has been reimplemented.

Click and drag the mouse to see what it looks like:

Pencil Drawing

Pencil Drawings have a minor difference in that, unlike other shapes, they begin a new drawing when the current one ends.
The editor.shapes.pencil.stopDrawing() method or editor.board.setActiveDrawing(null) method must be called in order to stop pencil drawing.

Draw something cool and then hit the "esc" key on your keyboard to finish the drawing.

Pikaso's full feature list is available at https://pikaso.app and https://github.com/pikasojs/pikaso

The JS canvas editor Pikaso has been around for a year

Ramin — Thu, 17 Mar 2022 10:51:47 +0000

Pikaso, an open source library I created, has just been updated to version 2.4.0

It added a lot of new features to the core library in that release.

It seems like a good time to introduce the library here since I believe it might be useful to the community.

In essence, Pikaso is a seamless, fully typed and fully tested library that includes a lot of features out of the box that make working with canvas incredibly easy.

It provides all basic shapes, pencil and shape drawing, images and filters, SVG, groups management, flip, rotation, export to image and json, import from json, events, undo/redo, snap to grid and many other features. (more)

Additionally, it comes with a powerful cropper with four modes.

Almost every feature, such as color, style, and anything else, can be customized.

This library can be used with any library, such as React, Angular, Vue, Svelte or Vanilla Js
In addition to contributing the library, I am constantly adding new features to it.

With Pikaso, you can design your own image cropper, Social Network image editor, T-shirt maker, avatar maker, Canva-like app, or even create your own Figma-style app.

More details can be found in the Github repository https://github.com/pikasojs/pikaso and you can view the documentation and demos at https://pikaso.app or API reference

Thank you for giving the project a Github star if you liked it, because it will help others find the project and trust that, and it motivates me to spend more time on it. Appreciate it.

https://github.com/pikasojs/pikaso