时间戳

首页 > 解决方案 > 是否可以在通过 toDataURL 另存为文件之前修剪画布图像的某些部分？

canvas - 是否可以在通过 toDataURL 另存为文件之前修剪画布图像的某些部分？

问题描述

我正在将画布保存为网页中的图像。我曾经html2canvas得到那幅画布（但我认为这并不重要）

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

我需要像这样修剪图像：

简短的介绍

有什么简单的方法可以做到这一点吗？例如这样的：

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

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

感谢您提供任何提示。

标签： canvashtml5-canvas

解决方案

是的，你可以这样做，这是我的做法：

<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>

推荐阅读