Socket
Socket
Sign inDemoInstall

image-sketchpad

Package Overview
Dependencies
11
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    image-sketchpad

Draw on images within desktop and mobile browsers.


Version published
Weekly downloads
4
increased by100%
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

1.0.1 (2021-12-02)

Full Changelog

Readme

Source

Image Sketchpad (responsive)

preview

Draw on any image inside your desktop or mobile browser.

  • Get image with sketches as base64 string
    • or download it as PNG
  • Get sketches as JSON data
    • With it you can (re)load sketches, without saving a second image
    • No matter at which image size the data was generated
    • For example you can load the same sketches on a bigger version of the image, only ratio has to be the same
    • Load by method or data-sketchpad-json attribute
  • Set stroke options like line width or color
  • It works responsive, try it: draw on the image and resize the browser so the image will be smaller, so your sketch will be too.

  1. - It works responsive, try it: draw on the image and resize the browser so the image will be smaller, so your sketch will be too.
  2. Demo
  3. Install
  4. Usage
    1. Browser: VanillaJS
  5. Options
  6. Methods
    1. setOptions( options )
    2. enable()
    3. disable()
    4. toJson()
    5. loadJson( json )
    6. clear()
    7. undo()
    8. redo()
    9. mergeImageWithSketch(originalSize = true)
    10. download(originalSize = true)
    11. version()
  7. Documentation
  8. ToDo

Demo

You can see a working example online: DEMO

Install

npm install image-sketchpad --save

# yarn add image-sketchpad

Usage

I have included different files for different usages

Browser: VanillaJS

First include the JS file at the bottom of your html page

    <script src="image-sketchpad.min.js"></script>
  </body>
</html>

Second initialize the sketchpad and bind it to an image

    <img src="..." id="Image" />

    <script src="image-sketchpad.min.js"></script>
    <script>
        var img = document.getElementById('Image');
        var sketchpadOptions = {};
        var sketchPad = ImageSketchpad(img, sketchpadOptions);
    </script>
  </body>
</html>

That's it!

Options

NameTypeDefaultDescription
lineWidthint5Set the sketch line width
lineMaxWidthint-1Set the maximum line width, no matter which image ratio we have. -1 = no max width. _Mostly needed if you draw on zoomed images
lineColorstring#000Line color as hex value
lineCapenum(butt|round|square)roundCanvas line cap
lineJoinenum(round|bevel|miter)roundCanvas line join
lineMiterLimitint10Line miter limit

You can set sketchpad options on init or with the ImageSketchpad.setOptions(options) method.

Methods

After initialization you can always get the same instance by calling ImageSketchpad(el, opts) again on the same element. With this instance the following methods are available:


setOptions( options )

Set sketchpad options after initialization.

ParamTypeDefaultDescription
optionsUserOptionsSketchpad options

Return: ImageSketchpad


enable()

Enable sketching

Return: ImageSketchpad


disable()

Disable sketching

Return: ImageSketchpad


toJson()

Get sketch as JSON string.

Return: string


loadJson( json )

Load sketch from JSON string.

ParamTypeDefaultDescription
jsonstringSketch data as json string

Return: ImageSketchpad


clear()

Clear the sketchpad.

Return: ImageSketchpad


undo()

Undo last sketch.

Return: ImageSketchpad


redo()

Redo undone sketch.

Return: ImageSketchpad


mergeImageWithSketch(originalSize = true)

Merge the sketchpad canvas with the image and return a promise with a base64 string.

ParamTypeDefaultDescription
originalSizebooleantrueIf set to false it will merge the image exactly to the size like you see the image in the browser

Return: _Promise<string>__


download(originalSize = true)

Download the image you'll get with ImageSketchpad.mergeImageWithSketch() directly.

ParamTypeDefaultDescription
originalSizebooleantrueIf set to false it will download the image exactly with the size like you see the image in the browser

Return: ImageSketchpad


version()

Returns the package version (all libraries, components, modules should have something like this..).

Return: ImageSketchpad


Documentation

For the very interested: DOCUMENTATION

ToDo

Keywords

FAQs

Last updated on 02 Dec 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc