小程序
小游戏
企业微信
微信支付
扫描小程序码分享
最近想在小程序上使用ar功能，使用three.js在canvas webgl上画3D物体，自然就涉及到最后的截图生成。
在拍照方法中，先截图camera，然后在新的canvas上画出来，然后想把webgl canvas的内容画出来，然是输出的webglUrl居然是空，根本拿不到数据，不知道有哪位大拿可以帮助解决这个问题，希望吧webgl canvas和camera的照片一起合成
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，请问找到解决办法了吗？我也要做这样的功能
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
var width; var height; var gl = self.canvas.getContext("webgl", { preserveDrawingBuffer: true }); self.renderer.render(self.scene, self.camera); width = gl.drawingBufferWidth; height = gl.drawingBufferHeight; const pixels = new Uint8Array(width * height * 4); gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); var dataArray = new Uint8ClampedArray(typedArrayToBuffer(pixels)); putImgData(); function putImgData() { wx.canvasPutImageData({ canvasId: "draw", data: dataArray, x: 0, y: 0, width: width, height: height, success: (res) => { wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, destWidth: width, destHeight: width, canvasId: 'draw', success: (res) => { callback(res); }, fail: (res) => { console.log(res); } }, self) }, fail(res) { console.log(res); } }, self); } function typedArrayToBuffer(array) { return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) }
你好，请问解决了吗。。我也需要把<canvas type = "webgl"> 生成一张图片。。也是用three.js
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
wx.getImageInfo({
src: 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU0MTg2OTY1NSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=',
success: (res) => {
console.log(res.path);
console.log("开始画webgl图片到canvas画布");
context.drawImage(res.path, 0, 0, this.data.width, this.data.height);
context.draw(false, () => {
console.log("开始保存canvas图片到本地");
wx.canvasToTempFilePath({
canvasId: 'drawcanvas',
success: function (res) {
console.log(res.tempFilePath);
let filePath = res.tempFilePath;
console.log("开始保存canvas图片到相册");
wx.saveImageToPhotosAlbum({
filePath:filePath,
success(res) {
wx.showToast({
title: '生成成功',
})
}
},
fail: function (res) {
console.log("保存错误");
console.log(res);
}, (e) => {
console.log("画布画图错误");
console.log(e);
});
}, fail: function (res) {
console.log("获取图片信息错误");
小程序貌似没有提供toDataUrl接口，你应该用
wx.canvasToTempFilePath
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，请问找到解决办法了吗？我也要做这样的功能
var width; var height; var gl = self.canvas.getContext("webgl", { preserveDrawingBuffer: true }); self.renderer.render(self.scene, self.camera); width = gl.drawingBufferWidth; height = gl.drawingBufferHeight; const pixels = new Uint8Array(width * height * 4); gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); var dataArray = new Uint8ClampedArray(typedArrayToBuffer(pixels)); putImgData(); function putImgData() { wx.canvasPutImageData({ canvasId: "draw", data: dataArray, x: 0, y: 0, width: width, height: height, success: (res) => { wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, destWidth: width, destHeight: width, canvasId: 'draw', success: (res) => { callback(res); }, fail: (res) => { console.log(res); } }, self) }, fail(res) { console.log(res); } }, self); } function typedArrayToBuffer(array) { return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) }你好，请问解决了吗。。我也需要把<canvas type = "webgl"> 生成一张图片。。也是用three.js
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
wx.getImageInfo({src: 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU0MTg2OTY1NSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=',success: (res) => {console.log(res.path);console.log("开始画webgl图片到canvas画布");context.drawImage(res.path, 0, 0, this.data.width, this.data.height);context.draw(false, () => {console.log("开始保存canvas图片到本地");wx.canvasToTempFilePath({canvasId: 'drawcanvas',success: function (res) {console.log(res.tempFilePath);let filePath = res.tempFilePath;console.log("开始保存canvas图片到相册");wx.saveImageToPhotosAlbum({filePath:filePath,success(res) {wx.showToast({title: '生成成功',})}})},fail: function (res) {console.log("保存错误");console.log(res);}})}, (e) => {console.log("画布画图错误");console.log(e);});}, fail: function (res) {console.log("获取图片信息错误");console.log(res);}})}小程序貌似没有提供toDataUrl接口，你应该用
wx.canvasToTempFilePath
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html