微信小程序开发实践之canvas绘图导出svg

最新推荐文章于 2024-08-23 08:04:14 发布
最新推荐文章于 2024-08-23 08:04:14 发布
阅读量4k 收藏 4
点赞数 1
分类专栏： 小程序 文章标签： 小程序 canvas svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/as_csdn/article/details/87940947
版权

又是好长一段时间没有写东西了（上一篇还是2018年8月份的-_-||）。
最近在开发微信小程序的过程中，遇到这样一个需求：在小程序中选择相册或拍照之后，要在图上进行标记，然后将标记保存为svg输出。
然额，就是这样一个需求，挠破头皮弄了两三天，不得不放弃o(╥﹏╥)o
佛祖开恩，今天突然灵光一闪，三两下就弄出来了，困扰了很久的问题迎刃而解，为自己鼓掌O(∩_∩)O哈哈~
下面就正式开始我的解决过程，有不对的地方还请各位大佬指正哈，嘿嘿

需求分析

前面已经说过了，我们需求将canvas绘制的图层轨迹数据导出成svg格式。

先贴上布局代码
<!--这一段是绘制标记的地方-->
<view class='content'>
  <image src='{{img}}' style='width:{{cw}}px;height:{{ch}}px' mode='aspectFit'></image>
  <canvas class='firstCanvas' style='width:{{cw}}px;height:{{ch}}px;top:0;position:absolute;' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='end' bindtouchcancel='cancel' bindlongtap='tap' disable-scroll='true' binderror='error'>
  </canvas>
</view>
<view class="btn-box">
  <text class="txt">如有需要，请你在图上标记出你发现问题的地方</text>
  <view style='display:flex;'>
 <!--这三个按钮调用函数用-->
    <button bindtap='clearClick'>重新标记</button>
    <button bindtap='saveClick' class="btn">保存图片</button>
    <button bindtap='saveAsSVG' class="btn">提取svg数据</button>
  </view>
  <!--这里是在标记完后显示结果的地方-->
  <view>
    <image src='{{img}}' style='width:{{cw}}px;height:{{ch}}px' mode='aspectFit'></image>
    <image src='{{srcimg}}' mode='aspectFit' style='width:{{cw}}px;height:{{ch}}px;top:{{ch+29+46}}px;position:absolute;'></image>
  </view>
</view>
wxss样式

样式代码不多，特简单。。。不解释

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-box {
  display: flex;
  flex-direction: column;
  /* padding: 20rpx; */
}

.txt {
  font-size: 28rpx;
  color: #ccc;
  text-align: center;
  padding: 10rpx;
}

.btn {
  bottom: 0;
  left: 0;
  right: 0;
}
js代码

首先，我们需要定义几个全局变量，以方便接下来的调用。
canvas的context变量：var content = null;
轨迹数据变量：var touchs = [];
中间存储变量：var touching = []
导出svg需要的变量：var toucharr = []
对图片的宽高处理变量：var w2 = 0;var h2 = 0
data中定义的变量：data: { cw: '', ch: '', img: '', srcimg:'' }
到此，需要的变量基本定义完了，下面是canvas上对应的方法。
首先在onload中进行canvas初始化操作

onLoad: function(options) {
    console.log(options)
    var that = this
    var width = ""; //原始图片宽
    var height = ""; //原始图片高
    var max = 400
    var blc = 1.0
    that.setData({
      img: options.img
    })
    //获得Canvas的上下文
    content = wx.createCanvasContext('firstCanvas')
    //设置填充色
    content.setFillStyle('red')
    //设置线的颜色
    content.setStrokeStyle("red")
    //设置线的宽度
    content.setLineWidth(3)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
    wx.getImageInfo({
      src: options.img,
      success: function(res) {
        width = res.width
        height = res.height
        if (width > height) {
          if (width > max) {
            blc = max / width
          }
        } else {
          if (height > max) {
            blc = max / height
          }
        }
        w2 = parseInt(width * blc);
        h2 = parseInt(height * blc);
        that.setData({
          cw: w2,
          ch: h2
        })
        console.log(w2 + '---' + h2)
        // content.drawImage(options.img, 0, 0, w2, h2)
        // content.draw()
      }
    })

  },

初始化操作完了，就是canvas需要的一系列方法了。
1.在canvas上开始绘制时

// 画布的触摸移动开始手势响应
  start: function(event) {
    // console.log(event)
    // console.log("触摸开始" + event.changedTouches[0].x)
    // console.log("触摸开始" + event.changedTouches[0].y)
    //获取触摸开始的 x,y
    let point1 = {
      x: event.changedTouches[0].x,
      y: event.changedTouches[0].y
    }
    touchs.push(point1)
    touching.push(point1)
  },

2.开始移动

// 画布的触摸移动手势响应
  move: function(e) {
    // console.log('绘制中' + e.touches[0].x)
    // console.log('绘制中' + e.touches[0].y)
    let point2 = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }
    touchs.push(point2)
    if (touchs.length >= 2) {
      touching.push(point2)
      this.draw(touchs)
    }
  },

3.绘制结束

// 画布的触摸移动结束手势响应
  end: function(e) {
    // console.log("触摸结束" + e.changedTouches[0].x)
    let point3 = {
      x: e.changedTouches[0].x,
      y: e.changedTouches[0].y
    }
    touchs.push(point3)
    toucharr.push(touching)

    //清空轨迹数组
    for (let i = 0; i < touchs.length; i++) {
      // touchs.pop()
      touchs = []
    }
  },

4.实时绘制轨迹

//绘制
  draw: function(touchs) {
    // console.log(JSON.stringify(touchs[0]) + '---' + JSON.stringify(touchs[1]))
    let point1 = touchs[0]
    let point2 = touchs[1]
    touchs.shift()
    content.moveTo(point1.x, point1.y)
    content.lineTo(point2.x, point2.y)
    content.stroke()
    content.draw(true)
  },

5.重新绘制

//清除操作
  clearClick: function(e) {
    console.log(e)
    var that = this
    //清除画布
    content.clearRect(0, 0, w2, h2)
    content.drawImage(that.data.img, 0, 0, w2, h2)
    content.draw(true)
  },

6.其他的一些没多大用的方法

// 画布的触摸取消响应
  cancel: function(e) {
    console.log("触摸取消" + e)
  },

  // 画布的长按手势响应
  tap: function(e) {
    console.log("长按手势" + e)
  },

  error: function(e) {
    console.log("画布触摸错误" + e)
  },

以上方法都在canvas组件中有调用

<canvas class='firstCanvas' style='width:{{cw}}px;height:{{ch}}px;top:0;position:absolute;' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='end' bindtouchcancel='cancel' bindlongtap='tap' disable-scroll='true' binderror='error'>

在此贴出微信小程序的canvas的官方API，可以看看
canvas组件：传送门-》
canvas API：传送门-》

以上都是一些基础方法，导出svg的方法如下：

saveAsSVG:function(){
    var that = this
    var strSVG = 'data:image/svg+xml, <svg width="'+w2+'" height="'+h2+'" version="1.1" xmlns="http://www.w3.org/2000/svg">'
    for (var i = 0; i < toucharr.length;i++){
      strSVG += '<polyline points="'
      for (var j = 0; j < toucharr[i].length;j++){
        console.log(toucharr[i][j])
        strSVG += toucharr[i][j].x + ',' + toucharr[i][j].y+' '
      }
      strSVG += '" style="fill:rgba(255,255,255,0);stroke:red;stroke-width:3"/>'
      strSVG += '</svg>'
    }
    that.setData({
      srcimg:strSVG
    })
  },

是不是很简单！其实，是我自己一开始想得太复杂，太依赖小程序的API，所以走了一些弯路，不过最后还是捋直啦，哈哈
原理就是需要我们自己组织一下常规的svg格式，然后将canvas轨迹数据的坐标（x,y）放到svg的points中，这样就可以输出一个完整的<svg></svg>这样一个东西。

下面贴出完整的js代码（里面有些无用的代码，请忽略着看）。

var content = null;
var touchs = [];
var touchsdata = []
var x = []
var touching = []
var toucharr = []
var y = []
var canvasw = 0;
var canvash = 0;
var w2 = 0
var h2 = 0
//获取系统信息
wx.getSystemInfo({
  success: function(res) {
    canvasw = res.windowWidth;
    canvash = canvasw * 9 / 16;
  },
})

Page({
  /**
   * 页面的初始数据
   */
  data: {
    cw: '',
    ch: '',
    img: '',
    srcimg:''
  },
  // 画布的触摸移动开始手势响应
  start: function(event) {
    // console.log(event)
    // console.log("触摸开始" + event.changedTouches[0].x)
    // console.log("触摸开始" + event.changedTouches[0].y)
    //获取触摸开始的 x,y
    let point1 = {
      x: event.changedTouches[0].x,
      y: event.changedTouches[0].y
    }
    touchs.push(point1)
    touching.push(point1)
  },

  // 画布的触摸移动手势响应
  move: function(e) {
    // console.log('绘制中' + e.touches[0].x)
    // console.log('绘制中' + e.touches[0].y)
    let point2 = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }
    touchs.push(point2)
    if (touchs.length >= 2) {
      touching.push(point2)
      this.draw(touchs)
    }
  },

  // 画布的触摸移动结束手势响应
  end: function(e) {
    // console.log("触摸结束" + e.changedTouches[0].x)
    let point3 = {
      x: e.changedTouches[0].x,
      y: e.changedTouches[0].y
    }
    touchs.push(point3)
    toucharr.push(touching)
    console.log(touching.length)
    console.log(toucharr.length)
    console.log(toucharr)
    //清空轨迹数组
    for (let i = 0; i < touchs.length; i++) {
      // touchs.pop()
      touchs = []
    }
    for(var j = 0 ; j<touching.length;j++){  
      x.push(touching[j]['x'])
      y.push(touching[j]['y'])
    }
    var s = {
      "x": x,
      "y": y
    }
    touchsdata.push(s)
    console.log(JSON.stringify(touchsdata));
    this.saveAsSVG()
  },

  // 画布的触摸取消响应
  cancel: function(e) {
    console.log("触摸取消" + e)
  },

  // 画布的长按手势响应
  tap: function(e) {
    console.log("长按手势" + e)
  },

  error: function(e) {
    console.log("画布触摸错误" + e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    var that = this
    var width = ""; //原始图片宽
    var height = ""; //原始图片高
    var max = 400
    var blc = 1.0
    that.setData({
      img: options.img
    })
    //获得Canvas的上下文
    content = wx.createCanvasContext('firstCanvas')
    //设置填充色
    content.setFillStyle('red')
    //设置线的颜色
    content.setStrokeStyle("red")
    //设置线的宽度
    content.setLineWidth(3)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
    wx.getImageInfo({
      src: options.img,
      success: function(res) {
        width = res.width
        height = res.height
        if (width > height) {
          if (width > max) {
            blc = max / width
          }
        } else {
          if (height > max) {
            blc = max / height
          }
        }
        w2 = parseInt(width * blc);
        h2 = parseInt(height * blc);
        that.setData({
          cw: w2,
          ch: h2
        })
        console.log(w2 + '---' + h2)
        // content.drawImage(options.img, 0, 0, w2, h2)
        // content.draw()
      }
    })

  },
 

  //绘制
  draw: function(touchs) {
    // console.log(JSON.stringify(touchs[0]) + '---' + JSON.stringify(touchs[1]))
    let point1 = touchs[0]
    let point2 = touchs[1]
    touchs.shift()
    content.moveTo(point1.x, point1.y)
    content.lineTo(point2.x, point2.y)
    content.stroke()
    content.draw(true)
  },
  //清除操作
  clearClick: function(e) {
    console.log(e)
    var that = this
    //清除画布
    content.clearRect(0, 0, w2, h2)
    content.drawImage(that.data.img, 0, 0, w2, h2)
    content.draw(true)
  },
  saveAsSVG:function(){
    var that = this
    var strSVG = 'data:image/svg+xml, <svg width="'+w2+'" height="'+h2+'" version="1.1" xmlns="http://www.w3.org/2000/svg">'
    for (var i = 0; i < toucharr.length;i++){
      strSVG += '<polyline points="'
      for (var j = 0; j < toucharr[i].length;j++){
        console.log(toucharr[i][j])
        strSVG += toucharr[i][j].x + ',' + toucharr[i][j].y+' '
      }
      strSVG += '" style="fill:rgba(255,255,255,0);stroke:red;stroke-width:3"/>'
      strSVG += '</svg>'
    }
    that.setData({
      srcimg:strSVG
    })
  },
  //保存图片
  saveClick: function() {
    
    var that = this
    var pages = getCurrentPages() //获取页面
    var prevPage = pages[pages.length - 2] //上一页
    prevPage.setData({
      signImage: this.data.img,
      w: that.data.cw,
      h: that.data.ch,
      touchs: touchsdata,
      isshow:true
    })
    wx.navigateBack({
      delta: 1
    })
    // wx.canvasToTempFilePath({
    //   canvasId: 'firstCanvas',
    //   success: function(res) {
    //     //打印图片路径
    //     console.log(res.tempFilePath)
    //     prevPage.setData({
    //       signImage: res.tempFilePath,
    //       w: that.data.cw,
    //       h: that.data.ch
    //     })
    //     wx.navigateBack({
    //       delta: 1
    //     })
    //   }
    // })
  }

})
最终效果gif

在这里插入图片描述
在这里插入图片描述

代码的灵魂是bug！
关注
专栏目录
d3高级应用专题(一)：canvas与SVG之间的转换
甘焕的博客
08-07 1万+
在第4版中，d3新增了d3.path包，可用于将canvas绘制的路径转换为SVG的路径，提高了代码的可移植性，能适应更多应用场景，无论是发挥canvas的高性能特点，还是发挥SVG的高控制性，都能轻松适应。
d3高级应用专题 一 canvas与SVG之间的转换
qq_44884577的博客
04-17 1679
d3高级应用专题 一 canvas与SVG之间的转换
canvas绘制位置图,(提供一个原点,其他点提供基于原点的角度和距离)
wusandaofwy的博客
02-29 475
canvas绘制位置图,(提供一个原点,其他点提供基于原点的角度和距离) 占个位,后续解决
Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具
gitblog_01130的博客
08-21 434
Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具 canvas2svgTranslates HTML5 Canvas draw commands to SVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg 项目介绍 Canvas2SVG 是一个强大的JavaScript库，它允许开发者将HTML5 Canvas上的绘制内容转换...
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG。 演示版 这个怎么运作 我们创建一个模拟2d画布上下文。 像在普通画布上一样使用画布上下文。 在您调用方法时，我们在SVG中构建了一个场景图。 好极了！ 用法 //Create a new mock canvas context. Pass in your desired width and height for your sv
canvas与svg
qq_42883190的博客
03-14 5631
svg和canvas的区别
探索Canvas2Svg：将Canvas绘图转换为SVG的强大工具
最新发布
gitblog_00518的博客
08-23 391
探索Canvas2Svg：将Canvas绘图转换为SVG的强大工具 canvas2svgTranslates HTML5 Canvas draw commands to SVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg 在现代Web开发中，Canvas和SVG是两种常用的图形渲染技术。Canvas提供了高性能的位图绘制能力，而SVG则以其矢...
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具
gitblog_00030的博客
04-14 883
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具 canvas2svgTranslates HTML5 Canvas draw commands to SVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg 是一个开源JavaScript库，它为开发者提供了一个优雅的方式，将HTML5 Canvas的内容实时转换成可缩...
小程序Icon图标的几种实现方案
m0_60107460的博客
11-15 2601
小程序Icon图标的几种实现方案： 1. 使用原生组件 2.直接使用图片 3.使用精灵图 4.使用CSS样式绘制 5.使用矢量字体 6.使用SVG矢量文件 7. 使用Canvas绘制SVG绘制
html转图片 html2canvas
07-24
它的核心功能是通过浏览器的Canvas API将HTML元素及其样式转换为Canvas绘图。由于浏览器的安全限制，直接操作DOM并生成图片是不允许的，html2canvas通过模拟浏览器渲染机制，将HTML结构和样式转换为像素级别的图像。...
最新版canvg.js，完美支持 svg 转 canvas
06-21
最新canvg.js，完美将svg转为canvas
svg转canvas转img,demo
04-27
svg转canvas通过google的canvg.js插件转换，这是一个demo,有转换的每一个步奏比如：转换canvas按钮，转换img按钮，还有一个canvas下载按钮，会把canvas绘制的图形下载下来
canvg.js svg转换canvas
05-05
canvg.js用于帮助将页面svg元素转换为canvas元素,结合rgecolor.js和html2canvas.js来解决截取屏幕中的svg无内容问题。
canvas学习和滤镜实现
GodBMW的博客
08-20 248
最近学习了 HTML5 中的重头戏–canvas。利用 canvas，前端人员可以很轻松地、进行图像处理。其 API 繁多，这次主要学习常用的 API，并且完成以下两个代码： 实现去色滤镜 实现负色(反色)滤镜 欢迎入群：857989948 。IT 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、UI 设计、算法分析、大数据、人工智能等。本群主打有深度...
JS导出页面为PDF文件，该如何操作？来看一眼就明白啦！
weixin_30727835的博客
03-09 556
废话不多说，直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="./js/canvg2.js"></script><script type="text/javascript" src="./js/html2canvas-0.4.1.js"></script><script type="t...
11~13k(初/中级)前端面试看这篇就够了
uuuyy_的博客
01-10 1289
一、HTML + CSS 1、常用实用技巧 01、定位： position:absolute/relative/fixed/static static:静态定位； absolute:绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位。然而，如果绝对定位的元素没有定位祖先，它将相对于文档主体（body）进行定位 relative:相对定位，相对于自己的初始位置进行定位； fixed:固定定位，固定定位的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 02、盒模型：.
canvas和svg
curry_zhao的博客
08-26 791
本位为学习总结 SVG 可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。 SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器
canvas与SVG
qq_39225271的博客
09-16 474
canvas与SVGcanvas在页面中插入 canvas 元素给制图形的基本方法绘制判断是否支持 canvas绘制直线矩形圆形属性 canvas 在页面中插入 canvas 元素 <canvas id=”myCanvas ” width=” 200 ” height=”1 0 0”＞＜／ canvas> </ body> 给制图形的基本方法 var c=docurnent.getElernentByid (”myCanvas ”) 通过 canvas 元素的 getContext（
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码的灵魂是bug！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值