Question

我正在使用react和openlayers，一个不同类型的地图框架（向量，wms等）。我遇到的问题是我的代码捕获画布并将其传递给pdf（通过库jsPDF），pdf中显示的图像显示变形，拉伸...即，不保持相同的尺寸和比例。

例如，在生成pdf之前，我已经放了几个日志来捕获画布的宽度和高度，我有以下结果：宽度：3076px和高度：1672px我选择了尺寸为21.0 cm的A4和29.7厘米。

我一直在研究如何调整画布元素的大小，以便它不会变形，但我不能。如何在不歧视的情况下缩放图像？我需要记住的是：像素和其他里程碑有一件事吗？屏幕的像素密度？

这是我的代码，如果你帮助我解决我的问题，我将不胜感激，因为它让我发疯。

if V30 = 1 then
V40 = "Condition met"
else if V30 = 2 then
V40 = "Condition not met"
else
V40 = ""
end if

Answer 1

我很简单。假设您想要将图像放在页面边界内而不剪切它的任何部分，则有3种情况：

缩放后，图像的宽度恰好适合页面宽度，并且垂直维度中还有剩余的空白。在这种情况下，您需要使用page.width/image.width的比例缩放图像。如何知道是否是这种情况？ image.width/image.height > page.width/page.height
缩放后，图像的高度恰好适合页面边界，并且在image.width/image.height < page.width/page.height时，水平维度中会留下空白区域。现在，您需要使用page.height/image.height
图像恰好适合水平和垂直方向（image.width/image.height == page.width/page.height）。这可以缩减为之前的任何一种情况，因为您可以将比率计算为page.height/image.height和page.width/image.width。

请注意页面宽度和高度取决于页面方向，因此您需要将它们换成横向。假设您已经获得了画布尺寸并将其分配给imageWidth和imageHeight：

...
//I don't like hoisting, so let's declare the variables here ;)
var pageWidth, pageHeight;

if (this.state.orientation === 'portrait') {
    pageWidth = dim[1];
    pageHeight = dim[0]
} else {        
    pageWidth = dim[0];
    pageHeight = dim[1]
}
var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
pdf = new jsPDF(this.state.orientation, undefined, format);
pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
...

这并没有考虑任何保证金，但我相信如果需要你可以照顾它们。

如何在没有变形的情况下将canvas传递给pdf

1 个答案: