问题 :
expImage示例⽣成书签视⻆图⽚时:
1.如果地图中有threejs加载的模型,⽣成视⻆书签后,⽣成的图⽚中没有模型
效果图如下:
![](https://img-blog.csdnimg.cn/8cb47bca796846778d3ecba19576e83c.png)
期望效果 :
地图上three加载模型时,⽣成视⻆书签时,视⻆图⽚中也有模型显示
解决⽅式 :
参考这个示例,将threejs对应的canves导出png图⽚后合并下。
http://mars3d.cn/editor.html?id=map/fun/expImage
// 合并2张图片
function mergeImage(base1, base2, width, height) {
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas")
canvas.width = width
canvas.height = height
const ctx = canvas.getContext("2d")
const image = new Image() // MAP图片
image.crossOrigin = "Anonymous" // 支持跨域图片
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height)
const image2 = new Image() // div图片
image2.crossOrigin = "Anonymous" // 支持跨域图片
image2.onload = () => {
ctx.drawImage(image2, 0, 0, width, height)
// 合并后的图片
const base64 = canvas.toDataURL("image/png")
resolve(base64)
}
image2.src = base2
}
image.src = base1
})
}