daoji_h5/uni_modules/lime-painter/components/l-painter/nvue.js

// #ifdef APP-NVUE
import { sleep, getImageInfo, isBase64, useNvue, networkReg } from './utils';
const dom = weex.requireModule('dom')
import {version } from '../../package.json'

export default {
	data() {
		return {
			tempFilePath: [],
			isInitFile: false,
			osName: uni.getSystemInfoSync().osName
		}
	},
	created() {
		// if (this.hybrid) return
		// useNvue('_doc/uni_modules/lime-painter/', version, this.timeout).then(res => {
		// 	this.isInitFile = true
		// })
	},
	methods: {
		getParentWeith() {
			return new Promise(resolve => {
				dom.getComponentRect(this.$refs.limepainter, (res) => {
					this.parentWidth = Math.ceil(res.size.width)
					this.canvasWidth = this.canvasWidth || this.parentWidth ||300
					this.canvasHeight = res.size.height || this.canvasHeight||150
					resolve(res.size)
				})
			})
		},
		onPageFinish() {
			this.webview = this.$refs.webview
			this.webview.evalJS(`init(${this.dpr})`)
		},
		onMessage(e) {
			const res = e.detail.data[0] || null;
			if (res.event) {
				if (res.event == 'inited') {
					this.inited = true
				}
				if(res.event == 'fail'){
					this.$emit('fail', res)
				}
				if (res.event == 'layoutChange') {
					const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
					this.canvasWidth = Math.ceil(data.width);
					this.canvasHeight = Math.ceil(data.height);
				}
				if (res.event == 'progressChange') {
					this.progress = res.data * 1
				}
				if (res.event == 'file') {
					this.tempFilePath.push(res.data)
					if (this.tempFilePath.length > 7) {
						this.tempFilePath.shift()
					}
					return
				}
				if (res.event == 'success') {
					if (res.data) {
						this.tempFilePath.push(res.data)
						if (this.tempFilePath.length > 8) {
							this.tempFilePath.shift()
						}
						if (this.isCanvasToTempFilePath) {
							this.setFilePath(this.tempFilePath.join(''), {isEmit:true})
						}
					} else {
						this.$emit('fail', 'canvas no data')
					}
					return
				}
				this.$emit(res.event, JSON.parse(res.data));
			} else if (res.file) {
				this.file = res.data;
			} else{
				console.info(res[0])
			}
		},
		getWebViewInited() {
			if (this.inited) return Promise.resolve(this.inited);
			return new Promise((resolve) => {
				this.$watch(
					'inited',
					async val => {
						if (val) {
							resolve(val)
						}
					}, {
						immediate: true
					}
				);
			})
		},
		getTempFilePath() {
			if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
			return new Promise((resolve) => {
				this.$watch(
					'tempFilePath',
					async val => {
						if (val.length == 8) {
							resolve(val.join(''))
						}
					}
				);
			})
		},
		getWebViewDone() {
			if (this.progress == 1) return Promise.resolve(this.progress);
			return new Promise((resolve) => {
				this.$watch(
					'progress',
					async val => {
						if (val == 1) {
							this.$emit('done')
							this.done = true
							resolve(val)
						}
					}, {
						immediate: true
					}
				);
			})
		},
		async render(args) {
			try {
				await this.getSize(args)
				const {width} = args.css || args
				if(!width && this.parentWidth) {
					Object.assign(args, {width: this.parentWidth})
				}
				const newNode = await this.calcImage(args);
				await this.getWebViewInited()
				this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
				await this.getWebViewDone()
				await sleep(this.afterDelay)
				if (this.isCanvasToTempFilePath) {
					const params = {
						fileType: this.fileType,
						quality: this.quality
					}
					this.webview.evalJS(`save(${JSON.stringify(params)})`)
				}
				return Promise.resolve()
			} catch (e) {
				this.$emit('fail', e)
			}
		},
		getfile(e){
			let url = plus.io.convertLocalFileSystemURL( e )
			return new Promise((resolve,reject)=>{
				plus.io.resolveLocalFileSystemURL(url, entry => {
					var reader = null;
					entry.file( file => {
						reader = new plus.io.FileReader();
						reader.onloadend =  ( read )=> {
							resolve(read.target.result)
						};
						reader.readAsDataURL( file );
					}, function ( error ) {
						alert( error.message );
					} );
				},err=>{
					resolve(e)
				})
			})
		},
		async calcImage(args) {
			let node = JSON.parse(JSON.stringify(args))
			const urlReg = /url\((.+)\)/
			const {backgroundImage} = node.css||{}
			const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
			const url = node.url || node.src || isBG
			if(['text', 'qrcode'].includes(node.type)) {
				return node
			}
			if ((node.type === "image" || isBG) && url && !isBase64(url) && (this.osName == 'ios' ? true : !networkReg.test(url))) {
				let {path} = await getImageInfo(url)
				if(this.osName == 'ios') {
					path = await this.getfile(path)
				}
				if (isBG) {
					node.css.backgroundImage = `url(${path})`
				} else {
					node.src = path
				}
			} else if (node.views && node.views.length) {
				for (let i = 0; i < node.views.length; i++) {
					node.views[i] = await this.calcImage(node.views[i])
				}
			}
			return node
		},
		async canvasToTempFilePath(args = {}) {
			if (!this.inited) {
				return this.$emit('fail', 'no init')
			}
			this.tempFilePath = []
			if (args.fileType == 'jpg') {
				args.fileType = 'jpeg'
			}
			this.webview.evalJS(`save(${JSON.stringify(args)})`)
			try {
				let tempFilePath = await this.getTempFilePath()
				tempFilePath = await this.setFilePath(tempFilePath)
				args.success({
					errMsg: "canvasToTempFilePath:ok",
					tempFilePath
				})
			} catch (e) {
				args.fail({
					error: e
				})
			}
		}
	}
}
// #endif