如何利用JS将已经svg转化为图片格式(jpg、png等),并且保存到本地

码农D马 2015-09-28 11:26:10
这是已经完成一部分的代码了,求大神补充,谢谢了,在线等!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="canvg.js"></script>
</head>
<body>
<h2>Input Div:</h2>
<div id="mydiv">
<ul>
<li style="width:33%;float:left;height:165px;padding:0px;margin:1px;display:inline;background: #3C3C3C;"></li>
</ul>
</div>
<h2>Output Image:</h2>

<script>
var divContent = document.getElementById("mydiv").innerHTML;
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='400' height='600'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;

document.getElementsByTagName('body')[0].appendChild(img);
</script>
</body>
</html>
...全文
19516 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
xuezt 2017-12-21
  • 打赏
  • 举报
回复
引用 2 楼 jikeytang 的回复:
https://github.com/gabelerner/canvg https://github.com/exupero/saveSvgAsPng 调用很简单,仔细看看readme。
我的数据转换保存图片空白,什么都没有。 <svg version="1.1" type="system" x="1896px" y="1691px" viewBox="-500 -500 1896 1691" style="position: absolute; top: -500px; left: -500px; width: 1896px; height: 1691px;"><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="red" stroke-width="2" stroke-dasharray="4" fill="red" stroke-opacity="0.65" fill-opacity="0.1" style="cursor: pointer; -webkit-user-select: none;" d="M 448 315 L 443 316 439 317 434 319 430 321 426 324 423 328 421 332 419 336 418 341 418 346 418 350 419 355 421 359 423 363 426 367 430 370 434 372 439 374 443 375 448 376 453 375 457 374 462 372 466 370 470 367 473 363 475 359 477 355 478 350 478 346 478 341 477 336 475 332 473 328 470 324 466 321 462 319 457 317 453 316 448 315"></path><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="blue" stroke-width="2" stroke-dasharray="4" fill="blue" stroke-opacity="0.65" fill-opacity="0.1" style="cursor: pointer; -webkit-user-select: none;" d="M 448 255 L 434 256 420 259 407 265 394 272 383 281 374 292 367 304 361 317 358 331 357 346 358 360 361 374 367 387 374 399 383 410 394 419 407 426 420 432 434 435 448 436 462 435 476 432 489 426 502 419 513 410 522 399 529 387 535 374 538 360 539 346 538 331 535 317 529 304 522 292 513 281 502 272 489 265 476 259 462 256 448 255"></path><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="green" stroke-width="2" stroke-dasharray="4" fill="green" stroke-opacity="0.65" fill-opacity="0.1" style="cursor: pointer; -webkit-user-select: none;" d="M 448 194 L 424 196 401 201 379 211 359 223 340 238 325 256 312 277 303 299 298 322 296 346 298 369 303 392 312 414 325 435 340 453 359 468 379 480 401 490 424 495 448 497 472 495 495 490 517 480 537 468 556 453 571 435 584 414 593 392 598 369 600 346 598 322 593 299 584 277 571 256 556 238 537 223 517 211 495 201 472 196 448 194"></path></svg>
weixin_38852958 2017-10-27
  • 打赏
  • 举报
回复
请问楼主是怎么解决的?
TextMusicData 2017-09-26
  • 打赏
  • 举报
回复
没有很难,自己写一个就好。
svg=>canvas=>png
我的网站http://www.t-m-d.net/
文本=>乐谱=>svg,mid,wav,png,bmp,jpeg,webp
你可以前往借鉴
weixin_37611970 2017-09-25
  • 打赏
  • 举报
回复
求楼主转出图片中文乱码怎么解决
cielzhao 2017-07-28
  • 打赏
  • 举报
回复
引用 3 楼 jikeytang 的回复:
看错了,第一个是导出在canvas,第二个试试。
本来是点赞的,怎么丢成搬砖了,就引用了一个js很好的解决了我遇到的问题,非常感谢。
董事长Kevin 2016-04-15
  • 打赏
  • 举报
回复
http://download.csdn.net/detail/g334082356/9492526 有效的话 楼主散分 不知道楼主现在还需要不?
董事长Kevin 2016-04-15
  • 打赏
  • 举报
回复
svg to png的 demo大伙可以下载试试 http://download.csdn.net/detail/g334082356/9492526
码农D马 2015-09-29
  • 打赏
  • 举报
回复
给个完整的Demo也行啊,各位大神
ximenwuji 2015-09-29
  • 打赏
  • 举报
回复
同求,帮搂住顶一下
码农D马 2015-09-29
  • 打赏
  • 举报
回复
引用 2 楼 jikeytang 的回复:
https://github.com/gabelerner/canvg https://github.com/exupero/saveSvgAsPng 调用很简单,仔细看看readme。
大神能帮我补充么,我执行成功不了
meixuaoxue 2015-09-29
  • 打赏
  • 举报
回复
Go 旅城通票 2015-09-29
  • 打赏
  • 举报
回复
http://stackoverflow.com/questions/18312271/javascript-how-to-save-html-rendered-on-webpage-as-image http://stackoverflow.com/questions/16873682/save-html-div-as-an-image-with-save-as-pop-up http://stackoverflow.com/questions/9075792/save-export-image-file-from-html-content
豪情 2015-09-29
  • 打赏
  • 举报
回复
看错了,第一个是导出在canvas,第二个试试。
豪情 2015-09-29
  • 打赏
  • 举报
回复
码农D马 2015-09-28
  • 打赏
  • 举报
回复
人呢?大神呢,求你们了T_T
Free Spire.PDF for .NET 是 Spire.PDF for .NET 的免费版本,无需购买即可用于个人或商业用途。使用该组件,程序员可以 在.NET 程序中创建、读取、写入、编辑和操作 PDF 文档。这个控件能支持的功能十分全面,例如文档安全性设置(电子签名),提取 PDF 文本、附件、图片,PDF 合并和拆分,更新 Metadata,设置 Section,绘制图形、插入图片、表格制作和加工、导入数据等等。除此以外,Spire.PDF 还可以将 TXT 文本、图片、HTML 高质量地转换为 PDF 文件格式。 主要功能如下: 1.高质量的文档转换。Free Spire.PDF for .NET 支持 PDF 到 Word、XPS、SVG、EMF、Text 和图片(EMF、JPGPNG、BMP、TIFF)的格式转换。也支持从 XML、HTML、RTF、XPS、Text、图片等格式生成 PDF 文档。 2.文档操作及域功能。支持合并、拆分 PDF 文档,在原有的 PDF 文档页添加覆盖页。同时,Spire.PDF 提供导入、邮戳、小册子功能,以及帮助用户从数据库读取数据并填充到域的域填写功能。 3. 安全性设置。用户可以通过设置密码和数字签名来保护 PDF 文档。用户密码和所有者密码可以确定加密的 PDF 文档的可读性、可修改性、是否可打印等有选择性的限制。与此同时,数字签名作为一个更有效的方法,可以应用于维护和对PDF文档进行身份验证。 4.数据提取。支持快速高效地从 PDF 文档提取图片、文本、PDF 分页,以及附件。 5.文件属性设置。支持对 Metadata、文件属性、页面方向、页面大小进行设置。其中文件属性包括文件限制(打印、页面提取、加评论等方面的权限限制)以及文件描述属性(文件名称、作者、主题、关键字等)。使用 Spire.PDF for .NET,用户还可以根据自己阅读喜好设定默认打开页码,分页模式,缩放比例和打印缩放,等等。 6.其他功能。 支持多种语言,支持字体格式、对齐方式设置。 绘制文字,图片,图形。 支持添加图层,透明图像,Color Space,条形码到 PDF。 支持 PDF/A-1b、PDF/x1a:2001 格式。 添加梯状图形和矢量图像到指定位置。 添加并格式化表格。 插入交互元素,例如添加自定义的 Annotation、Action、JavaScript、附件、书签等。

87,884

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧