如何利用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>
...全文
19586 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
  • 打赏
  • 举报
回复
  • 打赏
  • 举报
回复
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

87,987

社区成员

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

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