three-platformize 微信小程序 uniapp 使用截图功能
最近需要将3d场景进行截图,但是网上的各种各样,看的我一团乱麻,因此在解决完后就将这些简单的分享一下;
原理:将3维场景的那个canvas中的像素提取出来,找一个空的canvas二维画布放上去,然后用二维画布的那个进行截图
实际操作:
saveImage(){ const [data, w, h] = screenshot(renderer, scene, camera, WebGLRenderTarget); const ctx = helperCanvas.getContext('2d') const imgData = helperCanvas.createImageData(data, w, h); helperCanvas.height = imgData.height; helperCanvas.width = imgData.width; ctx.putImageData(imgData, 0, 0); const imgDataFromCanvas = ctx.getImageData(0, 0, w, h) const hasPixel = imgDataFromCanvas.data.some(i => i !== 0) wx.canvasToTempFilePath({ // @ts-ignore canvas: helperCanvas, success(res) { wx.previewImage({ urls: [res.tempFilePath], }) } }) },
说一下代码部分
import { screenshot } from 'three-platformize/tools/screenshot'
import { WebGLRenderTarget } from 'three';
是直接从three-platformize中导入进来的
然后放入场景、相机、渲染器、以及一个WebGLRenderTarget
然后当执行saveImage这个方法时就能够将当前相机看到的变成一个图片临时保存,也就是那个res.tempFilePath,
然后就是我通过this. 的方式一直获取不到data中的方法,因此呢就把渲染器什么的都放入到了全局变量中
注意:代码是在uniapp vue3中使用的,微信小程序原生的当然也是可以用的了
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。