Canvas不会渲染css3的过滤器

Question

JSFiddle for the problem

由于canvas不支持来自跨域的图像，因此这个小提琴可能会引起一些问题，但您可以随时在计算机上进行检查。

HTML

  <div id="html2canvas">
        <div class="htmltoken" style="left: 175px; top: 94px; -webkit-filter: sepia(1) grayscale(50%);">
            <img src="http://i.imgur.com/44nUYN0.jpg">
        </div>
        <div class="htmltoken" style="left: 258px; top: 112px; border-color: rgb(37, 92, 189); border-width: 8px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; opacity: 0.75; -webkit-filter: saturate(2.5) brightness(1) contrast(2) blur(2.5px);">
            <img src="http://i.imgur.com/tEpBeQV.jpg">
        </div>
    </div>
            <button id="canvasMake">Make canvas</button>

JavaScript（使用jQuery）

$('#canvasMake').click(function(){
     html2canvas(document.getElementById('html2canvas'), {
          onrendered: function(canvas) {
              document.body.appendChild(canvas);
                var dataurl = canvas.toDataURL('image/png'),
                    img = document.createElement("img");
                    img.src = dataurl;
                    document.body.appendChild(img);
         }
      });       
});

结果

预期结果（通过剪切工具完成）

我知道我可以通过 fabric.js 以某种方式实现这一目标。

但我不太确定如何获得正确的输出。有人可以指导我吗？