A JavaScript library to open, view, edit and save OpenRaster images.
- Thumbnail
- Pre-rendered image is used if present
- Layers
- Layer blending modes
Just copy ora.js and the included dependencies to your scripts folder. If you want layer blending modes, copy ora-blending.js too.
In your HTML file, include the libraries:
<script type="text/javascript" src="zip.js"></script>
<script type="text/javascript" src="zip-fs.js"></script>
<script type="text/javascript" src="ora.js"></script>
<script type="text/javascript" src="ora-blending.js"></script>
Note that if you use web workers you might need extra configuration to find worker scripts:
<script type="text/javascript">
ora.scriptsPath = "resources/";
</script>
Pass the .ora file to ora.load(), and use drawThumbnail() or drawComposite() to draw the image into a canvas element.
ora.load(fileInput.files[0], function(oraFile) {
oraFile.drawThumbnail(thumbCanvas);
oraFile.drawComposite(imageCanvas, function() {
// update things on completion, hide progress bars, etc.
});
});
Alternatively, you can create a new Ora object and load into that:
var oraFile = new ora.Ora();
oraFile.load(fileInput.files[0], function(oraFile) {
// do things
});
Or just create an empty image and make your own layers:
var oraFile = new ora.Ora(100, 100);
var layer = oraFile.addLayer('layer', 0);
// load image from any source...
layer.image = new Image();
// ...
layer.composite = 'svg:multiply';
layer.opacity = 0.7;
layer.x = 25;
layer.y = 30;
You can access and modify the already existing layers though the layers array.
oraFile.layers[3].opacity = 0.1;
oraFile.layers[0].visibility = 'hidden';
And when you are done, you can save the image into a Blob using save().
oraFile.save(function (blob) {
// save to disk or send to your server...
});
The project is using a slightly modified version of the zip.js library.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent