html5中svg canvas和图片之间相互转化思路代码
发布时间:2014-01-24 15:09:22 作者:佚名 我要评论
需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss,将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
复制代码
代码如下:<div id="svgContainer">
<svg id="svg"></svg>
</div>
首先需要获取svg标签以及内容:
var svgHtml = svgContainer.innerHTML();
将svg转成canvas需要用到google的一个插件canvg,可以上官网下载,也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas
然后就是将canvas转成图片了,这个更加简单了
var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//这其实是将canvas转成了图片,并返回图片的所有内容数据,如下即可显示图片:
复制代码
代码如下:<img src=imgSrc />
这就是从svg->canvas->image的实现方法了,这个还是很有用的,因为不同的浏览器对svg和canvas的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
相关文章
详解FireFox下Canvas使用图像合成绘制SVG的Bug
这篇文章主要介绍了详解FireFox下Canvas使用图像合成绘制SVG的Bug,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-07-10HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
到目前为止,SVG与Canvas的主要特性均已经总结完毕了,现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景,感兴趣的朋友可以了解下哦,或许对你有所帮助2013-01-30- canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同,接下来将对canvas 与 SVG的画图原理进行介绍,感兴趣的朋友可以了解下2013-01-16
- Canvas和SVG都是HTML5中的图形渲染技术,那么你知道这两种有哪些区别吗,本文就详细的介绍一下,感兴趣的可以了解一下2023-05-11
最新评论