JS:SVG转图片的完美方法

最新推荐文章于 2024-06-11 09:33:24 发布

weixin_34306676

最新推荐文章于 2024-06-11 09:33:24 发布

阅读量1w

点赞数 1

文章标签：后端前端 json ViewUI

原文链接：https://my.oschina.net/xmqywx/blog/1923732

版权

为什么80%的码农都做不了架构师？>>>

因为项目的原因，在web端svg需要转成图片进行输出.其中svg里面涉及到图片的跨域，字体显示，特殊标签。生成方式想当复杂。总结下来，分为前端生成，后调api后端生成。我标题能加上完美，是因为我尝试了几乎google 的各种实现方式。

需求

含有svg的网页转图片，俗称截屏。
Chart图转图片，比如highchart
Svg在线设计网站生成图片

Demo

html

下面我们就生成这个svg的图片

       `
       <style>
           @font-face{
           font-family: huxiaobo-gdh;
           src: url(http://xxxx/huxiaobo-gdh.woff) format('woff');
       }
       </style>
          <div class="preview">
            <svg>
                <foreignObject>
                    <div class="font-family:huxiaobo-gdh"></div>
                </foreignObject>
            </svg>
        </div>`

科普一下image生成base64, img.crossOrigin = 'Anonymous';这句话加上可跨域。当然图片本身最好设置了跨域。

          let canvas = document.createElement('canvas');
                let img = new Image()
                img.crossOrigin = 'Anonymous';
                let ctx = canvas.getContext('2d');
                img.src = src;
                img.onload = function () {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);