Canvas toDataURL在首次尝试时不会返回整个URL
[英]Canvas toDataURL doesn't return whole URL on first try
问题描述
I've got some code which takes a drawing made on in SVG with Raphael (a 400x400 image loaded into the SVG with Raphael), converts it to a canvas with canvg, and should then take canvas.toDataURL and make it an image. 
我有一些代码，该代码使用Raphael在SVG中进行绘制（使用Raphael将400x400图像加载到SVG中），将其转换为具有canvg的画布，然后应使用canvas.toDataURL使其成为图像。 All of this should happen when a button is pushed. 所有这些都应该在按下按钮时发生。 The first two steps work, but the third is glitchy. 前两个步骤有效，但第三个步骤有问题。 The first time I press the button, a 300x150 blank image is placed in the final div instead of the 400x400 image. 第一次按下按钮时，会将300x150的空白图像放置在最后的div中，而不是400x400的图像中。 If I press the button again, the image shows up fine (correct size and everything). 如果再次按下该按钮，图像将显示正常（正确的尺寸和所有显示）。 I've tried to use both img.onload and the jquery version $(img).load but neither seems to keep the problem from happening. 我试图同时使用img.onload和jquery版本$（img）.load，但似乎都不能阻止问题的发生。 Therefore, I feel like it's an issue with the canvas having not been drawn completely yet but I can't prove that and I can't seem to make the code wait until it has been drawn. 因此，我认为这是画布尚未完全绘制的问题，但我无法证明这一点，而且似乎无法等待代码绘制完成。 Below is all the code. 以下是所有代码。 I tried to make it a fiddle but I kept getting security errors with the image. 我试图使它成为小提琴，但是图像始终出现安全错误。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/raphael.js"></script>
<script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var nowX, nowY, R = Raphael("svg_drawing", 400, 400);
$($("svg").get(0)).attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
var templ = R.image("images/band_clutch.jpg", 0, 0, 400, 400);
});
function toImg(){
var svg = $("#svg_drawing").html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
var canvas = $("#canvas")[0];
canvg(canvas, svg);
var imgData = canvas.toDataURL('image/jpg');
var img = new Image();
$(img).load(function(){
$("#drawing_area").html("");
$(img).appendTo("#drawing_area");
});
img.src = imgData;
}
</script>
<title>Sandbox</title>
</head>
<body style="margin: 0; width:3000px">
<div id="svg_drawing" style="background-color:white;display:inline-block;height:400px;width:400px;border:1px solid black;"></div>
<canvas id="canvas" style="display:inline-block;height:400px;width:400px;border:1px solid red;"></canvas>
<div id="drawing_area" style="background-color:white;display:inline-block;height:400px;width:400px;border:1px solid black;"></div>
<button onclick="toImg()" style="display:inline-block;vertical-align:top;">Do it</button>
</body>
</html>
1 个解决方案
解决方案1
5 已采纳 2012-06-13 14:17:30
It sounds like the canvas area is staying at the default 350 x 150. Try setting 听起来画布区域保持默认的350 x150。请尝试设置
canvas.width = canvas.height = 400;
before drawing (keep the inline CSS as-is). 绘制之前（保持内联CSS不变）。
To fix the actual rendering issue, you need to tell the canvg method to do the toDataURI stuff asyncronously, once the rendering has been complete: 要解决实际的渲染问题，一旦渲染完成，您需要告诉canvg方法异步执行toDataURI的工作：
function toImg(){
var svg = $("#svg_drawing").html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
var canvas = $("#canvas")[0];
canvg(canvas, svg, {
renderCallback : function(){
var imgData = canvas.toDataURL('image/jpg');
var img = new Image();
$(img).load(function(){
$("#drawing_area").html("");
$(img).appendTo("#drawing_area");
});
img.src = imgData;
}
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.