文档章节

SVG转canvas再转png图片

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/14 11:27
字数 275
阅读 2.1K
收藏 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代码太多了,贴不完,先不贴了


© 著作权归作者所有

横着走的螃蟹
粉丝 15
博文 173
码字总数 48826
作品 0
朝阳
高级程序员
私信 提问
加载中

评论(0)

浅入深出,原生API实现SVG 转 BASE64

令人发指的构建包 看了很多相关的技术文章,大多数用 html2canvas.js 和 canvas.js 第三方包实现,有些用了像 D3.js 这样更大型的构建包,而实际用到的功能,却只是其中 1% 都不足,简直就是...

白告June
2019/03/22
0
0
照片位图转SVG矢量图片JS工具primitive.js等简介

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

张鑫旭-鑫空间-鑫生活
2017/11/29
0
0
使用html2canvas.js实现页面截图并显示或上传

  最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下。   在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、s...

osc_arhijur3
2018/12/16
4
0
将html内容转为canvas内容的实现方法 将html转为图片的方法 html2canvas.js的使用

介绍 因为要做记录将html的内容转成canvas并且作为图片显示。 其实是因为要做一个H5页面,类似于小测试,最后的测试结果是以图片输出的(其实canvas也能直接长按保存)。在网上找到了一个js库...

towrabbit
03/31
0
0
Java 将PDF 转为Word、图片、SVG、XPS、Html、PDF/A

本文将介绍通过Java编程来实现PDF文档转换的方法。包括: 1. PDF转为Word 2. PDF转为图片 3. PDF转为Html 4. PDF转为SVG 4.1 将PDF每一页转为单个的SVG 4.2 将一个包含多页的PDF文档转为一个...

osc_6oe4sgbd
2019/07/23
29
0

没有更多内容

加载失败,请刷新页面

加载更多

Lync Server 试用版激活

问题描述: Lync Server2013安装的试用版,180天过期之后Lync Server 服务停止运行 ……………………………………………………………………………………………………………………….. 原因分...

osc_tylqml9v
6分钟前
4
0
nginx、fastCGI、php-fpm关系梳理

前言:   Linux下搭建nginx+php+memached(LPMN)的时候,nginx.conf中配需要配置fastCGI,php需要安装 php-fpm扩展并启动php-fpm守护进程,nginx才可以解析php脚本。那么,这样配置的背后原...

osc_qjkncsnp
7分钟前
11
0
Office web apps 服务器运行一段时间之后CPU就是达到100%

office web apps服务器部署两台,采用服务器场的方式实现高可用,主要为Lync server 2013 提供共享PPT; exchange 2013、SharePoint 2013提供在线预览word、PPT、excel。 原因分析(Cause) ...

osc_zwv9uj8l
7分钟前
4
0
Artifactory中Maven仓库配置优化——提升Virtual仓库下载速度

问题背景 随着研发团队不断扩大Artifactory中Maven仓库也在逐步增多,包括 local、remote、virtual 仓库,其中往往会涵盖RELEASE和SNAPSHOT包类型仓库,为了对使用客户透明简化用户配置,管理...

JFrog杰蛙
8分钟前
9
0
Linux 开机自检(未整理全)

1、开机自检BIOS 检查硬件有没有问题 没问题就根据启动次序 交加硬盘 2、MBR引导 交给硬盘哪里? 硬盘0 柱面0 磁道1 扇区的前446byte 1扇区一共是512byte 剩下64byte(分区表 4个)+2(分区结...

osc_t1zhs6ty
8分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部