如何利用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>
...全文
19550 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
  • 打赏
  • 举报
 回复
https://github.com/gabelerner/canvg
https://github.com/exupero/saveSvgAsPng
调用很简单，仔细看看readme。
码农D马 2015-09-28
  • 打赏
  • 举报
 回复
人呢？大神呢，求你们了T_T
SVG矢量图 转换 png jpg bmp 批量转换
3. 对于Node.js开发者，`svg2png`库允许将SVG转换为PNG，而`sharp`库则可以处理多种图像格式，包括PNG、JPEG和BMP的转换。这两个库都是基于Vips图像处理库，提供了高效的性能。 批量转换的关键在于遍历SVG文件列表...
Highcharts .net(C#)导出图片支持中文svg转jpg等
本文将深入探讨如何在C#环境下利用Highcharts .NET库实现图表的导出，并支持中文字符，以及如何将SVG格式转换为JPG、PNG、PDF和SVG等其他常见格式。 首先，要实现Highcharts .NET导出图片功能，你需要安装相关的...
JS实现网页签名(生成任意格式png、JPG等)
要将签名图像保存为PNG或JPG格式，项目可能使用了JavaScript的Canvas API，调用`toDataURL()`方法生成Base64编码的图像数据，然后通过URL.createObjectURL()转换成可下载的链接，最后提供下载。 7. **整合与交互**...
在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式的方法
在Node.js环境中，将SVG图像转换为不同的图形文件格式，如PNG、JPEG、TIFF、WEBP和HEIF，是一项常见的需求。为了实现这个目标，我们可以利用Sharp这一强大的图像处理库。Sharp是一个高性能的库，专门用于处理VIPS...
图片转换成SVG文件
“图片转换成SVG文件”这个工具提供了将常见的位图格式（如.jpg、.png、.gif）转换为SVG矢量格式的功能。这对于需要进行尺寸调整或希望在不同设备上保持高质量显示的图像处理非常有用。位图图像在放大时可能会变得...
JavaScript

87,955

社区成员

224,621

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章