jpeg-web-worker
Generate a jpeg (or png) using a web worker
Motivation
The browser can generate a jpeg for you from an HTML canvas:
var canvas = document.getElementById("myCanvas");
var img = canvas.toDataURL("image/jpg");
Which you can write to an image tag using:
document.write('<img src="'+img+'"/>');
or create as a blob (which can be sent as a part of a form) using:
var blob = canvas.toBlob( callback , 'image/jpeg' );
But what if the toDataURL
or toBlob
call takes too long. Maybe the image is large or you are performing this call many times on different canvases. It would be nice to have the heavy duty of converting the canvas data to a jpeg off of the main application process. Perhaps through a web worker. This library provides the web worker file.
Usage
If you're working in the browser
Getting the web worker file out of npm modules to be used by browser can be tricky. You can either copy the index.js into your project directory directly and rename it. Or you can use workerify to convert this module to a blob to be used with browserify.
API
The message to be posted
{
image: {
data: [An RGBA array. This can typically be created by a canvas's context.getImageData],
height: [Integer],
width: [Integer]
},
quality: [OPTIONAL, defaults to 50. Integer from 0 (low quality) - 100 (high quality)]
}
The message to be received
{
data: {
data: [An RGBA Uint8Array, this time in JPEG encoding. Can be used to generate a jpeg blob.],
height: [Integer],
width: [Integer]
}
}
Example
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var worker = new Worker('jpeg-web-worker.js');
worker.postMessage({
image: imageData,
quality: 50
});
worker.onmessage = function(e) {
// e.data is the imageData of the jpeg. {data: U8IntArray, height: int, width: int}
// you can still convert the jpeg imageData into a blog like this:
var blob = new Blob( [e.data.data], {type: 'image/jpeg'} );
}
PNG Support
worker.postMessage({
image: imageData,
png: true,
quality: 50
});
worker.onmessage = function(e) {
// Make sure to specify the type as png.
var blob = new Blob( [e.data.data], {type: 'image/png'} );
}
Credits
This library relies almost entirely on an adaptation of the encoder from the jpeg-js library. This library was built to work in a node.js environment and not in the browser, let alone in a web worker environment.
The png part of this library is pulled directly from https://github.com/photopea/UPNG.js
License
jpeg-js library uses a 3-clause BSD license as follows:
Copyright (c) 2014, Eugene Ware
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
- Neither the name of Eugene Ware nor the names of its contributors
may be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY EUGENE WARE ''AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL EUGENE WARE BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
The original license information about the encoder including the original port to javascript by Andreas Ritter, and the adobe license can be found on the jpeg-js's readme