three.js(场景生成图片)

接上文,在场景中渲染模型,并添加标签后,需要对当前的信息做截图保存.以下提供两种截图方式.

方式一:three.js的api生成图片-生成的图片中不包括添加的3D对象.

import html2canvas from "html2canvas";
export default{
    captureScreenshot(){
      const element = document.getElementById("container")
      // 将渲染结果转换为DataURL
      const dataURL = renderer.domElement.toDataURL();
      //对截图做相关操作-比如:下载
    },
}

方式二:通过html2canvas实现

//html2canvas截屏生成图片
handleCaputureImage(){
    const element = document.getElementById("container");
    html2canvas(element, {
        width: element.offsetWidth,
        height: element.offsetHeight,
        useCORS: true,
        allowTaint: true, // 这两个属性都是图片跨域相关属性
    })
    .then((canvas) => {
        let tagImage = canvas.toDataURL();
        //在此处对图片进行操作--比如:下载等
    })
},

图片下载方法

//触发下载事件
handleDownload(url){
  let a = document.createElement("a")
  a.href = url
  a.download = "截屏文件"
  document.body.appendChild(a)
  a.click()
  a.remove()
},