h5-webgl-program/src/mixins/screenshot.js

// const util = require('@/static/utils/util.js');
const config = require('@/services/urlConfig.js');
// import requestConfig from '@/services/requestConfig.js';
// import { GLTFLoader } from '@/webgl/jsm/loaders/GLTFLoader.js';
export default {
	data() {
		return {
			canvas2d: null,
		}
	},
	watch: {},
	onReady() {
		// wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res) => {
		//     this.canvas2d = res[0].node
		// })
	},
	methods: {
		//触发主页面的截屏动作
		screenPromiseShot() {
			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			return new Promise(resolve => {
				currUniPage.screenshotResolve = resolve
			})
		},
		//转base64
		base64src(base64data, fun){
			const base64 = base64data; //base64格式图片
			const time = new Date().getTime();
			const imgPath = wx.env.USER_DATA_PATH + "/4DImage/" + util.formatDate(new Date(), "yyyyMMddhhmmss") + ".jpg";
			//如果图片字符串不含要清空的前缀,可以不执行下行代码.
			const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
			const file = wx.getFileSystemManager();
			// console.warn("***base64src***",base64data)
			file.writeFileSync(imgPath, imageData, "base64");
			fun(imgPath);
		},
		// 翻转Y轴-像素方案
		flip(pixels, w, h, c) {
			// handle Arrays
			if (Array.isArray(pixels)) {
				var result = this.flip(new Float64Array(pixels), w, h, c);
				for (var i = 0; i < pixels.length; i++) {
					pixels[i] = result[i];
				}
				return pixels;
			}
		
			if (!w || !h) throw Error('Bad dimensions');
			if (!c) c = pixels.length / (w * h);
		
			var h2 = h >> 1;
			var row = w * c;
			var Ctor = pixels.constructor;
		
			// make a temp buffer to hold one row
			var temp = new Ctor(w * c);
			for (var y = 0; y < h2; ++y) {
				var topOffset = y * row;
				var bottomOffset = (h - y - 1) * row;
				// make copy of a row on the top half
				temp.set(pixels.subarray(topOffset, topOffset + row));
				// copy a row from the bottom half to the top
				pixels.copyWithin(topOffset, bottomOffset, bottomOffset + row);
				// copy the copy of the top half row to the bottom half
				pixels.set(temp, bottomOffset);
			}
		},
		/**
		 * 截图
		 */
		async shottingAction(type=1) {
			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			//时机合适时-像素存在则触发生成
			return new Promise(resolve => {
				this.screenPromiseShot().then((param) => {
					if(param){
						this.flip(param[0], param[1], param[2], 4);
						const canvas = currUniPage.canvas2d;
						const ctx = canvas.getContext('2d');
						//  ImageData 对象，data是像素 一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示
						const img = canvas.createImageData(param[0], param[1], param[2]);
						canvas.height = img.height;
						canvas.width = img.width;
						ctx.putImageData(img, 0, 0);
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							destWidth:  canvas.width,
							destHeight: canvas.height,
							canvasId: "canvas",
							canvas: canvas,
							fileType: 'jpg',
							quality: 1,
							success: (res)=> {
								console.log("***canvasToTempFilePath-success***", res)
								this.upload(res.tempFilePath,resolve);
							},
							fail: (res)=> {
								console.warn("***canvasToTempFilePath-fail***", res);
								if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
									currUniPage.starRender()//启动渲染
								}
								resolve('')
							}
						})
					}else{
						let imgBase64 = this.canvas.toDataURL();
						this.base64src(imgBase64, (res) => {
							console.warn('转化后的url：', res)
							this.upload(res,resolve);
						})
					}					
				})
			})
		},
		//上传图片
		async upload(filePath, cb = null) {
			var fileName = "4DImage/" + util.formatDate(new Date(), "yyyyMMddhhmmss") + '.jpg';
			let tokenObj = await requestConfig("getUploadToken", {});
			console.log("tokenObj：", tokenObj);
			var token = tokenObj.single.token;
			var resultUrl = tokenObj.single.resultUrl; //上传图片的访问前缀this.resultUrl =
			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			uni.uploadFile({
				url: "https://up.qiniup.com",
				filePath: filePath,
				name: "file",
				formData: {
					key: fileName,
					token: token,
				},
				success: (uploadFileRes) => {
					let obj = JSON.parse(uploadFileRes.data);
					let shottingImg = resultUrl + obj.key;
					console.warn("***截图图片***", shottingImg);
					if (cb ) {
						cb(shottingImg)
					}
				},
				fail: (error) => {
					cb("")
				},
				complete(e) {
					if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
						currUniPage.starRender()//截图成功后，启动渲染
					}
				}
			});
		},
	}
}