format and quality support

Author: ivictbor

README.md

@@ -37,6 +37,7 @@ Table of contents
     * [Base64 saving](#base64-saving)
     * [Binary saving](#binary-saving)
     * [Saving to WYSIWYG](#saving-to-wysiwyg)
+    * [Format and quality](#format-and-quality)
   * [Development](#development)
     * [Building painterro](#building-painterro)
     * [Dev-server](#dev-server)
@@ -194,7 +195,7 @@ var ptro = Painterro({
       xhr.open("POST", "http://127.0.0.1:5000/save-as-base64/");
       xhr.setRequestHeader("Content-Type", "application/json");
       xhr.send(JSON.stringify({
-        image: image.asDataURL('image/png')
+        image: image.asDataURL()
       }));
       xhr.onload = function (e) {
         // after saving is done, call done callback
@@ -266,6 +267,16 @@ You can just insert image as data urlto any WYSIWYG editor, e.g. TinyMCE. Image
     })
 ```
 
+Format and quality
+------------------
+
+When you call `image.asDataURL()` or `image.asBlob()`, you can also specify image format, e.g.
+`image.asDataURL('image/jpeg')`. Default format is `'image/png'`. 
+If type is `image/jpeg` or `image/webp`, you can also define image quality from `0.0` to `1.0`, default is `0.92`, 
+example: `image.asDataURL('image/jpeg', 0.5)`
+
+
+
 Development
 ===========
 

js/main.js

@@ -486,19 +486,13 @@ class PainterroProc {
        /**
        * Returns image as base64 data url
        * @param {string} type - type of data url, default image/png
+       * @param {string} quality - number from 0 to 1, works for `image/jpeg` or `image/webp`
        */
-      asDataURL: (type) => {
-        if (type === undefined) {
-          return this.canvas.toDataURL();
-        } else {
-          return this.canvas.toDataURL(type);
-        }
+      asDataURL: (type, quality) => {
+        return this.getAsUri(type, quality);
       },
-      asBlob: (type) => {
-        if (type === undefined) {
-          type = 'image/png';
-        }
-        const uri = this.canvas.toDataURL(type);
+      asBlob: (type, quality) => {
+        const uri = this.getAsUri(type, quality);
         const byteString = atob(uri.split(',')[1]);
         const ab = new ArrayBuffer(byteString.length);
         let ia = new Uint8Array(ab);
@@ -514,6 +508,16 @@ class PainterroProc {
     this.hide();
   }
 
+  getAsUri (type, quality) {
+    if (type === undefined) {
+      type = 'image/png';
+    }
+    if (quality === undefined) {
+      quality = 0.92;
+    }
+    return this.canvas.toDataURL(type, quality);
+  }
+
   save () {
     if (this.saving) {
       return