toDataURL 的处理——将convascontext 转换为canvashtml答案

【问题标题】：Handling of toDataURL - convert convascontext into canvashtmltoDataURL 的处理——将convascontext 转换为canvashtml
【发布时间】：2021-03-15 19:33:07
【问题描述】：

我浏览我的 HTML 并将其转换为 Canvas。

for (const element of htmlData) {
    var input = document.getElementById(element);
    allPromises.push(html2canvas(input));
}

在下一步中，我将处理我的 Promise 数组，尝试将画布裁剪为特殊大小并使用 jsPDF 将其写入 PDF。

Promise.all(allPromises).then((response) => {
     response.forEach((input) => {
         var croppedImage = cropImg(input);
         imgData = croppedImage.toDataURL('image/jpeg', 1.0);
         insertImg(imgData, imgWidth_mm, imgHeight_mm);
    }
}

我用于裁剪的函数如下所示：

function cropImg(image) {
    var ctx = image.getContext('2d');
    ctx.drawImage(image, 20, 20, 50, 50, 0, 0, 50, 50);
    return ctx;
}

不幸的是，我收到错误消息：croppedImage.toDataURL is not a function 看起来.toDataURL 函数无法处理我给它的画布的原始上下文。有什么建议我可以解决这个问题吗？如果我不裁剪画布，一切都很好。

【问题讨论】：

toDataURL 是canvas 上的方法，而不是context：developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/… 所以只需返回image，它应该被修复。请注意，您正在动态修改此图像 - 因此在裁剪时会立即覆盖原始图像。
没错，错误信息已修复，但如果我将其更改为：return image
你确定这里没有被自己的眼睛欺骗？裁剪绝对应该有效，并且应该适用于您现有的画布。当然，你还没有清除画布，所以你只是在上面画画。如果您正在绘制的内容可能是空的，那么您可能会被愚弄以为什么都没有发生。就个人而言，我肯定会为我的作物使用一块新鲜的画布并将其归还。这就是我所能说的——这里的代码似乎没有问题。请尝试提出一个非常清晰的测试用例，以便确定它不起作用。

标签： javascript reactjs jspdf html2canvas todataurl

【解决方案1】：

代码是正确的，只是裁剪的值是错误的。

编辑：这里的东西是对的。我可以通过return image 传递图像

【讨论】：