
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
image-sketchpad
Advanced tools
Draw on any image inside your desktop or mobile browser.
data-sketchpad-json
attributeYou can see a working example online: DEMO
npm install image-sketchpad --save
# yarn add image-sketchpad
I have included different files for different usages
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!
Name | Type | Default | Description |
---|---|---|---|
lineWidth | int | 5 | Set the sketch line width |
lineMaxWidth | int | -1 | Set the maximum line width, no matter which image ratio we have. -1 = no max width. _Mostly needed if you draw on zoomed images |
lineColor | string | #000 | Line color as hex value |
lineCap | enum(butt|round|square) | round | Canvas line cap |
lineJoin | enum(round|bevel|miter) | round | Canvas line join |
lineMiterLimit | int | 10 | Line miter limit |
You can set sketchpad options on init or with the ImageSketchpad.setOptions(options) method.
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:
Set sketchpad options after initialization.
Param | Type | Default | Description |
---|---|---|---|
options | UserOptions | Sketchpad options |
Return: ImageSketchpad
Enable sketching
Return: ImageSketchpad
Disable sketching
Return: ImageSketchpad
Get sketch as JSON string.
Return: string
Load sketch from JSON string.
Param | Type | Default | Description |
---|---|---|---|
json | string | Sketch data as json string |
Return: ImageSketchpad
Clear the sketchpad.
Return: ImageSketchpad
Undo last sketch.
Return: ImageSketchpad
Redo undone sketch.
Return: ImageSketchpad
Merge the sketchpad canvas with the image and return a promise with a base64 string.
Param | Type | Default | Description |
---|---|---|---|
originalSize | boolean | true | If set to false it will merge the image exactly to the size like you see the image in the browser |
Return: _Promise<string>__
Download the image you'll get with ImageSketchpad.mergeImageWithSketch() directly.
Param | Type | Default | Description |
---|---|---|---|
originalSize | boolean | true | If set to false it will download the image exactly with the size like you see the image in the browser |
Return: ImageSketchpad
Returns the package version (all libraries, components, modules should have something like this..).
Return: ImageSketchpad
For the very interested: DOCUMENTATION
1.0.2 (2021-12-02)
FAQs
Draw on images within desktop and mobile browsers.
The npm package image-sketchpad receives a total of 11 weekly downloads. As such, image-sketchpad popularity was classified as not popular.
We found that image-sketchpad demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.