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

女爷i 2021-07-25 01:35 712阅读 0赞

### 目录 ###

*  1.先安装 html2canvas包
 *  2.引入
 *  3.使用
 *  4.如果出现截图不了three加载的模型可以将渲染器改成如下
 *  5.效果
 *  6.将生成的画布保存为图片下载到本地
 *  7.将生成的画布保存为图片上传到服务器

# 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.效果 #

![在这里插入图片描述][20200917160250410.gif_pic_center]

# 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()
    })

![在这里插入图片描述][20200917163700354.gif_pic_center]

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

[20200917160250410.gif_pic_center]: /images/20210724/a15a2aac3d1044b49e8c90e50cf81415.png
[20200917163700354.gif_pic_center]: /images/20210724/2fb8c0d837a24651839721c6b04f0ae9.png