diff --git a/src/components/customPoster/index.js b/src/components/customPoster/index.js index 96b2865..25b1011 100644 --- a/src/components/customPoster/index.js +++ b/src/components/customPoster/index.js @@ -1,101 +1,101 @@ -import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改,node_modules会被忽略 - -Component({ - properties: { - params: { - type: Object, - observer(newVal, _olVal) { - if (Object.keys(newVal).length > 0) { - this.paramsFormat(newVal); - this.setData({ - width: newVal.body.width, - height: newVal.body.height, - bgImg: newVal.body.bgImg, - elementsMp: newVal.elements, - }); - this.drawImage1(); - } - }, - }, - }, - data: { - imgUrl: "", - width: "", - height: "", - imgheight: "", - bgImg: "", - elementsMp: [], - }, - lifetimes: { - attached() {}, - }, - methods: { - paramsFormat(params) { - params.elements.forEach((item) => { - if (item.type === 0) { - // 图片居中 - if (item.halign === "center") { - item.left = (params.body.width - item.width) / 2; - } - } else { - item.text = item.text.replace(/[\r\n]/g, ""); - // 文字居中(使文字标签宽度等于画布宽度,文字加上居中的className) - if (item.halign === "center") { - item.width = item.width || params.body.width; - item.left = (params.body.width - item.width) / 2; - } - if (item.halign === "right") { - item.width = params.body.width; - } - if (item.id === "shareText" && item.text.length > 30) { - item.text = item.text.slice(0, 30) + "..."; - } - if (item.id === "note-title" && item.text.length > 28) { - item.text = item.text.slice(0, 28) + "..."; - } - if (item.id === "note-content" && item.text.length > 90) { - item.text = item.text.slice(0, 90) + "..."; - } - let len = params.elements.some((x) => x.id === "note-title" && x.text.length); - if (len && item.id === "note-summary" && item.text.length > 62) { - item.text = item.text.slice(0, 62) + "..."; - } else if (item.id === "note-summary" && item.text.length > 76) { - item.text = item.text.slice(0, 76) + "..."; - } - } - }); - }, - drawImage1() { - let self = this; - this.drawImage1 = new Wxml2Canvas({ - obj: self, - width: this.data.width, // 宽, 以iphone6为基准,传具体数值,其它机型自动适配 - height: this.data.height, // 高 - element: "canvas1", - background: "transparent", - progress(percent) {}, - finish(url) { - self.setData({ - imgUrl: url, - }); - self.triggerEvent("finish", url); - }, - error(res) {}, - }); - - let data = { - list: [ - { - type: "wxml", - class: "#canvas-bill-body-mp .draw_canvas", - limit: "#canvas-bill-body-mp", - x: 0, - y: 0, - }, - ], - }; - - this.drawImage1.draw(data); - }, - }, -}); +import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改,node_modules会被忽略 + +Component({ + properties: { + params: { + type: Object, + observer(newVal, _olVal) { + if (Object.keys(newVal).length > 0) { + this.paramsFormat(newVal); + this.setData({ + width: newVal.body.width, + height: newVal.body.height, + bgImg: newVal.body.bgImg, + elementsMp: newVal.elements, + }); + this.drawImage(); + } + }, + }, + }, + data: { + imgUrl: "", + width: "", + height: "", + imgheight: "", + bgImg: "", + elementsMp: [], + }, + lifetimes: { + attached() {}, + }, + methods: { + paramsFormat(params) { + params.elements.forEach((item) => { + if (item.type === 0) { + // 图片居中 + if (item.halign === "center") { + item.left = (params.body.width - item.width) / 2; + } + } else { + item.text = item.text.replace(/[\r\n]/g, ""); + // 文字居中(使文字标签宽度等于画布宽度,文字加上居中的className) + if (item.halign === "center") { + item.width = item.width || params.body.width; + item.left = (params.body.width - item.width) / 2; + } + if (item.halign === "right") { + item.width = params.body.width; + } + if (item.id === "shareText" && item.text.length > 30) { + item.text = item.text.slice(0, 30) + "..."; + } + if (item.id === "note-title" && item.text.length > 28) { + item.text = item.text.slice(0, 28) + "..."; + } + if (item.id === "note-content" && item.text.length > 90) { + item.text = item.text.slice(0, 90) + "..."; + } + let len = params.elements.some((x) => x.id === "note-title" && x.text.length); + if (len && item.id === "note-summary" && item.text.length > 62) { + item.text = item.text.slice(0, 62) + "..."; + } else if (item.id === "note-summary" && item.text.length > 76) { + item.text = item.text.slice(0, 76) + "..."; + } + } + }); + }, + drawImage() { + let self = this; + this.drawImage1 = new Wxml2Canvas({ + obj: self, + width: this.data.width, // 宽, 以iphone6为基准,传具体数值,其它机型自动适配 + height: this.data.height, // 高 + element: "canvas1", + background: "transparent", + progress(percent) {}, + finish(url) { + self.setData({ + imgUrl: url, + }); + self.triggerEvent("finish", url); + }, + error(res) {}, + }); + + let data = { + list: [ + { + type: "wxml", + class: "#canvas-bill-body-mp .draw_canvas", + limit: "#canvas-bill-body-mp", + x: 0, + y: 0, + }, + ], + }; + + this.drawImage1.draw(data); + }, + }, +});