logo标签列表

缩放添加到画布的图像

htmlcanvassvg
3
我正在尝试从SVG创建图像。 到目前为止，我已经捕获了使用RaphaelJS创建的内联SVG，然后使用SVG代码创建图像，然后将其添加到画布中。我在这里找到了一篇帖子，向我展示了如何缩放图像以适应画布。 然而，我想让图像更大。我对SVG和画布相当新，所以不确定这是否是一个好方法。我的最终目标是生成一个图像，我可以将其添加到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相同，已经纠正了图片大小。
请提供<svg>标签，您的代码可以使用外部SVG图像。 - Pavel Gatnar
@PavelGatnar 我已经在我的问题中添加了svg，但很遗憾，由于我正在使用raphael，所以svg不是外部图像。 - Tony_89
你的画布尺寸是多少？ - Pavel Gatnar
我没有设置画布的高度和宽度，直到你提到它时我才意识到，我错误地认为它会自动调整到图像大小。现在我已经将画布的高度和宽度设置为与SVG相同，现在它完美地工作了。谢谢你的帮助 :)。 - Tony_89
1个回答
0

你必须明确定义SVG图像的宽度和高度。 例如：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接