dom-to-image可以按坐标进行截图么，目前使用html2canvas，截图数量多时性能慢

Question

问题描述

目前业务需求在canvas上截取多张图片，转成base64后传给后台，目前使用的html2canvas,发现数量多的时候，截图流程很慢，看到说有dom-to-image性能好些，但是发现api中没有设置区域坐标的选项，只能截整个dom对象

问题出现的环境背景及自己尝试过哪些方法

1. html2canvas，性能慢
2. dom-to-image，目前没发现有局部截图的配置/api

相关代码

/**
 * 将标注转为base64编码
 * @param {Array:(structure)} structures 结构体的数组,主要信息{x,y,w,h}
 * @param {dom canvas} canvasBox 需要截图的canvas元素
 */
let transformStructure2Base64 = async (structures, canvasBox, quality) => {
    // 获取元素相对于视窗的偏移量
    let ClientRect = canvasBox.getBoundingClientRect();
    let opts;

    let tmp = [];
    for (let i = 0, l = structures.length; i < l; i++) {
        let item = structures[i]
        // 有问题,未渲染完便截图会导致,图像渲染发生偏移
        // if (item.imageBase64Str) {
        //     tmp.push(item.imageBase64Str)
        //     continue;
        // }
        opts = {
            x: (item.x || item.left) + ClientRect.left,
            y: (item.y || item.top) + ClientRect.top,
            width: item.w || item.width,
            height: item.h || item.height,
            useCORS: true
        };

        let cutted = await html2canvas(canvasBox, opts);
        let base64 = cutted.toDataURL(type, quality || 1.0);
        tmp.push(base64.replace(typeHead, ""));
    }

    return tmp
}

transformStructure2Base64 ([...一个长度为三四十的数组])

你期待的结果是什么？实际看到的错误信息又是什么？

1. 最好能解答下html2canvas的提速方式
2. 次要的话希望能得到dom-to-image的局部截图的方法
3. 有其他库推荐么