vue将unity的canvas转成图片，并上传后台

需求：将unity目前的窗口形成截图并将其上传至后台。连干4篇文章。太累了。废话就少说了。直接来解决方案。

首先，找到unity给的文件夹下的Build/Web.json。将"webglContextAttributes": {"preserveDrawingBuffer": false}, 改为"webglContextAttributes": {"preserveDrawingBuffer": true}, 这个主要是开放截图，不然截图是一片空白

这个改为true一开始是我手动改的，后期unity已经将这个属性动态配置，你也可以喊unity像我这个unity工程师一样，动态配置。

然后前端的操作开始。首先，html要写ref,如图：

 然后在方法里面写上内容。

methods:{
    // 得到初始视角
    getCutAngle() {
      const canvasId = this.$refs.iframes.contentDocument.getElementsByTagName('canvas')[0]
      const viewPicUrl = canvasId.toDataURL('image/png')
      this.$refs.iframes.contentWindow.unityInstance.SendMessage('WebInvoker', 'Unity_RequestCurrentView')// 发送初始化视角请求
      const currentImg = this.base64ToBlob(viewPicUrl) //将canvas转成的png转成base64的文件流上传
      this._ajax_uploadSmallFile(currentImg) //上传文件
    },
    // 将canvas的base64转为文件流
    base64ToBlob(urlData, type) {
      const arr = urlData.split(',')
      let mime, bytes
      if (arr && arr.length === 2) {
        mime = arr[0].match(/:(.*?);/)[1] || type
        // 去掉url的头，并转化为byte
        bytes = window.atob(arr[1])
      } else {
        mime = type
        // 去掉url的头，并转化为byte
        bytes = window.atob(arr[0])
      }
      // 处理异常,将ascii码小于0的转换为大于0
      const ab = new ArrayBuffer(bytes.length)
      // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
      const ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      return new Blob([ab], {
        type: mime
      })
    },
}

将图片base64转为Blob（字节流），直接上传给后台。我这边的上传如图：

 上传就是用上传的formData上传啦。我们上传成功会返回路径显示。所以会有url赋值。至此，unity的canvas转为图片就完成了。

熬到两点，今晚都在写博客，平常写博客的时间没有，太忙了。所以抽空写多了些。