如何将canvas getImageData返回的Uint8ClampedArray转为base64 data url

错误原因 #

你直接对getImageData()返回的Uint8ClampedArray转码是无效的，因为该接口返回的是未编码的原始RGBA像素数组，每个像素对应4个字节分别存储红、绿、蓝、透明度数值，并非PNG/JPG这类标准图片格式的编码后二进制数据，直接转码必然得到非法结果。
另外你现有代码存在入参错误：getImageData的入参格式为getImageData(x坐标, y坐标, 区域宽度, 区域高度)，第三、四位是宽高不是右下角坐标，如果你传入的mousex1/mousey1是区域结束坐标，会导致获取到超大范围的空白像素，转码后就会出现大量A字符。

首选实现方案（最稳定，兼容性好） #

通过临时Canvas中转，直接调用原生API生成标准Data URL，不需要手动处理像素编码：

// 先计算裁剪区域的正确宽高
const cropX = mousex;
const cropY = mousey;
const cropWidth = mousex1 - mousex; // 结束x坐标减起始x坐标得到宽度
const cropHeight = mousey1 - mousey; // 结束y坐标减起始y坐标得到高度

// 创建临时Canvas
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = cropWidth;
tempCanvas.height = cropHeight;

// 将原Canvas的指定区域绘制到临时Canvas上，把下面的「originCanvas」替换为你原有的Canvas DOM对象
tempCtx.drawImage(originCanvas, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);

// 生成Data URL，默认格式为image/png，可自行调整为image/jpeg并指定质量
const base64DataUrl = tempCanvas.toDataURL('image/png');
// 若需要JPG格式可以用：const base64DataUrl = tempCanvas.toDataURL('image/jpeg', 0.9); 第二个参数为图片质量0-1

自定义修改ImageData后的转码方案 #

如果你已经对getImageData返回的像素数据做了自定义修改，可以先把修改后的ImageData绘制到临时Canvas再转码：

// 你的现有代码，注意入参要传正确的宽高
const imageData = ctx.getImageData(cropX, cropY, cropWidth, cropHeight);
// 这里可以添加你对imageData.data的自定义修改逻辑

const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = cropWidth;
tempCanvas.height = cropHeight;
tempCtx.putImageData(imageData, 0, 0);
const base64DataUrl = tempCanvas.toDataURL('image/png');

内容的提问来源于stack exchange，提问作者Yash Tripathi