svg如何转canvas

最新推荐文章于 2023-02-23 17:02:25 发布

jdk137

最新推荐文章于 2023-02-23 17:02:25 发布

阅读量3.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jdk137/article/details/105750949

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何将SVG转换为Canvas，重点强调了在转换过程中设置Canvas尺寸和处理缩放的重要性，以确保图像质量不受影响。通过使用drawImage函数，并详细参照MDN文档，可以实现SVG到Canvas的有效转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发现一篇比较好的总结。

DataURL与File,Blob,canvas对象之间的互相转换的Javascrip

其中在blob转canvas的时候，其实还是需要详细设置参数的，特别是对于svg这种可以任意缩放的格式。

首先需要确定canvas的大小，默认的canvas是300像素宽的。需要正确设定canvas的大小。

其次需要确定是否需要缩放，svg的大小不一定是canvas的大小，但是可以任意缩放而不会变模糊。

示例代码：

          var img = new Image();
          img.onload = function () {
            const scale = 2;  // 缩放参数
            const w = img.width * scale;
            const h = img.height * scale;
            const canvas = document.createElement('canvas');
            canvas.width = w;
            canvas.height = h;
            const ctx = canvas.getContext('2d');

            ctx.drawImage(img, 0, 0, w, h); // 核心函数

            // ......
          }
          img.src = url; //可以是其他来源，或者URL， 或者base64， 或者svg内联字符串
           // 更多svg 格式和相互转化可以参考  https://www.zhangxinxu.com/wordpress/2018/08/css-svg-background-image-base64-encode/

drawImage函数的详细说明：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

完整示例源码：

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = function(e) {
        var cb = function (r) {
          if (that.imageUploadCallback) {
            that.imageUploadCallback(r);
          }
        }

        if (file.type === 'image/svg+xml') { // trans svg to png, for circumvent html2canvas bugs
          var img = new Image();
          img.onload = function () {
            // console.log(img, img.width, img.height);


            const scale = 2;  // 缩放参数
            const w = img.width * scale;
            const h = img.height * scale;
            const canvas = document.createElement('canvas');
            canvas.width = w;
            canvas.height = h;
            const ctx = canvas.getContext('2d');

            ctx.drawImage(img, 0, 0, w, h); // 核心函数

            var b64;
            try {
              b64 = canvas.toDataURL("image/png");
            } catch (err) {
              console.log(err);
              alert(err);
            }

            // console.log(b64);

            cb(b64);
          }
          img.src = e.target.result;
        } else {
          // console.log(e.target.result);
          cb(e.target.result);
        }
      };

      // Read in the image file as a data URL.
      reader.readAsDataURL(file);