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

问题描述：

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

第 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;
};

服务端代码：<?php $serv = new \Swoole\Server('127.0.0.1', 9501); //设置异 ...