文档章节

SVG转canvas再转png图片

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/14 11:27
字数 275
阅读 401
收藏 3
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
博文 145
码字总数 31648
作品 0
朝阳
高级程序员
照片位图转SVG矢量图片JS工具primitive.js等简介

照片位图转SVG矢量图片JS工具primitive.js等简介 张鑫旭-鑫空间-鑫生活2017-11-292 阅读 动画canvasSVG primitive是相对来说比较有名的将照片图片使用几何图形重建的工具。基于原始的这个pri...

张鑫旭-鑫空间-鑫生活
2017/11/29
0
0
js实现svg图形转存为图片下载

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码...

麦拂沙
2015/07/26
0
1
绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,...

xhload3d
2015/02/01
0
0
batik 怎么获取SVG图片的高宽?

请教用过batik的同学,我要做一个将svg转png的程序,但转换后png的高度和宽度都不对,有部分图片被隐藏了,指定高度和宽度可以完整的显示,但太麻烦了,有没有方法获取svg图片的高度和宽度?...

wmlgl
2013/09/03
825
2
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
36
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
29
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
40
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
28
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部