在保留变换属性的同时将img添加到画布

Question

我有一个canvas元素来显示视频，还有一个img在它上面进行转换（使用jeelizFaceFilter）。我想在转换和定位canvas和img的同时捕获它们。但是，如果我只是在drawImage和canvas上进行类似img的操作，则转换将不会保留。如何将它们一起捕获为单个图像？ 也许更简单一些就是截取网页区域的屏幕截图？这可能吗？

HTML设置

<!-- MY CANVAS -->
<canvas width="1024" height="1024" id='jeeFaceFilterCanvas' style="background-color: red; max-width: calc(100% + 1px); max-height: 100vmin; top: calc(50vmin + 65px); left: calc(50vmin - 1px); position: absolute; display: block;"></canvas>

<!-- MY IMG -->
<img id='jeelizFaceFilterFollow' src='someImg.png'>

图像转换

var cssVal="perspective("+DOMElement.style.perspective+')'+" matrix3d("+threeMatrix.elements.join(',')+")";
jeelizFaceFilterFollow.style.transform=cssVal;
jeelizFaceFilterFollow.style['-webkit-transform']=cssVal;

捕获画布

function captureFrame() {
    // Need to merge img and canvas here
    var dataURL = jeeFaceFilterCanvas.toDataURL();
    curFrameStack.push(dataURL); // Save img in array
}