javascript - 对于zrender实现的canvas实现的图像，如何实现一个缩略图？

Question

zrender绘制成功后，不知道缩略图怎么实现，没有思路主要，想问问大概是怎么个思路

Answer 1

// 获取原始图像数据
let dataURL = zr.painter.getLayer(0).dom.toDataURL();

// 创建一个新的 canvas
let thumbnailWidth = 100;  // 设置缩略图宽度
let thumbnailHeight = 100; // 设置缩略图高度
let thumbnailCanvas = document.createElement('canvas');
thumbnailCanvas.width = thumbnailWidth;
thumbnailCanvas.height = thumbnailHeight;

// 绘制缩略图
let ctx = thumbnailCanvas.getContext('2d');
let img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height);
};
img.src = dataURL;


img.onload = function() {
    let thumbnailDataURL = thumbnailCanvas.toDataURL();
   
    document.getElementById('thumbnail').src = thumbnailDataURL;
};