|
| 1 | +canvas-to-bmp |
| 2 | +============= |
| 3 | + |
| 4 | +Client side HTML5 Canvas to BMP file format converter with support for |
| 5 | +alpha channel. |
| 6 | + |
| 7 | +Virtually all browsers can read BMP files, but not all browsers supports |
| 8 | +BMP with canvas' toDataURL(). |
| 9 | + |
| 10 | +The **canvas-to-bmp** plugin solves this when you need your canvas |
| 11 | +graphics as BMP. |
| 12 | + |
| 13 | + |
| 14 | +Features |
| 15 | +-------- |
| 16 | + |
| 17 | +- Fast and small! |
| 18 | +- All operations are asynchronous and non-blocking |
| 19 | +- Supports alpha channel |
| 20 | +- Can convert Canvas to BMP as ArrayBuffer |
| 21 | +- Can convert Canvas to BMP as Blob |
| 22 | +- Can convert Canvas to BMP as Data-URI |
| 23 | +- No dependencies |
| 24 | +- Documented source incl. HTML version (see docs/ folder) |
| 25 | + |
| 26 | + |
| 27 | +Install |
| 28 | +------- |
| 29 | + |
| 30 | +**canvas-to-bmp** can be installed in various ways: |
| 31 | + |
| 32 | +- Bower: `bower install canvas-to-bmp` |
| 33 | +- Git using HTTPS: `git clone https://github.com/epistemex/canvas-to-bmp.git` |
| 34 | +- Git using SSH: `git clone [email protected]:epistemex/canvas-to-bmp.git` |
| 35 | +- Download [zip archive](https://github.com/epistemex/canvas-to-bmp/archive/master.zip) and extract. |
| 36 | +- [canvastobmp.min.js](https://raw.githubusercontent.com/epistemex/canvas-to-bmp/master/canvastobmp.min.js) |
| 37 | + |
| 38 | + |
| 39 | +Usage |
| 40 | +----- |
| 41 | + |
| 42 | +**canvas-to-bmp** is very easy to use. Just include the script in header |
| 43 | +or before the script section in your HTML file. |
| 44 | + |
| 45 | +To convert the canvas to a BMP file, call: |
| 46 | + |
| 47 | + CanvasToBMP.toDataURL(canvas, function(uri) { |
| 48 | + // uri is a Data-URI that can be used as source for images etc. |
| 49 | + // uri = "data:image/bmp;base64, ...etc..."; |
| 50 | + }); |
| 51 | + |
| 52 | +A faster option to Data-URIs is using Blobs: |
| 53 | + |
| 54 | + CanvasToBMP.toBlob(canvas, function(blob) { |
| 55 | + // blob object can be converted to an objectURL and then |
| 56 | + // set as source for images, or as download target: |
| 57 | + var url = URL.createObjectURL(blob); |
| 58 | + }); |
| 59 | + |
| 60 | +For convenience a direct Canvas to ObjectURL method is included: |
| 61 | + |
| 62 | + CanvasToBMP.toObjectURL(canvas, function(url) { |
| 63 | + // can be used as source for image or download target |
| 64 | + }); |
| 65 | + |
| 66 | +Convert to an ArrayBuffer that can be sent over the net: |
| 67 | + |
| 68 | + CanvasToBMP.toArrayBuffer(canvas, function(buffer) { |
| 69 | + // buffer is ArrayBuffer with the BMP file |
| 70 | + }); |
| 71 | + |
| 72 | +IMPORTANT: As with with ordinary canvas, cross-origin resource sharing |
| 73 | +(CORS) requirements must be fulfilled (see link below). |
| 74 | + |
| 75 | + |
| 76 | +Issues |
| 77 | +------ |
| 78 | + |
| 79 | +Feel free to report any issues you find. |
| 80 | + |
| 81 | +Go to [issue tracker](https://github.com/epistemex/canvas-to-bmp/issues). |
| 82 | + |
| 83 | +**Please note (these are not related to canvas-to-bmp):** |
| 84 | + |
| 85 | +- Using large data-URIs can block the browser when it decodes them (use Blobs and ObjectURL instead) |
| 86 | +- Firefox (incl. v39) ignores the alpha channel in BMP files when reading them |
| 87 | +- [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is a security mechanism in the browser. |
| 88 | + |
| 89 | + |
| 90 | +License |
| 91 | +------- |
| 92 | + |
| 93 | +Released under [MIT license](http://choosealicense.com/licenses/mit/). You may use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included. |
| 94 | + |
| 95 | + |
| 96 | +*© Epistemex 2015* |
| 97 | + |
| 98 | + |
0 commit comments