zan-poster
Version:
通过json在canvas上绘制图像, 基于cax画图框架开发, 本画图组件是json2canvas库的改造、优化版本 (详情查看README.md文档末说明)。
413 lines (412 loc) • 14.6 kB
JavaScript
// eslint-disable-next-line no-unused-vars
import { h } from "@stencil/core";
import Poster from "zan-poster-lib";
const blankImg = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
export class ZanPoster {
constructor() {
this.painting = null;
this.preload = false;
this.showCanvas = false;
this.showLoading = true;
this.isSave = true;
this.base64 = true;
this.sync = true;
this.canvasList = [];
this.canvasId = `canvasId-${new Date().getTime()}`;
this.canvas = null;
this.isPainting = false;
this.readying = false;
this.syncPainting = true;
this.imgUrl = '';
this.success = undefined;
this.fail = undefined;
}
watchPaintingHandler(value) {
this.setValue(value);
this.start();
}
watchSyncHandler(value) {
this.syncPainting = value;
}
// 设置内部状态值
setValue(value) {
const canvasList = Array.isArray(value) ? value : [value];
if (value && canvasList.length && canvasList.every(s => s && s.width && s.height) && !this.isPainting) {
this.canvasList = canvasList;
}
}
changeHandler(result) {
this.change.emit(result);
}
readyHandler() {
this.ready.emit();
}
/**
* 外部画图方法
* 支持回调、promise形式
*/
async draw(params) {
this.setValue(params.painting);
/**
* 异步画图
* 需设置success回调函数
*/
if (typeof params.sync !== 'undefined') {
this.syncPainting = !(!params.sync && params.success);
}
this.success = params.success;
this.fail = params.fail;
return await this.start();
}
componentWillLoad() {
this.readying = true;
this.readyHandler();
}
async start() {
if (this.isPainting) {
return;
}
const data = this.canvasList;
const len = data.length;
const success = Array(len).fill({ tempFilePath: blankImg });
const error = [];
this.isPainting = true;
for (let index = 0; index < len; index++) {
const item = data[index];
await this.drawer(item)
.then((res) => {
success.splice(index, 1, res);
if (!this.syncPainting) {
this.submitSuccess(success);
}
})
.catch((err) => {
console.log(err);
error.push(err);
});
}
this.isPainting = false;
if (success.length) {
this.syncPainting && this.submitSuccess(success);
this.success = null;
this.fail = null;
this.canvasList = [];
this.syncPainting = this.sync;
return success;
}
else {
this.fail && this.fail(error);
// this.changeHandler(error[0])
this.success = null;
this.fail = null;
this.canvasList = [];
this.syncPainting = this.sync;
return error[0];
}
}
submitSuccess(success) {
this.success && this.success(success);
this.changeHandler(success);
}
async drawer(painting) {
return new Promise((resolve, reject) => {
const inter = setInterval(() => {
if (painting && this.readying && this.canvas) {
clearInterval(inter);
try {
Poster.draw(painting, this.canvas, {
data: {
preload: this.preload,
},
}, () => {
setTimeout(() => {
this.isSave && this.saveImage().then(resolve).catch(reject);
});
}, (model) => {
this.canvas.width = model.width;
this.canvas.height = model.height;
});
}
catch (err) {
console.log(err);
reject(err);
}
}
else {
this.canvas = this.el.shadowRoot.querySelector('.drawer');
}
}, 50);
});
}
async saveImage() {
return new Promise((resolve, reject) => {
if (this.base64) {
this.imgUrl = this.canvas.toDataURL('image/png');
resolve({ tempFilePath: this.imgUrl, errMsg: 'drawer:ok', width: this.canvas.width, height: this.canvas.height });
return;
}
this.canvas.toBlob((blob) => {
this.imgUrl = URL.createObjectURL(blob);
if (this.imgUrl) {
resolve({ tempFilePath: this.imgUrl, errMsg: 'drawer:ok', width: this.canvas.width, height: this.canvas.height });
}
else {
// eslint-disable-next-line prefer-promise-reject-errors
reject({ errMsg: 'drawer:fail' });
}
});
});
}
imageHandler() {
if (this.imgUrl) {
URL.revokeObjectURL(this.imgUrl);
}
}
render() {
return (h("div", { key: 'c96428627778c4f07daa08e52f3de9446894dfa2', class: "zan-poster", style: { overflow: this.showCanvas ? 'auto' : 'hidden' } }, h("canvas", { key: '73fa941a8a9034b806733bff6582807494d47dd5', id: this.canvasId, class: "drawer" }), this.imgUrl && this.showCanvas && h("img", { key: 'b8b730db34f06b6212857fede01924269c5c4a05', src: this.imgUrl, class: "preview-image", onLoad: this.imageHandler })));
}
static get is() { return "zan-poster"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["zan-poster.scss"]
};
}
static get styleUrls() {
return {
"$": ["zan-poster.css"]
};
}
static get properties() {
return {
"painting": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "PaintingType | PaintingType[]",
"resolved": "PaintingType | PaintingType[]",
"references": {
"PaintingType": {
"location": "import",
"path": "./zan-poster.type",
"id": "src/components/zan-poster/zan-poster.type.ts::PaintingType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u753B\u56FE\u6570\u636E"
},
"defaultValue": "null"
},
"preload": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u9884\u52A0\u8F7D"
},
"attribute": "preload",
"reflect": false,
"defaultValue": "false"
},
"showCanvas": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u662F\u5426\u663E\u793A\u753B\u677F"
},
"attribute": "show-canvas",
"reflect": false,
"defaultValue": "false"
},
"showLoading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u662F\u5426\u663E\u793ALoading\u8FDB\u5EA6\u72B6\u6001"
},
"attribute": "show-loading",
"reflect": false,
"defaultValue": "true"
},
"isSave": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u662F\u5426\u4FDD\u5B58\u56FE\u7247"
},
"attribute": "is-save",
"reflect": false,
"defaultValue": "true"
},
"base64": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u662F\u5426\u4E3Abase64\u683C\u5F0F"
},
"attribute": "base-6-4",
"reflect": false,
"defaultValue": "true"
},
"sync": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "\u662F\u5426\u540C\u6B65\u753B\u56FE"
},
"attribute": "sync",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"canvasList": {},
"canvasId": {},
"canvas": {},
"isPainting": {},
"readying": {},
"syncPainting": {},
"imgUrl": {},
"success": {},
"fail": {}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DrawerResponse | DrawerResponse[]",
"resolved": "DrawerResponse | DrawerResponse[]",
"references": {
"DrawerResponse": {
"location": "import",
"path": "./zan-poster.type",
"id": "src/components/zan-poster/zan-poster.type.ts::DrawerResponse"
}
}
}
}, {
"method": "ready",
"name": "ready",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"draw": {
"complexType": {
"signature": "(params: { painting: PaintingType | PaintingType[]; sync?: boolean; success?: (args: DrawerResponse[]) => void; fail?: (args: DrawerResponse[]) => void; }) => Promise<DrawerResponse | DrawerResponse[]>",
"parameters": [{
"name": "params",
"type": "{ painting: PaintingType | PaintingType[]; sync?: boolean; success?: (args: DrawerResponse[]) => void; fail?: (args: DrawerResponse[]) => void; }",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"DrawerResponse": {
"location": "import",
"path": "./zan-poster.type",
"id": "src/components/zan-poster/zan-poster.type.ts::DrawerResponse"
},
"PaintingType": {
"location": "import",
"path": "./zan-poster.type",
"id": "src/components/zan-poster/zan-poster.type.ts::PaintingType"
}
},
"return": "Promise<DrawerResponse | DrawerResponse[]>"
},
"docs": {
"text": "\u5916\u90E8\u753B\u56FE\u65B9\u6CD5\n\u652F\u6301\u56DE\u8C03\u3001promise\u5F62\u5F0F",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "painting",
"methodName": "watchPaintingHandler"
}, {
"propName": "sync",
"methodName": "watchSyncHandler"
}];
}
}
//# sourceMappingURL=zan-poster.js.map