add dist

site/src/demo/index.js

@@ -0,0 +1,45 @@
+import Vue from 'vue/dist/vue';
+
+const VueCoreImageUpload = require('../index');
+
+Vue.config.silent = false;
+
+Vue.config.devtools = false;
+
+new Vue({
+  el: '#app',
+  components: {
+    'vue-core-image-upload': VueCoreImageUpload
+  },
+  data: {
+    name: 'Jiraiya',
+    src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
+    cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
+    cropArgs: {},
+    data: {token: '123123123'}
+  },
+  methods: {
+    imageuploaded(res) {
+      if (res.errcode === 0) {
+        if (res.data.src) {
+          this.src = res.data.src;
+          return;
+        }
+        this.name = res.data.name;
+        this.cropArgs = {
+          toCropImgH: parseInt(res.data.post.toCropImgH),
+          toCropImgW: parseInt(res.data.post.toCropImgW),
+          toCropImgX: parseInt(res.data.post.toCropImgX),
+          toCropImgY: parseInt(res.data.post.toCropImgY)
+        }
+        this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';   
+      }
+    },
+    imagechanged(res) {
+      console.log(res);  
+    },
+    errorhandle: function(msg) {
+      console.warn(msg);
+    }
+  }
+});

site/src/index.js

@@ -0,0 +1,2 @@
+import VueCoreImageUpload from './vue-core-image-upload.vue';
+export default VueCoreImageUpload;

site/src/lib/canvas-helper.js

@@ -0,0 +1,91 @@
+/**
+* compress image
+* reference https://github.com/brunobar79/J-I-C
+**/
+
+export default {
+  _getImageType(str) {
+    let mimeType = 'image/jpeg';
+    const outputType = str.match(/(image\/[\w]+)\.*/)[0];
+    if (typeof outputType !== 'undefined'){
+      mimeType = outputType;
+    }
+    return mimeType;
+  },
+
+  compress (src, quality, callback) {
+    const reader = new FileReader();
+    const self = this;
+    reader.onload = function(event) {
+      let image = new Image();
+      image.src = event.target.result;
+      image.onload = function() {
+        const mimeType = self._getImageType(src.type);
+        const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
+        const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
+        const newImageData = cvs.toDataURL(mimeType, quality/100);
+        callback(newImageData);
+      }
+    };
+    reader.readAsDataURL(src);
+  },
+  /**
+  * crop image via canvas and generate data
+  **/
+  crop(image, options, callback) {
+    const checkNumber = function(num) {
+      return (typeof num === 'number');
+    };
+    // check crop options
+    if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
+      let w = options.toCropImgW;
+      let h = options.toCropImgH;
+      if(options.maxWidth && options.maxWidth < w) {
+        w = options.maxWidth;
+        h = options.toCropImgH * w / options.toCropImgW;
+      }
+      if (options.maxHeight && options.maxHeight < h) {
+        h = options.maxHeight
+      }
+      const cvs = this._getCanvas(w, h);
+      const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
+      const mimeType = this._getImageType(image.src);
+      const data = cvs.toDataURL(mimeType, options.compress/100);
+      callback(data);
+    }
+  },
+
+  resize(image, options, callback) {
+    const checkNumber = function(num) {
+      return (typeof num === 'number');
+    };
+    if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
+      let w = options.toCropImgW  * options.imgChangeRatio;
+      let h = options.toCropImgH * options.imgChangeRatio;
+      const cvs = this._getCanvas(w, h);
+      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
+      const mimeType = this._getImageType(image.src);
+      const data = cvs.toDataURL(mimeType, options.compress/100);
+      callback(data);
+    }
+  },
+
+  _loadImage(data, callback) {
+    const image = new Image();
+    image.src = data;
+    image.onload = function () {
+      callback(image);
+    }
+    image.onerror = function() {
+      console.log('Error: image error!');
+    }
+  },
+
+  _getCanvas(width, height) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  },
+
+};

site/src/lib/drag.js

@@ -0,0 +1,29 @@
+import helper from './helper';
+
+const isMobile = helper.isMobile;
+export default function drag(e, el, coor) {
+  if (!el) {
+    return;
+  }
+  const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
+  const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
+
+  let left = currentX - coor.x;
+  let top = currentY - coor.y;
+  if (left <= coor.minLeft) {
+    left = coor.minLeft;
+  }
+  if (left >= coor.maxLeft) {
+    left = coor.maxLeft;
+  }
+  if (top <= coor.minTop) {
+    top = coor.minTop;
+  }
+  if (top >= coor.maxTop) {
+    top = coor.maxTop;
+  }
+  return {
+    left,
+    top
+  };
+};

site/src/lib/helper.js

@@ -0,0 +1,15 @@
+module.exports = {
+  isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+
+  setCssText: function(obj) {
+    var cssArr = [];
+    for(var key in obj) {
+      var val = obj[key];
+      if (typeof val === 'number') {
+        val = '' + val + 'px';
+      }
+      cssArr.push(key + ': ' + val + ';');
+    }
+    return cssArr.join('');
+  }
+};

site/src/lib/resize.js

@@ -0,0 +1,88 @@
+/** Reszie
+ * @el  dom
+ * @container  dom
+ * @ratio  string '1:1' like this
+ * e events
+ **/
+import helper from './helper';
+
+const isMobile = helper.isMobile;
+const W = document.body.offsetWidth;
+export default function resize(e, el, container, coor, ratio) {
+  if (!el) {
+    return ;
+  }
+  const H = document.body.offsetHeight;
+  const ratioRemainder = 1 / ratio;
+  const dotBoxW = parseInt(window.getComputedStyle(container).width);
+  const dotBoxH = parseInt(window.getComputedStyle(container).height);
+  const $topH = document.querySelector('.info-aside');
+  const halfX = (W - dotBoxW) / 2;
+  const topH = parseInt(window.getComputedStyle($topH).height);
+  const halfY = (H - dotBoxH - topH)/2;
+  const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
+  const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
+  const elOffsetWidth = parseInt(el.offsetWidth);
+  const elOffsetHeight = parseInt(el.offsetHeight);
+  const CSSObj = {};
+  if (ratio >= 1 && resetX <= halfX + dotBoxW) {
+    if (elOffsetWidth >= dotBoxW) {
+      CSSObj.width = dotBoxW;
+    }
+    CSSObj.width = (coor.w + resetX - coor.x);
+    CSSObj.height = elOffsetWidth * ratioRemainder;
+    if (dotBoxW > dotBoxH) {
+      if (elOffsetWidth > dotBoxH) {
+        CSSObj.height = dotBoxH;
+        CSSObj.width = dotBoxH * ratio;
+      }
+    } else if (dotBoxW < dotBoxH) {
+      if (elOffsetWidth > dotBoxW) {
+        CSSObj.width = dotBoxW;
+        CSSObj.height = dotBoxW * ratioRemainder;
+      }
+    } else if (elOffsetWidth >= dotBoxW) {
+      CSSObj.width = dotBoxW ;
+      CSSObj.height = dotBoxW * ratioRemainder;
+    }
+  } else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
+    CSSObj.height = (coor.h + resetY - coor.y);
+    CSSObj.width = parseInt(el.style.height) * ratio;
+    // 限制拖拉的范围在图片内
+    if (dotBoxW > dotBoxH) {
+      if (elOffsetHeight > dotBoxH) {
+        CSSObj.height = dotBoxH;
+        CSSObj.width = dotBoxH * ratio;
+      }
+    } else if (dotBoxW < dotBoxH) {
+      if (elOffsetWidth > dotBoxW) {
+        CSSObj.width = dotBoxW;
+        CSSObj.height = dotBoxW * ratioRemainder;
+      }
+    } else if (elOffsetWidth > dotBoxW) {
+      CSSObj.width = dotBoxW;
+      CSSObj.height = dotBoxW * ratioRemainder;
+    }
+  } else if(ratio == 'auto' && resetY <= (halfY + dotBoxH + topH) && resetX <= halfY + dotBoxW) {
+    CSSObj.height = (coor.h + resetY - coor.y);
+    CSSObj.width = (coor.w + resetX - coor.x);
+  } else if (resetX <= halfX + dotBoxW) {
+    CSSObj.width = (coor.w + resetX - coor.x);
+    CSSObj.height = el.style.width;
+    // limit the crop box area
+    if (dotBoxW > dotBoxH) {
+      if (elOffsetHeight > dotBoxH) {
+        CSSObj.height = dotBoxH;
+        CSSObj.width = dotBoxH;
+      }
+    } else if (dotBoxW < dotBoxH) {
+      if (elOffsetWidth > dotBoxW) {
+        CSSObj.width = dotBoxW;
+        CSSObj.height = dotBoxW;
+      }
+    } else if (elOffsetWidth > dotBoxW) {
+      CSSObj.width = el.style.height = dotBoxW;
+    }
+  }
+  return CSSObj;
+};

site/src/lib/xhr.js

@@ -0,0 +1,107 @@
+/**
+ * simple ajax handler
+ **/
+
+ //ADD sendAsBinary compatibilty to older browsers
+ if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
+   XMLHttpRequest.prototype.sendAsBinary = function(string) {
+     var bytes = Array.prototype.map.call(string, function(c) {
+         return c.charCodeAt(0) & 0xff;
+     });
+     this.send(new Uint8Array(bytes).buffer);
+   };
+ }
+
+module.exports = function (method, url, headers, data, callback, err, isBinary) {
+
+  const r = new XMLHttpRequest();
+  const error = err || function () {
+    console.error('AJAX ERROR!');
+  };
+  const boundary = 'vuecodeimageupload';
+  // Binary?
+  let binary = false;
+  if (method === 'blob') {
+    binary = method;
+    method = 'GET';
+  }
+  console.log(data);
+  method = method.toUpperCase();
+  // Xhr.responseType 'json' is not supported in any of the vendors yet.
+  r.onload = function () {
+    let json = r.response;
+    try {
+      json = JSON.parse(r.responseText);
+    } catch (_e) {
+      if (r.status === 401) {
+        json = error('access_denied', r.statusText);
+      }
+    }
+    let headers = headersToJSON(r.getAllResponseHeaders());
+    headers.statusCode = r.status;
+    callback(json || (method === 'GET' ? error('empty_response', 'Could not get resource') : {}), headers);
+  };
+  r.onerror = function () {
+    let json = r.responseText;
+    try {
+      json = JSON.parse(r.responseText);
+    } catch (_e) {
+      console.error(_e);
+    }
+    callback(json || error('access_denied', 'Could not get resource'));
+  };
+  let x;
+  // Should we add the query to the URL?
+  if (method === 'GET' || method === 'DELETE') {
+    data = null;
+  } else if (isBinary) {
+    const keyData = data;
+    const code = data.base64Code.replace('data:' + data.type + ';base64,', '');
+    data = ['--' + boundary, 'Content-Disposition: form-data; name="' + data.filed + '"; filename="' + data.filename + '"', 'Content-Type: ' + data.type, '', window.atob(code), ''].join('\r\n');
+    const keyArr = Object.keys(keyData);
+    if (keyArr.length > 4) {
+      for (const k of keyArr) {
+        if (['filed', 'filename', 'type', 'base64Code'].indexOf(k) == -1) {
+          data += ['--' + boundary, 'Content-Disposition: form-data; name="' + k + '";', '', ''].join('\r\n');
+          data += [typeof keyData[k] === 'object' ? JSON.stringify(keyData[k]) : keyData[k], ''].join('\r\n');
+        }
+      }
+    }
+    data += '--' + boundary + '--';
+  }
+  // Open the path, async
+  r.open(method, url, true);
+  if (binary) {
+    if ('responseType' in r) {
+      r.responseType = binary;
+    }
+    else {
+      r.overrideMimeType('text/plain; charset=x-user-defined');
+    }
+  }
+  // Set any bespoke headers
+  if (headers) {
+    for (x in headers) {
+      r.setRequestHeader(x, headers[x]);
+    }
+    if (isBinary) {
+      r.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
+    }
+  }
+  if (isBinary) {
+    return r.sendAsBinary(data);
+  }
+  r.withCredentials = true;
+  r.send(data);
+  return r;
+  // Headers are returned as a string
+  function headersToJSON(s) {
+    const o = {};
+    const reg = /([a-z\-]+):\s?(.*);?/gi;
+    let m;
+    while (m = reg.exec(s)) {
+      o[m[1]] = m[2];
+    }
+    return o;
+  }
+};