screenshot.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. // const util = require('@/static/utils/util.js');
  2. const config = require('@/services/urlConfig.js');
  3. // import requestConfig from '@/services/requestConfig.js';
  4. // import { GLTFLoader } from '@/webgl/jsm/loaders/GLTFLoader.js';
  5. export default {
  6. data() {
  7. return {
  8. canvas2d: null,
  9. }
  10. },
  11. watch: {},
  12. onReady() {
  13. // wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res) => {
  14. // this.canvas2d = res[0].node
  15. // })
  16. },
  17. methods: {
  18. //触发主页面的截屏动作
  19. screenPromiseShot() {
  20. let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
  21. return new Promise(resolve => {
  22. currUniPage.screenshotResolve = resolve
  23. })
  24. },
  25. //转base64
  26. base64src(base64data, fun){
  27. const base64 = base64data; //base64格式图片
  28. const time = new Date().getTime();
  29. const imgPath = wx.env.USER_DATA_PATH + "/4DImage/" + util.formatDate(new Date(), "yyyyMMddhhmmss") + ".jpg";
  30. //如果图片字符串不含要清空的前缀,可以不执行下行代码.
  31. const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
  32. const file = wx.getFileSystemManager();
  33. // console.warn("***base64src***",base64data)
  34. file.writeFileSync(imgPath, imageData, "base64");
  35. fun(imgPath);
  36. },
  37. // 翻转Y轴-像素方案
  38. flip(pixels, w, h, c) {
  39. // handle Arrays
  40. if (Array.isArray(pixels)) {
  41. var result = this.flip(new Float64Array(pixels), w, h, c);
  42. for (var i = 0; i < pixels.length; i++) {
  43. pixels[i] = result[i];
  44. }
  45. return pixels;
  46. }
  47. if (!w || !h) throw Error('Bad dimensions');
  48. if (!c) c = pixels.length / (w * h);
  49. var h2 = h >> 1;
  50. var row = w * c;
  51. var Ctor = pixels.constructor;
  52. // make a temp buffer to hold one row
  53. var temp = new Ctor(w * c);
  54. for (var y = 0; y < h2; ++y) {
  55. var topOffset = y * row;
  56. var bottomOffset = (h - y - 1) * row;
  57. // make copy of a row on the top half
  58. temp.set(pixels.subarray(topOffset, topOffset + row));
  59. // copy a row from the bottom half to the top
  60. pixels.copyWithin(topOffset, bottomOffset, bottomOffset + row);
  61. // copy the copy of the top half row to the bottom half
  62. pixels.set(temp, bottomOffset);
  63. }
  64. },
  65. /**
  66. * 截图
  67. */
  68. async shottingAction(type=1) {
  69. let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
  70. //时机合适时-像素存在则触发生成
  71. return new Promise(resolve => {
  72. this.screenPromiseShot().then((param) => {
  73. if(param){
  74. this.flip(param[0], param[1], param[2], 4);
  75. const canvas = currUniPage.canvas2d;
  76. const ctx = canvas.getContext('2d');
  77. // ImageData 对象,data是像素 一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示
  78. const img = canvas.createImageData(param[0], param[1], param[2]);
  79. canvas.height = img.height;
  80. canvas.width = img.width;
  81. ctx.putImageData(img, 0, 0);
  82. uni.canvasToTempFilePath({
  83. x: 0,
  84. y: 0,
  85. destWidth: canvas.width,
  86. destHeight: canvas.height,
  87. canvasId: "canvas",
  88. canvas: canvas,
  89. fileType: 'jpg',
  90. quality: 1,
  91. success: (res)=> {
  92. console.log("***canvasToTempFilePath-success***", res)
  93. this.upload(res.tempFilePath,resolve);
  94. },
  95. fail: (res)=> {
  96. console.warn("***canvasToTempFilePath-fail***", res);
  97. if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
  98. currUniPage.starRender()//启动渲染
  99. }
  100. resolve('')
  101. }
  102. })
  103. }else{
  104. let imgBase64 = this.canvas.toDataURL();
  105. this.base64src(imgBase64, (res) => {
  106. console.warn('转化后的url:', res)
  107. this.upload(res,resolve);
  108. })
  109. }
  110. })
  111. })
  112. },
  113. //上传图片
  114. async upload(filePath, cb = null) {
  115. var fileName = "4DImage/" + util.formatDate(new Date(), "yyyyMMddhhmmss") + '.jpg';
  116. let tokenObj = await requestConfig("getUploadToken", {});
  117. console.log("tokenObj:", tokenObj);
  118. var token = tokenObj.single.token;
  119. var resultUrl = tokenObj.single.resultUrl; //上传图片的访问前缀this.resultUrl =
  120. let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
  121. uni.uploadFile({
  122. url: "https://up.qiniup.com",
  123. filePath: filePath,
  124. name: "file",
  125. formData: {
  126. key: fileName,
  127. token: token,
  128. },
  129. success: (uploadFileRes) => {
  130. let obj = JSON.parse(uploadFileRes.data);
  131. let shottingImg = resultUrl + obj.key;
  132. console.warn("***截图图片***", shottingImg);
  133. if (cb ) {
  134. cb(shottingImg)
  135. }
  136. },
  137. fail: (error) => {
  138. cb("")
  139. },
  140. complete(e) {
  141. if(currUniPage && currUniPage.starRender && typeof(currUniPage.starRender)=='function'){
  142. currUniPage.starRender()//截图成功后,启动渲染
  143. }
  144. }
  145. });
  146. },
  147. }
  148. }