微信小程序开发实践之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！
关注
专栏目录
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
Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具
gitblog_01130的博客
08-21 435
Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具 canvas2svgTranslates HTML5 Canvas draw commands to SVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg 项目介绍 Canvas2SVG 是一个强大的JavaScript库，它允许开发者将HTML5 Canvas上的绘制内容转换...
canvas绘制位置图,(提供一个原点,其他点提供基于原点的角度和距离)
wusandaofwy的博客
02-29 476
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则以其矢...
d3高级应用专题(一)：canvas与SVG之间的转换
热门推荐
甘焕的博客
08-07 1万+
在第4版中，d3新增了d3.path包，可用于将canvas绘制的路径转换为SVG的路径，提高了代码的可移植性，能适应更多应用场景，无论是发挥canvas的高性能特点，还是发挥SVG的高控制性，都能轻松适应。
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具
gitblog_00030的博客
04-14 884
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具 canvas2svgTranslates HTML5 Canvas draw commands to SVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg 是一个开源JavaScript库，它为开发者提供了一个优雅的方式，将HTML5 Canvas的内容实时转换成可缩...
canvas与svg
qq_42883190的博客
03-14 5631
svg和canvas的区别
d3高级应用专题 一 canvas与SVG之间的转换
qq_44884577的博客
04-17 1679
d3高级应用专题 一 canvas与SVG之间的转换
使用JavaScript将svg导出成图片格式
qq_36711388的博客
04-09 2916
/** * 将svg导出成图片 * @param node svg节点 => document.querySelector('svg') * @param name 生成的图片名称 * @param width 生成的图片宽度 * @param height 生成的图片高度 * @param type 生成的图片类型 */ export const covertSVG2Ima...
微信小程序开发之画布canvas 饼状图
03-29
微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来. 先说说canvas: 1.微信里面canvas标签默认宽度300px、高度225px,可自行修改. 2.同一页面中的...
微信小程序之html5 canvas绘图并保存到系统相册
11-21
在微信小程序中，可以使用`canvas`组件，通过`canvasId`属性来指定对应的Canvas画布。例如，`<canvas class='qr-canvas' canvas-id="qrCanvas" id="qrCanvas"></canvas>`。 2. **图片处理**： - **网络图片处理**...
微信小程序波普图（canvas）生成
09-07
综上所述，通过微信小程序的API和Canvas绘图能力，我们可以实现从MP3音频到波普图的可视化转换，提供丰富的用户体验。在实际开发中，需要结合音频处理算法、性能优化技巧以及用户交互设计，创建出功能完整、性能优良...
微信小程序-微信小程序之Canvas
08-06
1.We-Canvas之WaveImage 效果图： 实现细节： 1.js: drawImage:function(data){ var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐...
微信小程序canvas实现文字缩放
01-12
在微信小程序中，canvas元素是用于图形绘制的重要组件，它提供了丰富的API，使得开发者能够进行动态的、交互式的图形操作，包括文字的绘制和缩放。这篇内容将深入讲解如何在微信小程序的canvas环境中实现文字的缩放...
canvas SVG简介及绘制图形
m0_74022688的博客
12-19 1870
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
微信小程序实现签字功能
ly18314524152的博客
07-25 657
{${${${
通过js+canvas实现svg标签另存为图片
hfdxmz_3的博客
05-21 589
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制，其实现原理大体是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览器端下载。 最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。 本希望模拟HighChart的原理实现，可是研究发现，该地图的SVG代码信息多达两万字节，然而HighChart后端制图程序却有着字节数限
Canvas画布、SVG图片
chenjia525的博客
07-21 1436
画布Canvas、SVG图片
canvas+SVG
weixin_54352784的博客
06-23 1531
画布坐标： canvas用于定义图形，在js脚本中可以通过canvas绘制盒子线，图，以及添加字符， 默认宽300高150 SVG定义可缩放矢量图，可绘制框，图，文本，图形图像等操作 优势： 1.万维网的标准 2.相比其他（JPEG，GIF，ico）图像文件来说，svg图像可以通过文本编辑器来创建和修改 3.svg图像可以被浏览器搜索，索引，压缩 4.可以伸缩 svg绘制矩形
微信小程序开发：Canvas绘图指南
本文主要介绍了微信小程序的创建过程和基本结构，特别关注了小程序的绘制指令，通过app.json和project.config.json配置文件的解析来理解小程序的架构，并演示了如何在小程序中使用Canvas进行图形绘制。 微信小程序...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码的灵魂是bug！

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

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

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

打赏作者

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

抵扣说明：

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

余额充值