@neosjs/h5-graffiti/lib/graffiti.min.js

NeosJS H5 Graffiti

/*!
 * H5 Graffiti
 * version 1.1.4
 * releaseTime 2021-03-17 17:40
 * (c) 2021 NeosJS (https://docs.neosjs.com/graffiti/)
 */
var t,e;t=this,e=function(){"use strict";var t=async function(t){var i=t.width,n=t.height,s=t.uuid,a=t.imgArray,o=t.waterMark,r=t.quality,h=t.extension,c=document.createElement("canvas");c.width=i,c.height=n;var u,_=c.getContext("2d");await async function(t,e){var i=document.createElement("div");i.setAttribute("class","neos_"+e+"_temp_img"),i.style.display="none",document.body.appendChild(i);for(var n=0;n<t.length;n++){var s=document.createElement("img");s.src=t[n],i.appendChild(s)}}(a,s),document.querySelectorAll(".neos_"+s+"_temp_img img").forEach((function(t){t.onload=async function(){await _.drawImage(t,0,0,i,n)}})),(null!=(u=o)?u.constructor:null)===Object&&o.url&&await function(t,i){var n=t.postion,s=t.width,a=t.height,o=new Image;o.src=t.url,o.onload=function(){var t=e(o.width,o.height,150,100),r=t.width,h=t.height;({"top-left":function(){return i.drawImage(o,5,5,r,h)},"top-right":function(){return i.drawImage(o,s-r-5,5,r,h)},"bottom-left":function(){return i.drawImage(o,5,a-h-5,r,h)},"bottom-right":function(){return i.drawImage(o,s-r-5,a-h-5,r,h)},center:function(){return i.drawImage(o,(s-r)/2,(a-h)/2)}})[n]()}}({width:i,height:n,postion:o.postion||"left-top",url:o.url},_),await async function(t){return new Promise((function(e){return setTimeout(e,t)}))}(500);var l=c.toDataURL(function(t){return void 0===t&&(t="jpg"),"image/"+(t=t.toLowerCase().replace(/jpg/i,"jpeg")).match(/png|jpeg|bmp|gif/)[0]}(h),r);if(l){var d=await async function(t){for(var e=t.split(","),i=e[0].match(/:(.*?);/)[1],n=atob(e[1]),s=n.length,a=new Uint8Array(s);s--;)a[s]=n.charCodeAt(s);return new Blob([a],{type:i})}(l);return document.body.removeChild(document.querySelector(".neos_"+s+"_temp_img")),{base64Data:l,blob:d}}return!1},e=function(t,e,i,n){var s,a;if(t>0&&e>0)return t/e>=i/n?t>i?(s=i,a=e*i/t):(s=t,a=e):e>n?(a=n,s=t*n/e):(s=t,a=e),{width:s,height:a}},i=[],n=[],s=[],a=[],o=!1,r=!1,h=function(){this._x=[],this._y=[],this._uuid=0,this._eraserSize=10,this.scale=2};h.prototype._startEvent=function(t){t.preventDefault(),a.push(this._cxt.getImageData(0,0,this._width*this.scale,this._height*this.scale));var e=this._canvas.getBoundingClientRect(),i=(t.clientX-e.left)*this._width/e.width,n=(t.clientY-e.top)*this._height/e.height;r?this._resetEraser(i,n,t):(this._movePoint(i,n),this._drawPoint()),o=!0},h.prototype._moveEvent=function(t){if(t.preventDefault(),o){var e=this._canvas.getBoundingClientRect(),i=(t.clientX-e.left)*this._width/e.width,n=(t.clientY-e.top)*this._height/e.height;r?this._resetEraser(i,n,t):(this._movePoint(i,n,!0),this._drawPoint())}},h.prototype._endEvent=function(t){t.preventDefault(),o=!1,this._x=[],this._y=[],n=[]},h.prototype._movePoint=function(t,e){this._x.push(t),this._y.push(e),n.push(e)},h.prototype._drawPoint=function(){for(var t=0;t<this._x.length;t++)this._cxt.beginPath(),n[t]&&t?this._cxt.moveTo(this._x[t-1],this._y[t-1]):this._cxt.moveTo(this._x[t]-1,this._y[t]),this._cxt.lineTo(this._x[t],this._y[t]),this._cxt.closePath(),this._cxt.stroke()},h.prototype._resetEraser=function(t,e){this._cxt.save(),this._cxt.beginPath(),this._cxt.arc(t,e,this._eraserSize/2,0,2*Math.PI),this._cxt.clip(),this._cxt.clearRect(t-this._eraserSize/2,e-this._eraserSize/2,this._eraserSize,this._eraserSize),this._cxt.restore()},h.prototype.lineColor=function(t){this._cxt.save(),this._cxt.strokeStyle=t,r=!1},h.prototype.lineSize=function(t){this._cxt.save(),this._cxt.lineWidth=t,r=!1},h.prototype.eraserSize=function(t){this._eraserSize=t},h.prototype.prev=function(){if(a.length>0){s.push(this._cxt.getImageData(0,0,this._width*this.scale,this._height*this.scale));var t=a.pop();this._cxt.putImageData(t,0,0)}},h.prototype.next=function(){if(s.length>0){a.push(this._cxt.getImageData(0,0,this._width*this.scale,this._height*this.scale));var t=s.pop();this._cxt.putImageData(t,0,0)}},h.prototype.eraser=function(t){void 0===t&&(t=null),t&&(this._eraserSize=t),r=!0},h.prototype.clear=function(){this._cxt.clearRect(0,0,this._width,this._height-1),s=[],a=[],i=[]},h.prototype.draw=function(){r=!1},h.prototype.createImage=async function(){var e=document.getElementById("__graffiti_"+this._uuid+"_bg");i.push(this._canvas.toDataURL("image/png")),e&&i.push(e.src);var n=await t({imgArray:i,width:this._width,height:this._height,uuid:this._uuid,waterMark:this._waterMark,quality:this._quality,extension:this._extension}),s=n.base64Data,a=n.blob;return s&&a?(i=[],{errCode:0,errMsg:"success",data:{base64:s,blob:a}}):{errCode:-1,errMsg:"fail"}},h.prototype.saveImage=async function(){return console.warn("\u8be5\u63a5\u53e3\u5373\u5c06\u79fb\u9664\uff0c\u8bf7\u4f7f\u7528 createImage \u63a5\u53e3\u4ee3\u66ff! "),await this.createImage()},h.prototype.init=async function(t){this._uuid=Math.random().toString(36).substring(3,20);var e=t.width;void 0===e&&(e=1024);var i=t.height;void 0===i&&(i=768);var n=t.waterMark,s=t.quality,a=t.dom,o=t.background,r=t.lineSize,h=t.lineColor,c=t.ext;void 0===c&&(c="jpg"),this._width=e,this._height=i,this._waterMark=n||null,this._quality=s||.75,this._extension=c,this._dom=document.getElementById(a);var u=await async function(t,e,i,n,s,a){var o=document.createElement("div");o.setAttribute("id","__graffiti_content_"+n),o.style.position="relative",o.style.width=e+"px",o.style.height=i+"px";var r,h=/^rgb\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\)$/i.test(r=s)||/^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(r)||/^rgba\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,(1|1.0|0.[0-9])\)$/i.test(r),c='\n    <canvas id="__graffiti_'+n+'" width="'+e*a+'" height="'+i*a+'" style="width:'+e+"px;height:"+i+"px;position:absolute;left:0;right:0;top:0;z-index:2;"+(h&&"background-color:"+s)+'"></canvas>\n    '+(s&&!h?'<img\n    id="__graffiti_'+n+'_bg"\n    src="'+s+'"\n    width="'+e+'"\n    height="'+i+'"\n  ></img>':"")+"\n    ";return o.innerHTML=c,t.appendChild(o),"__graffiti_"+n}(this._dom,e,i,this._uuid,o,this.scale);if(u)return this._canvas=document.getElementById(u),this._cxt=this._canvas.getContext("2d"),this._cxt.scale(this.scale,this.scale),this._cxt.lineJoin="round",this._cxt.lineCap="round",this._cxt.lineWidth=r||2,this._cxt.strokeStyle=h||"#000",this.drawGraffiti(),this._canvas},h.prototype.destroy=function(){this._dom&&(this._dom.innerHTML=""),this._uuid=null,this._width=null,this._height=null,this._waterMark=null,this._quality=null,this._dom=null,this._canvas=null,this._cxt=null,this._x=[],this._y=[],n=[],s=[],a=[],i=[]},h.prototype.drawGraffiti=function(){var t=this;"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch?(this._canvas.ontouchstart=function(e){return t._startEvent(e)},this._canvas.ontouchmove=function(e){return t._moveEvent(e)},this._canvas.ontouchend=function(e){return t._endEvent(e)}):(this._canvas.onmousedown=function(e){return t._startEvent(e)},this._canvas.onmousemove=function(e){return t._moveEvent(e)},this._canvas.onmouseup=function(e){return t._endEvent(e)},this._canvas.onmouseleave=function(e){return t._endEvent(e)})};var c=new Proxy(new h,{get:function(t,e,i){return Reflect.get(t,e,i)}});return c.name="Graffiti",c.version="1.1.4",c.updateTime="1615974056146",c},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).NeosGraffiti=e();