SVG转canvas再转png图片
SVG转canvas再转png图片
横着走的螃蟹 发表于3年前
SVG转canvas再转png图片
  • 发表于 3年前
  • 阅读 306
  • 收藏 3
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: SVG canvas png
SVG转canvas再转png图片这个无聊的需求是因为客户要用邮件客户端看各种图表,只好搞了搞。
对插件canvg.js做出了小的改动,把canvg()函数第二个参数由文件路径修改为直接传递svg代码,同时避免了警告
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check 
代码如下:
<html>
<head>
	<meta charset="UTF-8">
	<title>Svg to Png</title>
	<script src="mycanvg.js"></script>
	<script src="rgbcolor.js"></script>
	<script src="jquery.js"></script>
</head>
<body>
<div id="svgContainer">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height='100px' width='600px'>
	  <circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" />
	</svg>
</div>
<canvas id="myCanvas" height="100" width="600" >Your browser does not support the HTML5 canvas tag.</canvas>
<div style="background-color:blue;height:50px;margin:10 10 10 0">
</div>
<img src='' id='myImg' />

    <script type="text/javascript">
	// var c = document.getElementById('myCanvas');
	// var ctx = c.getContext('2d');
	// ctx.fillStyle = '#FF0000';
	// ctx.fillRect(0, 0, 80, 100);
	var str = $('#svgContainer')[0].innerHTML;
	console.log(str);
	canvasId = document.getElementById('myCanvas');
	canvg(canvasId,str);
	function convertCanvasToImage(canvas) {
		var image = new Image();
		image.src = canvas.toDataURL("image/png");
		return image;
	}
	document.getElementById('myImg').src = convertCanvasToImage(myCanvas).src;
    </script>

</body>
</html>

修改后的canvg.js代码太多了,贴不完,先不贴了


共有 人打赏支持
粉丝 13
博文 110
码字总数 25534
×
横着走的螃蟹
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: