将Uint8ClampedArray数据转为blob,再转为file文件，放到formData里，作为一个文件属性传给后端

1、Uint8ClampedArray     转为   blob

const ImageDataToBlob = function (imageData) {
  let w = imageData.width;
  let h = imageData.height;
  let canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  let ctx = canvas.getContext('2d');
  ctx.putImageData(imageData, 0, 0);
  return new Promise((resolve) => {
    canvas.toBlob(resolve);
  });
};

 ⚠️

JS的类型数组大体可分为3类：无符号整数、有符号整数、浮点数。

Int8Array; Uint8Array; Uint8ClampedArray; Int16Array; Uint16Array; Int32Array; Uint32Array; Float32Array; Float64Array;

基本上都可以望文生义，看名字就知道怎么回事。

但是有一个例外 Uint8ClampedArray ，它与 Uint8Array 颇为相似，但又有所区别。

因为颜色数据刚好都是符合8位二进制的无符号整数，所以这两个类型在处理Canvas绘图数据时常常用到。

Uint8ClampedArray主要用于某些特殊场景，典型的就是 ImageData.
clamped这个词的字面意思是“紧固的，夹紧的”。
如果输入的值已经是0~255之间的整数，那么Uint8Array 与 Uint8ClampedArray的最终结果是一致的。

Uint8Array 与 Uint8ClampedArray 的区别，就在于处理不在该范围（0~255之间的整数）的输入数值的转换逻辑的差异。
 

 2、blob    转为   file 文件

let files = new window.File([res],  'screenshot.png',  { type: res.type }); 
 
//res即为Uint8ClampedArray转换为blob的结果！

转换结果：

 

 

3、将 file 放到 formData 里 传给后端

const formdata = new FormData();
 
formdata.append('screenshot',files)
 
 
screenShotApi(formdata).then((data) => {
   if(data.code==10000){
      ElMessage({
      type: 'success',
      message: '截图成功！',
      });
     }
  });

参数样式：

4、截图全部代码：

 
  <div style="text-align: center" @click="screenShot">
        <i class="iconfont icon-jietu"></i>
        <p>截图</p>
  </div>
 
 
 
/**
 * 截图
 * **/
const ImageDataToBlob = function (imageData) {
  let w = imageData.width;
  let h = imageData.height;
  let canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  let ctx = canvas.getContext('2d');
  ctx.putImageData(imageData, 0, 0);
  return new Promise((resolve) => {
    canvas.toBlob(resolve);
  });
};
async function screenShot() {
  const resImg = await rtc.localVideoTrack.getCurrentFrameData();
  ImageDataToBlob(resImg).then((res) => {
// Blob 转化为 File
 
let files = new window.File([res],  'screenshot.png',  { type: res.type });
 
const formdata = new FormData();
 
formdata.append('orderId',shenheResult.orderId)
formdata.append('callLogId',shenheResult.callLogId)
formdata.append('screenshot',files)
    screenShotApi(formdata).then((data) => {
if(data.code==10000){
      ElMessage({
      type: 'success',
      message: '截图成功！',
    });
}
    });
  });
}