d-utils/dist/cjs/synthesis/index.js

d-utils

/**
 * d-utils  version: 4.0.3
 * by ifmiss
 */
"use strict";require("../checkType.js");var t=require("../_tslib-282d34cf.js");require("../isObject.js");var e=require("../log/index.js"),s=require("../type.js"),i=/** @class */function(){function i(t,e){
/**
         * 基于当前屏幕的比例
         */
this.persent=1,
/**
         * canvas的元素
         */
this.canvas=null,
/**
         * context canvas 上下文
         */
this.context=null,
/**
         * 合并的背景地址
         */
this.mainResource="",
/**
         * canvas的宽度  实际上数合并背景的宽度
         */
this.canvasWidth=0,
/**
         * canvas的高度  实际上数合并背景的高度
         */
this.canvasHeight=0,
/**
         * 资源列表
         */
this.resourceList=[],this.mainResource=t,e&&(this.persent=e)}return i.prototype.addSourse=function(t){return this.resourceList.push(t),this},
/**
     * 加载图片
     */
i.prototype.loadResourse=function(s,i){return t.__awaiter(this,void 0,void 0,(function(){var n;return t.__generator(this,(function(r){return(n=new Image).crossOrigin="anonymous",n.src=s,[2/*return*/,new Promise((function(r,o){n.onload=function(){var e=i?t.__assign({ref:n},i):n;r(e)},n.onerror=function(){e.error(s,"[d-utils] ImageUtils loadResourse 裁剪图片加载错误"),o()}}))]}))}))},i.prototype.composeMainResource=function(t){var e=t.width/t.height;this.canvasWidth=t.width*this.persent,this.canvasHeight=this.canvasWidth/e,
// 设置canvas的宽高
this.canvas.width=this.canvasWidth,this.canvas.height=this.canvasHeight,this.context.drawImage(t,0,0,this.canvasWidth,this.canvasHeight),this.context.restore()},
/**
     * @description cavans绘制效果
     * @param image addSourse 添加的数据信息
     */
i.prototype.renderResource=function(t){var e={left:t.left*this.canvasWidth,top:t.top*this.canvasHeight,width:t.width*this.canvasWidth,height:t.height*this.canvasHeight};this.context.save(),t.needRound?(
// 走圆形绘制图片 此时都视为正方形
this.context.arc(e.width/2+e.left,e.width/2+e.top,e.width/2,0,2*Math.PI,!1),this.context.clip(),this.context.drawImage(t.ref,e.left,e.top,e.width,e.width),this.context.restore()):(
// 走正常绘制
this.context.drawImage(t.ref,e.left,e.top,e.width,e.height),this.context.restore())},
/**
     * @description 初始化canvas的设置
     * @return { Promise } 返回合成成功的image对象信息
     */
i.prototype.compose=function(){return t.__awaiter(this,void 0,void 0,(function(){var e,i,n,r=this;return t.__generator(this,(function(t){switch(t.label){case 0:return this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),[4/*yield*/,this.loadResourse(this.mainResource)];case 1:return e=t.sent(),this.composeMainResource(e),i=[],n=this.resourceList.reduce((function(t,e,i){if(e.type===s.ImageUtilsType.TextType.Image){var n=r.loadResourse(e.content,e);t.push(n)}else r.context.font=e.fanmily||s.ImageUtilsType.FontStyle.fanmily,r.context.fillStyle=e.color||s.ImageUtilsType.FontStyle.color,r.context.fillText(e.content,e.left*r.canvasWidth,e.top*r.canvasHeight);return t}),i),[4/*yield*/,Promise.all(n)];case 2:
// 再次绘制
return[4/*yield*/,t.sent().forEach((function(t){r.renderResource(t)}))];case 3:
// 再次绘制
return t.sent(),[2/*return*/,Promise.resolve(this.convertCanvasToImage())]}}))}))},
/**
     * @description canvase转换成图片
     * @return { Image } 返回一个new Image的实例
     */
i.prototype.convertCanvasToImage=function(){var t=new Image;return t.src=this.canvas.toDataURL("image/png",1),e.success(t,"[d-utils] ImageUtils convertCanvasToImage 图片对象创建成功"),t},i}();module.exports=i;