使用新的Blob等

build/webpack.dev.conf.js

@@ -17,7 +17,7 @@ module.exports = merge(baseWebpackConfig, {
         })
     },
     // eval-source-map is faster for development
-    devtool: '#eval-source-map',
+    devtool: 'source-map',
     plugins: [
         new webpack.DefinePlugin({
             'process.env': config.dev.env

src/components/common/cropper-img.vue

@@ -63,23 +63,24 @@ export default {
     },
     // 显示裁剪框
     initCropper () {
-      if (!HTMLCanvasElement.prototype.toBlob) {
-        console.log('HTMLCanvasElement.prototype.toBlob');
-        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-          value: function (callback, type, quality) {
-            var canvas = this;
-            setTimeout(function () {
-              var binStr = window.atob(canvas.toDataURL(type, quality).split(',')[1]);
-              var len = binStr.length;
-              var arr = new window.Uint8Array(len);
-              for (var i = 0; i < len; i++) {
-                arr[i] = binStr.charCodeAt(i);
-              }
-              callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
-            });
-          }
-        });
-      }
+      // if (HTMLCanvasElement.prototype.toBlob) {
+      //   console.log('HTMLCanvasElement.prototype.toBlob');
+      //   Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+      //     value: function (callback, type, quality) {
+      //       var canvas = this;
+      //       setTimeout(function () {
+      //         var binStr = window.atob(canvas.toDataURL(type, quality).split(',')[1]);
+      //         var len = binStr.length;
+      //         var arr = new window.Uint8Array(len);
+      //         for (var i = 0; i < len; i++) {
+      //           arr[i] = binStr.charCodeAt(i);
+      //         }
+      //         // callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
+      //         callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
+      //       });
+      //     }
+      //   });
+      // }
 
       this.croppShow = true
       this.cropper = new Cropper(this.$refs.canvas, {

src/main.js

@@ -6,6 +6,7 @@ import store from './store/'
 const mixins = require('@/utils/mixins');
 import FastClick from 'fastclick'
 import vueFilters from '@/utils/filter'
+import '@/utils/toBlob';
 
 // 引入ElementUI
 import ElementUI from 'element-ui';

src/utils/toBlob.js

+/* canvas-toBlob.js
+ * A canvas.toBlob() implementation.
+ * 2016-05-26
+ * 
+ * By Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr
+ * License: MIT
+ *   See https://github.com/eligrey/canvas-toBlob.js/blob/master/LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/canvas-toBlob.js/blob/master/canvas-toBlob.js */
+
+(function(view) {
+  "use strict";
+  var
+        Uint8Array = view.Uint8Array
+      , HTMLCanvasElement = view.HTMLCanvasElement
+      , canvas_proto = HTMLCanvasElement && HTMLCanvasElement.prototype
+      , is_base64_regex = /\s*;\s*base64\s*(?:;|$)/i
+      , to_data_url = "toDataURL"
+      , base64_ranks
+      , decode_base64 = function(base64) {
+          var
+                len = base64.length
+              , buffer = new Uint8Array(len / 4 * 3 | 0)
+              , i = 0
+              , outptr = 0
+              , last = [0, 0]
+              , state = 0
+              , save = 0
+              , rank
+              , code
+              , undef
+          ;
+          while (len--) {
+              code = base64.charCodeAt(i++);
+              rank = base64_ranks[code-43];
+              if (rank !== 255 && rank !== undef) {
+                  last[1] = last[0];
+                  last[0] = code;
+                  save = (save << 6) | rank;
+                  state++;
+                  if (state === 4) {
+                      buffer[outptr++] = save >>> 16;
+                      if (last[1] !== 61 /* padding character */) {
+                          buffer[outptr++] = save >>> 8;
+                      }
+                      if (last[0] !== 61 /* padding character */) {
+                          buffer[outptr++] = save;
+                      }
+                      state = 0;
+                  }
+              }
+          }
+          // 2/3 chance there's going to be some null bytes at the end, but that
+          // doesn't really matter with most image formats.
+          // If it somehow matters for you, truncate the buffer up outptr.
+          return buffer;
+      }
+  ;
+  if (Uint8Array) {
+      base64_ranks = new Uint8Array([
+            62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1
+          , -1, -1,  0, -1, -1, -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9
+          , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
+          , -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
+          , 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
+      ]);
+  }
+  if (HTMLCanvasElement && (!canvas_proto.toBlob || !canvas_proto.toBlobHD)) {
+      if (!canvas_proto.toBlob)
+      canvas_proto.toBlob = function(callback, type /*, ...args*/) {
+            if (!type) {
+              type = "image/png";
+          } if (this.mozGetAsFile) {
+              callback(this.mozGetAsFile("canvas", type));
+              return;
+          } if (this.msToBlob && /^\s*image\/png\s*(?:$|;)/i.test(type)) {
+              callback(this.msToBlob());
+              return;
+          }
+  
+          var
+                args = Array.prototype.slice.call(arguments, 1)
+              , dataURI = this[to_data_url].apply(this, args)
+              , header_end = dataURI.indexOf(",")
+              , data = dataURI.substring(header_end + 1)
+              , is_base64 = is_base64_regex.test(dataURI.substring(0, header_end))
+              , blob
+          ;
+          if (Blob.fake) {
+              // no reason to decode a data: URI that's just going to become a data URI again
+              blob = new Blob
+              if (is_base64) {
+                  blob.encoding = "base64";
+              } else {
+                  blob.encoding = "URI";
+              }
+              blob.data = data;
+              blob.size = data.length;
+          } else if (Uint8Array) {
+              if (is_base64) {
+                  blob = new Blob([decode_base64(data)], {type: type});
+              } else {
+                  blob = new Blob([decodeURIComponent(data)], {type: type});
+              }
+          }
+          callback(blob);
+      };
+  
+      if (!canvas_proto.toBlobHD && canvas_proto.toDataURLHD) {
+          canvas_proto.toBlobHD = function() {
+              to_data_url = "toDataURLHD";
+              var blob = this.toBlob();
+              to_data_url = "toDataURL";
+              return blob;
+          }
+      } else {
+          canvas_proto.toBlobHD = canvas_proto.toBlob;
+      }
+  }
+  }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
\ No newline at end of file