如何利用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
  • 打赏
  • 举报
 回复
斯洛文尼亚旅游 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. **整合与交互**...
将EMF图片格式转换成PNG
在本项目中，我们关注的是如何将EMF图片转换为PNG格式，这通常涉及到图像处理和编程技术。`freehep`是一个开源的Java库，专门用于2D图形和图像处理，其中包括了将EMF转换为其他格式的功能。`freehep`库是由Heiko ...
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
### Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来 在数字媒体领域，矢量图形（SVG）因其无限可缩放性和轻量化的特点而受到广泛青睐，尤其对于网站图标、logo等应用场景。本文将详细介绍如何使用...
JavaScript

87,987

社区成员

224,726

社区内容

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

加载中

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

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

+ 用AI写文章