在通过toDataURL保存为文件之前，可以修剪画布图像的某些部分吗？

Question

我正在从网页中将画布另存为图像。我用html2canvas来获得画布（但我认为这并不重要）

一切都很完美，但是图像的布局。

我需要这样修剪图像：

有没有简单的方法可以做到这一点？例如这样的东西：

canvas.trim(0,15,canvas.width-30,canvas.height);

顺便说一句，我想用纯JavaScript做到这一点。

感谢任何提示。

Answer 1

是的，您可以这样做，这是我的操作方式：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<img id="img" src="https://i.ytimg.com/vi/LRVsxe5OJVY/maxresdefault.jpg">

<script>
    function saveMask() {
        var element = document.getElementById('img');
        html2canvas(element, {allowTaint: true}).then(h2c => {
            var canvas = document.createElement("canvas");
            canvas.height = 170;
            canvas.width = element.width - 300;

            var ctx = canvas.getContext('2d')
            ctx.drawImage(h2c, -150, 0);

            document.body.appendChild(canvas);
            element.parentNode.removeChild(element);
        });
    }
    setTimeout(saveMask, 2000);
</script>