缩放添加到画布的图像

Question

我正在尝试从 svg 创建图像。

到目前为止，我所做的是捕获使用 RaphaelJS 创建的内联 svg，然后使用 svg 代码创建图像，然后将其添加到画布中，我在这里找到了一篇文章，向我展示了如何缩放适合画布的图像。

但是，我想将图像放大。我对 svg 和 canvas 相当陌生，所以我不确定这是否是一个好方法。我的最终目标是生成可以添加到 pdf 的图像。我使用的代码如下。

var svgc = document.getElementById('graph').innerHTML;
var image = new Image();
image.src = "data:image/svg+xml," + encodeURIComponent(svgc);
var canvas = document.getElementById('viewport');

context = canvas.getContext('2d');

drawImageScaled(image, context);

function drawImageScaled(img, ctx) {
    var canvas = ctx.canvas;
    var hRatio = canvas.width / img.width;
    var vRatio = canvas.height / img.height;
    var ratio = Math.min(hRatio, vRatio);
    var centerShift_x = (canvas.width - img.width * ratio) / 2;
    var centerShift_y = (canvas.height - img.height * ratio) / 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, img.width, img.height,
                  centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}

我需要调整画布的大小，因为生成的图像太小了。

我想我需要调整图像的大小，但我不确定如何。感谢您的帮助。

我在下面包含了由 raphaeljs 创建的 svg。

<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.5px;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
    <rect x="200" y="20" width="50" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="200" y="20" width="50" height="50" rx="0" ry="0" fill="#ffff00" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;" opacity="0.5" stroke-width="2"></rect>
    <path fill="none" stroke="#000000" d="M300,20L700,20" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="30" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <rect x="200" y="20" width="20" height="50" rx="0" ry="0" fill="#00cc00" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <rect x="200" y="70" width="50" height="100" rx="0" ry="0" fill="#ff0000" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <path fill="none" stroke="#000000" d="M300,70L700,70" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="80" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <rect x="200" y="170" width="50" height="300" rx="0" ry="0" fill="#0033cc" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <path fill="none" stroke="#000000" d="M300,170L700,170" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="180" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <text x="195" y="480" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">0</tspan></text>
    <text x="195" y="434" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">50</tspan></text>
    <text x="195" y="388" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">100</tspan></text>
    <text x="195" y="342" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">150</tspan></text>
    <text x="195" y="296" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">200</tspan></text>
    <text x="195" y="250" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">250</tspan></text>
    <text x="195" y="204" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">300</tspan></text>
    <text x="195" y="158" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">350</tspan></text>
    <text x="195" y="112" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">400</tspan></text>
    <text x="195" y="66" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">450</tspan></text>
    <text x="195" y="20" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">500</tspan></text>
    <path fill="none" stroke="#000000" d="M200.5,480L200.5,20M196,480.5L201,480.5M196,434.5L201,434.5M196,388.5L201,388.5M196,342.5L201,342.5M196,296.5L201,296.5M196,250.5L201,250.5M196,204.5L201,204.5M196,158.5L201,158.5M196,112.5L201,112.5M196,66.5L201,66.5M196,20.5L201,20.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <rect x="100" y="20" width="15" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="85" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="115" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    </svg>

问题是我没有通过将画布宽度和高度设置为与它已更正图像大小的 svg 相同来设置画布高度和宽度。

Answer 1

您必须明确定义 svg 图像的 width 和 height。 例如

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="green" stroke-width="10" stroke="black"/>
</svg>

见http://jsfiddle.net/372gtsw9/