当前位置:   article > 正文

将页面转换为canvas导出为图片_canvas导出图片

canvas导出图片

思路

需要将dom对象在canvas重绘,然后调用canvas.toDataurl()将数据转换为base64的data url,可以直接导出图片。

但是Dom对象不能直接在Canvas中绘制,需要先将dom文本转换图片地址,然后在图片加载时将其内容绘制在canvas上。

一种快捷的方式是将dom文本内嵌在svg对象中,再将svg对象转换为xml/svg data url,这个地址可以作为图片对象的地址直接在页面中展示。

如图所示,一个svg文本可以作为url的内容在浏览器中展示一张图片

svg内容如下:

<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40"><foreignObject height="100%" width="100%"><svg width="18" height="18" x="370" y="120" transform=" translate(11, 11) scale(2.23, 2.23) "> <style type="text/css"> .anst0 { fill: #ea4554 } .anst1 { fill-rule: evenodd; clip-rule: evenodd; fill: #333 } .anst2 { fill: rgba(255, 255, 255, 0.33) } </style> <g id="anExclamationMark_1_"> <path id="anTriangle_2_" class="anst0" d="M1 14.4L8.1 1.6c.4-.8 1.3-.8 1.7 0L17 14.4c.4.7-.1 1.6-1 1.6H2c-.8 0-1.4-.9-1-1.6z"></path> <path id="anSquare_2_" class="anst1" d="M8 12h2v2H8z"></path> <path id="anLine_1_" class="anst1" d="M8 5h2v6H8z"></path> <path id="anBottomDot_1_" class="anst2" d="M8 12h2v2H8z"></path> <path id="anTopLine_1_" class="anst2" d="M8 5h2v6H8z"></path> </g> </svg></foreignObject></svg>

需要注意的是,svg对象下可以直接放置svg对象,也可以放非svg对象,如div p h1等等,但是需要作为foreignObject的子集,否者不会展示内容

在dom文本转换为xml/svg url过程中需要对一些特殊字符做转义,否者地址失效

 

svg xml url的第一个svg必须要有命名空间,否者以xml形式显示,当然就不能作为图片地址了

 

 

该xml/svg data url可以作为img对象的地址,在页面内展示图片,如图所示

下载这张矢量图片

只需添加一个超链接,指定为图片地址,点击超链接,即可下载该图片

需要注意的是,xml/svg data url不能作为下载地址,需要将其转换为base64地址

一种简单的方法是将xml/svg data url 作为地址的img对象绘制在canvas上,然后调用canvas.toDataurl(),即可获得base64 dataurl

data:image/png;base64,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

点击超链接下载为Png图像,自带透明背景

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/229336
推荐阅读
相关标签
  

闽ICP备14008679号