import { Message } from 'view-design'// import { isIE } from './index'function Picture (opts) { this.defaults = { quality: 1, fileObj: '', fileName: 'file', callback: null } this.bl = '' if (typeof opts === 'object') { this.options = Object.assign({}, this.defaults, opts) } else { this.options = this.defaults } // this.init(this.options.fileObj)}Picture.prototype = { init: function (fileObj) { const _this = this console.log(this) // promise处理异步 this.photoCompress(fileObj || this.options.fileObj) .then(function (res) { return _this.canvasDataUrl(res) }) .catch(function (err) { _this.showMsgErr(err) }) .then(function (res) { // const bl = _this.convertBase64UrlToBlob(res); // const file = !isIE() ? _this.base64URLtoFile(res, _this.options.fileName) : '' // debugger _this.options.callback && _this.options.callback({ base64: res, file: res, fileName: _this.options.fileName }) }) .catch(function (err) { _this.showMsgErr(err) }) }, showMsgErr (err) { Message.error({ content: err, background: true }) }, photoCompress: function (file) { // eslint-disable-next-line var ready = new FileReader() ready.readAsDataURL(file) return new Promise(function (resolve, reject) { ready.onload = function () { var re = this.result resolve(re) } ready.onerror = function (err) { reject(err) } }) }, canvasDataUrl: function (res) { // eslint-disable-next-line var img = new Image() img.src = res const _this = this return new Promise(function (resolve, reject) { img.onload = function () { // 默认按比例压缩 // var w = this.width, h = this.height // 生成canvas var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') // 创建属性节点 var anw = document.createAttribute('width') anw.nodeValue = 140 var anh = document.createAttribute('height') anh.nodeValue = 140 canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(this, 0, 0, 140, 140) // quality值越小，所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/png', _this.options.quality) // 回调函数返回base64的值 resolve(base64) } img.onerror = function (err) { reject(err) } }) }, // base64转为二进制数据，后端可直接利用 convertBase64UrlToBlob: function (base64Data) { const arr = base64Data.split(',') const mime = arr[0].match(/:(.*?);/)[1] // eslint-disable-next-line let bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } // eslint-disable-next-line return new Blob([u8arr], { type: mime }) }, // base64转为file对象 base64URLtoFile: function (dataUrl, filename) { // 将base64转换为文件 const arr = dataUrl.split(',') const mime = arr[0].match(/:(.*?);/)[1] // eslint-disable-next-line let bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } // eslint-disable-next-line return new File([u8arr], filename, { type: mime }) }}const handlePicture = (function () { let instance = null return function (opts) { if (instance) return instance instance = new Picture(opts) return instance }})()export default handlePicture
