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: '截图成功!',
});
}
});
});
}