modify-image-upload/lib/index.min.js

上传图片组件（在上传图片时可以对图片进行修改，增加文字、水印、压缩图片质量等）

window.createUpload=function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),a=[{key:"el",type:"string",isReqiued:!0},{key:"action",type:"string",isReqiued:!0},{key:"headers",type:"object",default:{}},{key:"onError",type:"Function",default:function(){}},{key:"onSuccess",type:"Function",default:function(){}},{key:"contentHtml",type:"string",default:""},{key:"quality",type:"number",default:.9},{key:"maxSize",type:"number",default:4096},{key:"compressover",type:"number",default:2048},{key:"addFonts",type:"string | array"},{key:"fontsAlign",type:"string",default:"left"},{key:"lineSpace",type:"number",default:0},{key:"fontColor",type:"string",default:"#4d4d4d"},{key:"fontStyle",type:"string",default:"14px"},{key:"drawFonts",type:"Function",default:null},{key:"addImg",type:"string",default:null},{key:"imageStyle",type:"object",default:{opacity:.6}},{key:"addPos",type:"array",default:["left","top"]},{key:"repeat",type:"string",default:null},{key:"startUpload",type:"Function",default:null}],o=function(e){if(function(e){return!a.some(function(t){var n=e[t.key];if(t.isReqiued&&!r.isType.require(n))return console.error(t.key+"是必须传的参数"),!0;void 0!==n?t.type.split(" | ").some(function(e){return r.isType[e](n)})||console.error(t.key+"是必须"+t.type):e[t.key]=t.default})&&e}(e)){document.querySelector(e.el).innerHTML='<div id="UploadBtn" style="cursor: pointer">'+(e.contentHtml||'<div style="box-sizing: content-box;text-align:center; background: #2d8cf0;width:100%; padding:5px 10px; height: 20px; color: #fff; line-height: 20px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc;">上传图片</div>')+' <input type="file" name="FileUpload" id="FileUpload" style="display: none;"></div>';var t=document.querySelector("#FileUpload");document.querySelector("#UploadBtn").onclick=function(){t.value="",e.startUpload&&!e.startUpload()||t.click()};var n=void 0;t.onchange=function(t){t.target.value&&(n=t.target.files[0],r.imageIsOk(n,e)&&r.createImage(n,e))}}};t.default=o;t.init=o},function(e,t,n){"use strict";function r(e,t){if(t.drawFonts)t.drawFonts(e);else{var n=t.canvasWidth,r=t.canvasHeight,a=t.fontStyle.match(/([0-9]+)\s*px/)?t.fontStyle.match(/([0-9]+)\s*px/)[1]:14;e.font=t.fontStyle,e.fillStyle=t.fontColor;for(var o=function(e,t,n,r,a){a-=0;var o=[],i=[];Array.isArray(t.addFonts)?i=t.addFonts.concat([]):i.push(t.addFonts);for(var s=i[0],c=1;c<i.length;c++){var d=i[c];d.length>s.length&&(s=d)}var l=e.measureText(s).width,u=t.addPos;if(isNaN(u[0]-0))switch(u[0]){case"left":u[0]=a;break;case"center":u[0]=(n-l)/2;break;case"right":u[0]=n-l;break;default:console.error("config.addPos[0]参数错误")}if(isNaN(u[1]-0))switch(u[1]){case"top":u[1]=a;break;case"middle":u[1]=(r-a*i.length)/2;break;case"bottom":u[1]=r-a*i.length;break;default:console.error("config.addPos[1]参数错误")}for(var f=0;f<i.length;f++){var p=[],y=i[f],g=e.measureText(y).width;switch(p[1]=u[1]-0+f*(a-0+t.lineSpace),t.fontsAlign){case"left":p[0]=u[0];break;case"right":p[0]=u[0]-0+(l-g);break;case"center":p[0]=u[0]-0+(l-g)/2;break;default:console.error("fontsAlign参数不正确"),p[0]=u[0]}o.push(p)}return o}(e,t,n,r,a),i=Array.isArray(t.addFonts)?t.addFonts:[t.addFonts],s=0;s<o.length;s++){var c=o[s];e.fillText(i[s],c[0],c[1])}}}function a(e,t,n,a){var i=document.createElement("canvas");i.width=t,i.height=n;var s=i.getContext("2d");e.canvasWidth=t,e.canvasHeight=n,s.beginPath(),s.drawImage(a,0,0,t,n),s.closePath(),s.save(),e.addFonts||Array.isArray(e.addFonts)?(r(s,e),o(i,e)):e.addImg?function(e,t,n){var r=t.canvasWidth,a=t.canvasHeight,o=t.imageStyle,i=new Image;if(!t.addImg.trim().search(/^http:\/\/.+\.(jpeg|png|jpg|gif|bmp)$/)&&!t.addImg.trim().search(/^(data:image\/(jpeg|png|jpg|gif|bmp);base64,)\s+[0-9a-zA-Z=+\/]+$/))return void console.error("addImg参数格式不正确");i.src=t.addImg.trim();i.onload=function(){var s=o.width?o.width:i.width,c=o.height?o.height:i.height,d=t.addPos;if(isNaN(d[0]-0))switch(d[0]){case"left":d[0]=0;break;case"center":d[0]=r/2-s/2;break;case"right":d[0]=r-s;break;default:console.error("config.addPos[0]参数错误")}if(isNaN(d[1]-0))switch(d[1]){case"top":d[1]=0;break;case"middle":d[1]=a/2-c/2;break;case"bottom":d[1]=a-c;break;default:console.error("config.addPos[1]参数错误")}if(e.globalAlpha=o.opacity?o.opacity:1,e.beginPath(),t.repeat){var l=e.createPattern(function(e,t,n){var r=document.createElement("canvas"),a=r.getContext("2d");return r.width=t,r.height=n,a.drawImage(e,0,0,t,n),r}(i,s,c),t.repeat);e.fillStyle=l,e.fillRect(0,0,t.canvasWidth,t.canvasHeight)}else e.drawImage(i,d[0],d[1],s,c);e.closePath(),e.save(),n&&n()}}(s,e,function(){o(i,e)}):o(i,e)}function o(e,t){console.log("ssdcscdsc"),e.toBlob(function(e){var n=new File([e],t.fileName,{fileType:t.fileType,filePath:t.filePath}),r=new FormData;r.append("file",n),function(e,t){var n=e.onError,r=e.onSuccess,a=new XMLHttpRequest;for(var o in a.onreadystatechange=function(){a.readyState===XMLHttpRequest.DONE&&200===a.status&&r(a.responseText),404!==a.status&&500!==a.status||n("文件上传接口报错",a.responseText)},a.open("post",e.action,!0),e.headers)a.setRequestHeader(o,e.headers[o]);a.send(t)}(t,r)},"image/jpeg",t.quality)}e.exports={createImage:function(e,t){var n=new Image;t.fileName=e.name,t.fileType=e.type,t.filePath=e.path,e.size<1024*t.compressover&&(t.quality=1),n.src=URL.createObjectURL(e),n.addEventListener("load",function(e){a(t,n.width,n.height,n)})},imageIsOk:function(e,t){return e.size>1024*t.maxSize?(t.onError("上传图片过大"),!1):!!/\.(jpeg|png|jpg|gif|bmp)$/.test(e.name)||(t.onError("图片类型错误"),!1)},isType:{string:function(e){return"string"==typeof e},object:function(e){return e instanceof Object},array:function(e){return Array.isArray(e)},require:function(e){return!!e||0===e},Function:function(e){return!e||"function"==typeof e},number:function(e){return!isNaN(e-0)}}}}]);