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

// const util = require('@/static/utils/util.js');
	import * as THREE from 'three';
const config = require('@/services/urlConfig.js');
	import { MessageBox } from 'mint-ui';
export default {
	data() {
		return {
			canvas2d: null,
		}
	},
	watch: {},
	methods: {
		//触发主页面的截屏动作
		screenPromiseShot() {
			// let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			return new Promise(resolve => {
				this.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) {
			if (!w || !h){
				return false;
			};
			// handle Arrays
			if (Array.isArray(pixels)) {
				var result = this.flip(new Uint8Array(pixels), w, h, c);
				for (var i = 0; i < pixels.length; i++) {
					pixels[i] = result[i];
				}
				return pixels;
			}
			// try{
			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);
			}
			// }catch(e){
			// 	//TODO handle the exception
			// 	alert(e+row+":"+topOffset+'-'+bottomOffset)
			// }
			
		},
		
		getClipPicUrl(resolve){
			let gl = this.renderer.getContext();
			let frameBuffer = new THREE.Vector2();
			let pix = window.devicePixelRatio;
			// this.renderer.getDrawingBufferSize(frameBuffer);//返回一个包含渲染器绘图缓存宽度和高度(单位像素)的对象。
			let width = parseInt(this.width*pix )|| frameBuffer.x;
			let height = parseInt(this.height*pix) || frameBuffer.y;
			console.warn("***getClipPicUrl***",width,height,this.bottomLeftX*pix,this.bottomLeftY*pix);
			let pixelData = new Uint8Array(width * height * 4);
			gl.readPixels(this.bottomLeftX*pix, this.bottomLeftY*pix, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
			this.flip(pixelData, width, height, 4);//入参必须是整数 width height
			// alert("getClipPicUrl1"+width)
			const canvas = document.getElementById('canvas');
			let context = canvas.getContext('2d');
			
			let img = context.createImageData(width, height);
			for (var i = 0; i < img.data.length; i += 4) {
			    img.data[i + 0] = pixelData[i + 0];
			    img.data[i + 1] = pixelData[i + 1];
			    img.data[i + 2] = pixelData[i + 2];
			    img.data[i + 3] = pixelData[i + 3];
			}
			// img.data = pixelData;
			canvas.height = img.height;
			canvas.width = img.width;
			context.putImageData(img, 0, 0);
			// alert("getClipPicUrl2"+width)
		    // let data = drawCanvasCtx.getImageData(100, 100, 200, 200);
		    // canvas.width = 100;
		    // canvas.height = 100;
		    // context.putImageData(data, 0, 0)
			let imgBase64 = canvas.toDataURL();
			this.uploadFile(imgBase64,resolve);
		    // return 
		},
		/**
		 * 截图
		 */
		async shottingAction(type=1) {
			// let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
			//时机合适时-像素存在则触发生成
			return new Promise(resolve => {
				this.screenPromiseShot().then((param) => {
					if(param){
						let {pixelData,width,height} = param;
						this.flip(pixelData,width,height, 4);
						let canvas = document.getElementById('canvas');
						let context = canvas.getContext('2d');
						
						let img = context.createImageData(width, height);
						for (var i = 0; i < img.data.length; i += 4) {
							img.data[i + 0] = pixelData[i + 0];
							img.data[i + 1] = pixelData[i + 1];
							img.data[i + 2] = pixelData[i + 2];
							img.data[i + 3] = pixelData[i + 3];
						}
						canvas.height = img.height;
						canvas.width = img.width;
						context.putImageData(img, 0, 0);
						let imgBase64 = canvas.toDataURL();
						this.uploadFile(imgBase64,resolve);
					}else{
						// let imgBase64 = this.canvas.toDataURL();
						// this.base64src(imgBase64, (res) => {
						// 	console.warn('转化后的url：', res)
						// 	this.upload(res,resolve);
						// })
						
						// let img = new Image();
						// img.src = this.canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
						let imgBase64 = this.canvas.toDataURL();
						if(type==2){
							resolve(imgBase64)
						}else if(type==1){
							this.uploadFile(imgBase64,resolve)
						}
					}					
				})
			})
		},
		async uploadFile(file, cb = null) {
			let data = {
				"base64Str": file,
			};
			let result = await requestConfig("uploadBase64", data, true);
			console.log(result, 'gggggg');
			if (result && result.success) {
				let shottingImg = result.single.filePath;
				cb(shottingImg);
			}else{
				cb("")
			}
			if(this && this.starRender && typeof(this.starRender)=='function'){
				this.starRender()//截图成功后，启动渲染
			}
		},
		//上传图片
		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(this && this.starRender && typeof(this.starRender)=='function'){
						this.starRender()//截图成功后，启动渲染
					}
				}
			});
		},
	}
}