1

我正在尝试选择图像的某个区域，然后在画布内显示该部分。为了查看实际发生的情况，我将代码简化为一个简单的片段：

<canvas id="myCanvas" width="400" height="300"></canvas>

(...)

imageObj.onload = function() {
        // draw cropped image
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = 200;
        var sourceHeight = 200;
        var destX = 0;
        var destY = 0;
        var destWidth = 200;
        var destHeight = 200;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

如果我使用实际图像，一切都会按预期工作（您可以在此处查看 jsfiddle ）。

在此处输入图像描述

为了获得更高的文本质量，我使用了一个 Safari 功能，它可以让我给一个图像标签一个 pdf 源。但是，当我尝试在画布上绘制相同的部分时，我会渲染一个不同的区域，您也可以在 jsfiddle 上看到（需要 Safari）

在此处输入图像描述

PDF 实际上是导出为 PDF 文件（使用 Mac 的预览）的原始 JPG 图像，因此大小相同。我遇到过来自不同来源的不同 PDF 文件的问题，所以这不是由我创建 PDFS 的方式引起的问题。我在代码中所做的唯一更改是将扩展名 jpg 切换为 pdf。

在画布上绘制全尺寸图像效果很好，两个版本的呈现方式相同，因此它不像 Safari 无法在画布期间正确绘制 PDF。

有没有其他人遇到过这个问题？有什么我可以做的吗？

4

0 回答 0