基于html2canvas做缩略图功能

1、需求背景

用户通过拖拽配置一个界面，当点击保存时，将当前界面保存成图片存起来，放到表格中展示。

2、实现

前端生成图片

html2canvas官网，通过html2canvas将dom转成canvas，使用canvas.toDataURL 这个api转成base64图片发给后端去存储

 /**
             * 获取要转换的dom
             */
            const dom = colRef.current.querySelector(`.${DropTargetPanelClassName}`);
            html2canvas(dom).then((canvas: any) => {
                const config = setAllDragData(dropConfig, dropData, clientRect);
                item.handle({
                    dropData: {
                        style: style,
                        dropConfig: config
                    },
                    image: canvas.toDataURL('image/jpeg', 0.3), // 缩小质量
                });
            });

后端存储

/**
 * 将base64 转换成图片
 * @param image
 * @returns {Promise}
 */
async createImageByBase64(image) {
    return new Promise((resolve, reject) => {
        if (image && image.startsWith('data:image')) {
            // 相对图片路径
            const fileFath = path.join('/upload', '/img');
            // 文件名称
            const fileName = `/${Date.now()}-thumbnail.png`;
            // 绝对图片路径
            const imgPath = path.join(this.ctx.app.baseDir, fileFath);
            // 写入路径
            const filePath = path.join(imgPath, fileName);
            /**
             * 去掉前缀
             */
            const base64 = image.replace(/^data:image\/\w+;base64,/, '');
            //把base64码转成buffer对象，
            const dataBuffer = new Buffer(base64, 'base64');
            if (!fs.existsSync(imgPath)) fs.mkdirSync(imgPath);
            fs.writeFile(filePath, dataBuffer, function (err) {
                resolve({
                    code: 0,
                    message: '上传成功',
                    data: path.join(fileFath, fileName)
                });
            });
        } else {
            resolve({
                code: 1,
                message: '上传失败',
                data: image
            });
        }
    })
}

3、展示界面