mp-cover-layer/dist/mp-cover-layer.min.js

a plugin to make an image with canvas, it can use in weapp

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CoverLayer=e():t.CoverLayer=e()}(this,(function(){return function(t){var e={};function i(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(r,n,function(e){return t[e]}.bind(null,n));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);var r=function(t,e,i,r){return new(i||(i=Promise))((function(n,o){function a(t){try{c(r.next(t))}catch(t){o(t)}}function s(t){try{c(r.throw(t))}catch(t){o(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}c((r=r.apply(t,e||[])).next())}))},n=function(t,e){var i,r,n,o,a={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;a;)try{if(i=1,r&&(n=2&o[0]?r.return:o[0]?r.throw||((n=r.return)&&n.call(r),0):r.next)&&!(n=n.call(r,o[1])).done)return n;switch(r=0,n&&(o=[2&o[0],n.value]),o[0]){case 0:case 1:n=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(n=a.trys,(n=n.length>0&&n[n.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!n||o[1]>n[0]&&o[1]<n[3])){a.label=o[1];break}if(6===o[0]&&a.label<n[1]){a.label=n[1],n=o;break}if(n&&a.label<n[2]){a.label=n[2],a.ops.push(o);break}n[2]&&a.ops.pop(),a.trys.pop();continue}o=e.call(t,a)}catch(t){o=[6,t],r=0}finally{i=n=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}},o=function(){function t(t){void 0===t&&(t={canvasId:String,clientType:"weapp"}),this.canvas=null,this.ctx=null,this.clientType="",this.clientType=t.clientType||"weapp"}return t.prototype.init=function(t){return r(this,void 0,void 0,(function(){return n(this,(function(e){switch(e.label){case 0:return"weapp"!==this.clientType?[3,2]:[4,this.initWeapp({canvasId:t,clientType:this.clientType})];case 1:return e.sent(),[2,{}];case 2:return"alipay"!==this.clientType?[3,4]:[4,this.initAlipay({canvasId:t,clientType:this.clientType})];case 3:return e.sent(),[2,{}];case 4:return[2]}}))}))},t.prototype.initWeapp=function(t){var e=this;return new Promise((function(i,r){t.canvasId?wx.createSelectorQuery().select(t.canvasId.startsWith("#")?t.canvasId:"#"+t.canvasId).fields({node:!0,size:!0}).exec((function(t){var r=t[0].width,n=t[0].height,o=t[0].node,a=o.getContext("2d"),s=wx.getSystemInfoSync().pixelRatio,c=s>2?2:s;o.width=r*c,o.height=n*c,a.scale(c,c),e.canvas=o,e.ctx=a,i({})})):r(new Error("请填写canvasId"))}))},t.prototype.initAlipay=function(t){t.canvasId&&(this.ctx=my.createCanvasContext(t.canvasId.startsWith("#")?t.canvasId.split("#")[1]:t.canvasId))},t.prototype.putFillRect=function(t){var e=t.background,i=void 0===e?"#fff":e,r=t.width,n=void 0===r?0:r,o=t.height,a=void 0===o?0:o,s=t.x,c=void 0===s?0:s,l=t.y,u=void 0===l?0:l,h=t.rotate,p=void 0===h?0:h;if(this.ctx.save(),this.ctx.fillStyle=i,p){var f=c+n/2,v=u+a/2;this.ctx.translate(f,v),this.ctx.rotate(p*Math.PI/180),this.ctx.translate(-f,-v),this.ctx.translate(c,u),this.ctx.rect(0,0,n,a)}else this.ctx.translate(c,u),this.ctx.fillRect(0,0,n,a);return this.ctx.translate(-c,-u),this.ctx.restore(),Promise.resolve()},t.prototype.putLine=function(t){var e=t.width,i=void 0===e?1:e,r=t.lineWidth,n=void 0===r?i:r,o=t.color,a=void 0===o?"#000":o,s=t.start,c=void 0===s?{x:0,y:0}:s,l=t.end,u=void 0===l?null:l;if(!u)return Promise.reject(new Error("请设置终点"));this.ctx.save(),this.ctx.beginPath(),this.ctx.lineWidth=n,this.ctx.strokeStyle=a,this.ctx.moveTo(c.x,c.y),this.ctx.lineTo(u.x,u.y),this.ctx.stroke(),this.ctx.restore()},t.prototype.putPolygon=function(t){var e=t.background,i=void 0===e?"":e,r=t.borderWidth,n=void 0===r?0:r,o=t.borderColor,a=void 0===o?"":o,s=t.paths,c=void 0===s?[]:s;if(this.ctx.save(),this.ctx.beginPath(),n&&(this.ctx.lineWidth=n),a&&(this.ctx.strokeStyle=a),c.length<=2)return Promise.reject(new Error("请设置至少3个端点"));for(var l=0,u=c;l<u.length;l++){var h=u[l];this.ctx.lineTo(h.x,h.y)}return this.ctx.closePath(),i&&(this.ctx.fillStyle=i,this.ctx.fill()),a&&this.ctx.stroke(),this.ctx.restore(),Promise.resolve()},t.prototype.putLayers=function(t,e){return void 0===t&&(t=[]),r(this,void 0,void 0,(function(){var i,r,o,a,s;return n(this,(function(n){switch(n.label){case 0:for(r in i=[],t)i.push(r);o=0,n.label=1;case 1:if(!(o<i.length))return[3,16];switch(a=i[o],t[a].type){case"img":return[3,2];case"text":return[3,4];case"paragraph":return[3,6];case"rect":return[3,8];case"line":return[3,10];case"polygon":return[3,12]}return[3,14];case 2:return[4,this.putImg(t[a])];case 3:return n.sent(),[3,15];case 4:return[4,this.putText(t[a])];case 5:return n.sent(),[3,15];case 6:return[4,this.putParagraph(t[a])];case 7:return n.sent(),[3,15];case 8:return[4,this.putFillRect(t[a])];case 9:return n.sent(),[3,15];case 10:return[4,this.putLine(t[a])];case 11:return n.sent(),[3,15];case 12:return[4,this.putParagraph(t[a])];case 13:return n.sent(),[3,15];case 14:console.error("unknow layer type"),n.label=15;case 15:return o++,[3,1];case 16:return e&&"function"==typeof e?[4,this.canvasToDataUrl()]:[3,18];case 17:s=n.sent(),e(s),n.label=18;case 18:return[2,Promise.resolve()]}}))}))},t.prototype.putText=function(t){var e=t.text,i=void 0===e?"":e,r=t.x,n=void 0===r?0:r,o=t.y,a=void 0===o?0:o,s=t.fontSize,c=void 0===s?12:s,l=t.rotate,u=void 0===l?0:l,h=t.textBaseline,p=void 0===h?"middle":h,f=t.color,v=void 0===f?"#000":f,d=t.fontColor,x=void 0===d?v:d,y=t.align,g=void 0===y?"left":y,m=t.fontWeight,w=void 0===m?"normal":m,b=t.fontFamily,P=void 0===b?"sans-serif":b;return this.ctx.save(),this.ctx.translate(n,a),this.ctx.rotate(u*Math.PI/180||0),this.ctx.font=w+" "+c+"px "+P,this.ctx.textAlign=g,this.ctx.textBaseline=p,this.ctx.fillStyle=x||"#000",this.ctx.fillText(i,0,c/2+2),this.ctx.translate(-n,-a),this.ctx.font="12px sans-serif",this.ctx.fillStyle="#000",this.ctx.restore(),Promise.resolve()},t.prototype.putParagraph=function(t){var e=t.text,i=void 0===e?"":e,o=t.x,a=void 0===o?0:o,s=t.y,c=void 0===s?0:s,l=t.fontSize,u=void 0===l?12:l,h=t.textBaseline,p=void 0===h?"middle":h,f=t.lineHeight,v=void 0===f?1.2:f,d=t.color,x=void 0===d?"#000":d,y=t.width,g=void 0===y?200:y,m=t.fontColor,w=void 0===m?x:m,b=t.align,P=void 0===b?"left":b,T=t.fontWeight,I=void 0===T?"normal":T,S=t.fontFamily,j=void 0===S?"sans-serif":S;return r(this,void 0,void 0,(function(){var t,e,r;return n(this,(function(n){switch(n.label){case 0:if(!i)return[2,Promise.reject(new Error("请输入文段"))];i=(i=i.replace(/↵/g,"|")).replace(/\n/g,"|"),i+="|",t="",this.ctx.font=I+" "+u+"px "+j,e=0,r=0,n.label=1;case 1:return r<i.length?"|"!==i[r]&&this.ctx.measureText(t).width<=g?(t+="|"===i[r]?"":i[r],[3,4]):[3,2]:[3,5];case 2:return[4,this.putText({text:t,x:a,y:c+(u*v+4)*e,fontSize:u,textBaseline:p,color:x,fontColor:w,align:P,fontFamily:j,fontWeight:I})];case 3:n.sent(),e++,t="|"===i[r]?"":i[r],n.label=4;case 4:return r++,[3,1];case 5:return[2,Promise.resolve()]}}))}))},t.prototype.putCircularImg=function(t){var e=t.img,i=void 0===e?"":e,o=t.x,a=void 0===o?0:o,s=t.y,c=void 0===s?0:s,l=t.width,u=void 0===l?0:l,h=t.height,p=void 0===h?0:h,f=t.rotate,v=void 0===f?0:f;return r(this,void 0,void 0,(function(){var t,e,r,o,s,l;return n(this,(function(n){switch(n.label){case 0:return this.ctx.save(),t=null,e=u,r=p,i?"weapp"!==this.clientType?[3,2]:[4,this.loadImg(i)]:[2,Promise.reject(new Error("请传入图片路径"))];case 1:return t=n.sent(),[3,3];case 2:t=i,n.label=3;case 3:return this.ctx.save(),v?(o=a+e/2,s=c+r/2,this.ctx.translate(o,s),this.ctx.rotate(v*Math.PI/180),this.ctx.translate(-o,-s),this.ctx.translate(a,c),this.ctx.beginPath(),l=e>r?r/2:e/2,this.ctx.arc(l,l,l,0,2*Math.PI),this.ctx.clip(),this.ctx.drawImage(t,0,0,e,r)):(this.ctx.translate(a,c),this.ctx.beginPath(),l=e>r?r/2:e/2,this.ctx.arc(l,l,l,0,2*Math.PI,!1),this.ctx.clip(),this.ctx.drawImage(t,0,0,e,r)),this.ctx.translate(-a,-c),this.ctx.restore(),[2,Promise.resolve()]}}))}))},t.prototype.loadImg=function(t){var e=this;return"weapp"===this.clientType?new Promise((function(i,r){var n=e.canvas.createImage();n.onload=function(){i(n)},n.onerror=function(){r(new Error("图片下载失败"))},n.src=t})):"alipay"===this.clientType?Promise.resolve(t):void 0},t.prototype.canvasToDataUrl=function(t,e){var i=this;return void 0===t&&(t="image/jpeg"),void 0===e&&(e=1),new Promise((function(r){"weapp"===i.clientType&&r(i.canvas.toDataURL(t,e)),"alipay"===i.clientType&&i.ctx.draw(!0,(function(){r(i.ctx.toDataURL({fileType:t,quality:e}))}))}))},t.prototype.toDataURL=function(t,e){return void 0===t&&(t="image/jpeg"),void 0===e&&(e=1),this.canvasToDataUrl(t,e)},t.prototype.toTempFilePath=function(t,e){var i=this;return void 0===t&&(t="png"),void 0===e&&(e=1),new Promise((function(r,n){"weapp"===i.clientType&&wx.canvasToTempFilePath({fileType:t.startsWith("image/")?t.split("image/")[1]:t,quality:e,canvas:i.canvas,success:function(t){r(t.tempFilePath)},fail:function(t){n(t)}}),"alipay"===i.clientType&&i.ctx.toTempFilePath({fileType:t,quality:e,success:function(t){r(t.apFilePath)}})}))},t.prototype.putImg=function(t){var e=t.img,i=void 0===e?"":e,o=t.x,a=void 0===o?0:o,s=t.y,c=void 0===s?0:s,l=t.width,u=void 0===l?0:l,h=t.height,p=void 0===h?0:h,f=t.rotate,v=void 0===f?0:f;return r(this,void 0,void 0,(function(){var t,e,r,o,s;return n(this,(function(n){switch(n.label){case 0:return this.ctx.save(),t=null,e=u,r=p,i?"weapp"!==this.clientType?[3,2]:[4,this.loadImg(i)]:[2,Promise.reject(new Error("请传入图片路径"))];case 1:return t=n.sent(),[3,3];case 2:t=i,n.label=3;case 3:return v?(o=a+e/2,s=c+r/2,this.ctx.translate(o,s),this.ctx.rotate(v*Math.PI/180),this.ctx.translate(-o,-s),this.ctx.translate(a,c),this.ctx.drawImage(t,0,0,e,r)):(this.ctx.translate(a,c),this.ctx.drawImage(t,0,0,e,r)),this.ctx.translate(-a,-c),this.ctx.restore(),[2,Promise.resolve()]}}))}))},t.prototype.getCanvas=function(){return this.canvas},t.prototype.getContext=function(){return this.ctx},t}();e.default=o}]).default}));