Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
image-clipper
Advanced tools
Crop your images purely using the native Canvas APIs, for the Browser & Electron & NW.js (Node-webkit), without any image processing library dependencies.
Crop your images purely using the native Canvas APIs, for the Browser & Electron & NW.js (Node-webkit), without any image processing library dependencies.
When we develop Electron or NW.js application, I found it's very inconvenient when using image processing libraries such as gm and node-canvas, when you publish your application, probably the first thing you have to do is prompts your user to install multiple local dependencies, For example, gm
relies GraphicsMagick, node-canvas
relies Cairo.
However, i just need to use a very small part of gm
functions provided, and do some simple image operations, such as crop, we should avoid users to install those cumbersome things that may frustrated your user, sometimes there is no need to install those!
Your application will running in the browser or Electron or NW.js, and you just want to do some simple image operations, then image-clipper
may be what you want!
image-clipper
can make you avoid using the kind of large modules that depends client to install additional local dependencies. It use the native canvas APIs to crop your images.
Note: If your project is a purely Node.js project, please use the dedicated image processing library that provide more comprehensive functions, such as gm
and node-canvas
, because you can install anything on the server.
npm install image-clipper
or bower install image-clipper
or just download imageClipper.js from the git repo.
var path = require('path');
var ImageClipper = require('image-clipper');
var clipper = new ImageClipper();
var x = 20;
var y = 20;
var width = 100;
var height = 100;
var outputFileName = path.join(exportPath, 'example-clipped.jpg');
clipper.loadImageFromUrl('example.jpg', function() {
this.crop(x, y, width, height, function(dataUrl) {
this.toFile(outputFileName, dataUrl, function() {
console.log('the file has been saved');
});
});
});
HTML:
<img src="" alt="preview" id="preview">
<script src="./dist/imageClipper.js"></script>
JS:
var clipper = new ImageClipper();
var preview = document.getElementById('preview');
clipper.loadImageFromUrl('example.jpg', function() {
this.crop(x, y, width, height, function(dataUrl) {
preview.src = dataUrl;
});
});
Or you can preview the demo using npm run server
and open http://localhost:9100/example/browser.html
First initialize an ImageClipper instance to demonstrate:
var ImageClipper = require('image-clipper');
var clipper = new ImageClipper();
Load image from url.
Note: in all callbacks, allow using
this
to call instance methods
Crop rectangular area of canvas and pass data url to callback when done.
clipper.loadImageFromUrl
will eventually using this method to crop image.
Here is an example:
clipper.loadImageFromMemory(image).crop(x, y, width, height, function(dataUrl) {
console.log('cropped!');
});
In this case, the best practice is to place the code in onload
callback:
image.onload(function(){ //... });
image/jpeg
or image/webp
.Here is an example:
clipper.loadImageFromMemory(image).quality(0.68).crop(x, y, width, height, function(dataUrl) {
console.log('cropped!');
});
Convert data url to binary image file.
Note: just for Electron & NW.js, otherwise return the original data url.
Here is an example:
clipper.loadImageFromMemory(image).crop(x, y, width, height, function(dataUrl) {
this.toFile(outputFileName, dataUrl, function() {
console.log('saved');
});
});
Used to clear rectangular area of canvas. The parameters description see crop
above.
Here is an example:
clipper.loadImageFromUrl('example.jpg', function() {
this.clearArea(50, 50, 100, 100).crop(0, 0, 300, 300, function(dataUrl) {
preview.src = dataUrl;
});
});
Return data url of current canvas.
Used to restore the canvas, useful after clearArea()
.
Here is an example:
clipper.loadImageFromUrl('example.jpg', function() {
clipper.clearArea(50, 50, 100, 100).crop(0, 0, 300, 300, function(dataUrl) {
console.log('cropped, part of data has been cleared');
clipper.reset().crop(50, 50, 100, 100, function(dataUrl2) {
console.log('regained the cleared data:', dataUrl2);
});
});
});
Return current Canvas object.
var canvas = clipper.getCanvas();
// canvas.width
// canvas.height
First install jasmine:
cd test/jasmine && bower install jasmine
Then you can run the tests using npm run server
and open http://localhost:9100/test/jasmine/runner.html
MIT, see the LICENSE file for detail.
FAQs
Node.js module for clipping & cropping JPEG, PNG, WebP images purely using the native Canvas APIs, excellent compatibility with the Browser & Electron & NW.js (Node-webkit), itself doesn't relies on any image processing libraries.
The npm package image-clipper receives a total of 1,292 weekly downloads. As such, image-clipper popularity was classified as popular.
We found that image-clipper 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
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.