使用js截图 threeJS加载出的模型

1.先安装 html2canvas包

npm i html2canvas --save

2.引入

import html2canvas from 'html2canvas' // 引入截图库

3.使用

html2canvas(document.querySelector('.model'), {
  windowWidth: 800,
  windowHeight: 800
}).then(function(canvas) {
  document.body.appendChild(canvas)
})

4.如果出现截图不了three加载的模型可以将渲染器改成如下

this.renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true
})

5.效果

6.将生成的画布保存为图片下载到本地

canvas.toDataURL(type, encoderOptions);
// type 可选，图片格式，默认为 image/png
// encoderOptions 可选，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

html2canvas(document.querySelector('.model'), {
  windowWidth: 800,
  windowHeight: 800
}).then(function(canvas) {
  var imgData = canvas.toDataURL('image/png')
  const link = document.createElement('a')
  link.href = imgData
  link.download = `${this.$tools.create_token()}.png` // 下载的文件名
  link.click()
})

7.将生成的画布保存为图片上传到服务器