场景：

需求：对图片进行大小的裁剪，拖动裁剪框的四个角进行裁剪大小的调整。调整之后需要将裁剪后的图片进行上传服务器。

代码：

function canvasToImage(canvas){  
    const b64 = canvas.toDataURL('image/jpeg')  
    let img = atob(b64.split(',')[1]);  
    let img_buffer = [];  
    for (let i = 0; i < img.length; i++) {  
        img_buffer.push(img.charCodeAt(i));  
    }  
    let u8 = new Uint8Array(img_buffer); 
    return new Blob([u8], {type: 'image/jpeg'})  
}

代码详解：

const b64 = canvas.toDataURL('image/jpeg'); 将给定的 Canvas 元素转换为一个基于 Base64 编码的数据 URL 字符串，并将其存储在变量 b64 中。使用 'image/jpeg' 参数指定输出的图像格式为 JPEG 格式。
let img = atob(b64.split(',')[1]); 从 Base64 编码的数据 URL 字符串中提取出真实的图像数据。atob() 函数用于将 Base64 编码的字符串解码为原始的 ASCII 字符串。b64.split(',')[1] 是为了去除数据 URL 字符串前面的 "data:image/jpeg;base64," 部分。
let img_buffer = []; 创建一个空数组 img_buffer，用于存储图像数据的字符编码值。
for (let i = 0; i < img.length; i++) 循环遍历 img 中的每个字符。
img_buffer.push(img.charCodeAt(i)); 将每个字符的字符编码值（整数）添加到 img_buffer 数组中。img.charCodeAt(i) 获取字符的 Unicode 编码。
let u8 = new Uint8Array(img_buffer); 创建一个无符号 8 位整数数组 u8，并使用 img_buffer 数组作为初始值。
console.log(new Blob([u8], {type: 'image/jpeg'})); 创建一个 Blob 对象，将 u8 数组作为数据，并指定 MIME 类型为 'image/jpeg'。输出 Blob 对象。
return new Blob([u8], {type: 'image/jpeg'}); 返回一个 Blob 对象，其中包含了 u8 数组的数据，并指定 MIME 类型为 'image/jpeg'。

总结：

这段代码的作用是将给定的 Canvas 元素转换为 Blob 对象，以便在需要处理二进制图像数据的场景中使用，例如上传到服务器或进行本地存储等操作。

canvas画布转换成图片格式

场景：

代码：

代码详解：

总结：