asBlob()

Author: ivictbor

README.md

@@ -226,20 +226,10 @@ You can also post data with binary `multipart/form-data` request which is more e
 The same image took `301949` bytes with `multipart/form-data`.
 
 ```js
-function dataURItoBlob(dataURI) {
-  var byteString = atob(dataURI.split(',')[1]);
-  var ab = new ArrayBuffer(byteString.length);
-  var ia = new Uint8Array(ab);
-  for (var i = 0; i < byteString.length; i++) {
-    ia[i] = byteString.charCodeAt(i);
-  }
-  return new Blob([ab], {type: 'image/png'});
-}
-
 var ptro = Painterro({
   saveHandler: function (image, done) {
     var formData = new FormData()
-    formData.append('image', dataURItoBlob(image.asDataURL()))
+    formData.append('image', image.asBlob())
     var xhr = new XMLHttpRequest();
     xhr.open('POST', 'http://127.0.0.1:5000/save-as-binary/', true);
     xhr.onload = xhr.onerror = function () {
@@ -318,3 +308,5 @@ ToDo list
 - Add recent image sizes in resize tool
 - Blur region
 - Ability to save loacaly
+- Save settings in loaclstorage
+- line arrows

example/templates/paste_as_bin.html

@@ -6,20 +6,10 @@
   {% include 'common.html' %}
   {% include 'images_list.html' %}
   <script>
-    function dataURItoBlob(dataURI) {
-      var byteString = atob(dataURI.split(',')[1]);
-      var ab = new ArrayBuffer(byteString.length);
-      var ia = new Uint8Array(ab);
-      for (var i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i);
-      }
-      return new Blob([ab], {type: 'image/png'});
-    }
-
     var ptro = Painterro({
       saveHandler: function (image, done) {
         var formData = new FormData()
-        formData.append('image', dataURItoBlob(image.asDataURL()))
+        formData.append('image', image.asBlob());
 
         var xhr = new XMLHttpRequest();
         xhr.open('POST', 'http://127.0.0.1:5000/save-as-binary/', true);

js/main.js

@@ -493,8 +493,21 @@ class PainterroProc {
         } else {
           return this.canvas.toDataURL(type);
         }
+      },
+      asBlob: (type) => {
+        if (type === undefined) {
+          type = 'image/png';
+        }
+        const uri = this.canvas.toDataURL(type);
+        const byteString = atob(uri.split(',')[1]);
+        const ab = new ArrayBuffer(byteString.length);
+        let ia = new Uint8Array(ab);
+        for (let i = 0; i < byteString.length; i++) {
+          ia[i] = byteString.charCodeAt(i);
+        }
+        return new Blob([ab], {type: type});
       }
-    }
+    };
 
     this.initEventHandlers();
     this.clear();