3
我正在尝试从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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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=""Arial"" 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已校正的图像尺寸相同的设置在画布高度和宽度。
能否请您提供''
@PavelGatnar我已经添加了SVG我的问题,遗憾的是因为我使用拉斐尔svg不是外部图像。 –
什么是您的画布尺寸? –