Draw1Stroke官网在哪下载 最新官方下载安装地址，

小程序：CANVAS手写输入文字功能实现！

如何实现手写输入功能？这里整理了两项关键技术，可供参考

canvas绘画实现‍‍‍‍‍‍‍‍‍‍

OCR文字识别实现

以上是实现手写输入文字的具体功能全部内容，详细内容如下：

1、canvas绘图

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用this.createSelectorQuery() 来代替。

ctx.beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边，在最开始的时候相当于调用了一次 beginPath。同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。

ctx.moveTo(x,y)

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

ctx.lineTo(100, 10)

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

ctx.stroke()

画出当前路径的边框。默认颜色色为黑色。

ctx.draw()

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。理解以上API可以轻松实现canvas绘制功能。具体实现如下：

//   index.jsPage({/**   * 页面的初始数据*/data: {  canvas:null,  CanvasCote:null,  canvanImg:"",},//触摸开始start (e) {this.data.CanvasCote.beginPath()this.data.CanvasCote.moveTo(e.touches<0>.x,e.touches<0>.y)},//触摸移动move (e) {this.data.CanvasCote.lineTo(e.touches<0>.x, e.touches<0>.y)this.data.CanvasCote.stroke()//将上下文绘制到canvas中},//触摸结束end (e) {this.data.CanvasCote.closePath()},//清除画布内容clearCan(){this.data.CanvasCote.clearRect(0, 0,this.data.canvas.width, this.data.canvas.height)this.setData({      canvanImg:""  })},//点击保存生成图片submitCan(){this.setData({      canvanImg:this.data.canvas.toDataURL("image/png")  })  console.log(this.data.canvas.toDataURL("image/png"))},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {  let that = this;//如果在 exec 中获取不到res，这里就写 wx.createSelectorQuery().in(this)const query = wx.createSelectorQuery()  query.select('#myCanvas').node().exec((res) => {      that.setData({          canvas: res<0>.node,          CanvasCote: res<0>.node.getContext('2d')      })      let ctx = that.data.CanvasCote;      ctx.fillStyle = "#fff"      ctx.fillRect(0, 0, that.data.canvas.width, that.data.canvas.height);      ctx.strokeStyle='black'      ctx.lineCap = 'round'; // 线条末端添加圆形线帽，减少线条的生硬感      ctx.lineJoin = 'round'; // 线条交汇时为原型边角// 利用阴影，消除锯齿      ctx.shadowBlur = 1;      ctx.shadowColor = '#000';  })}});// index.wxml  <view><view>请在下方手写文字:</view><canvas id="myCanvas"type="2d"style="border:1px solid #d3d3d3; width: 100%; height: 600rpx;"bindtouchstart="start"bindtouchmove="move"bindtouchend="end"/><view><button  bind:tap="clearCan">清除</button><button type="submit" bind:tap="submitCan">保存</button><van-image width="100" height="100" model:src="{{canvanImg}}" /></view></view>

2、OCR文字识别

实现了绘制文字功能，再考虑如何将这些绘制好的文字识别出来，这就要用到OCR技术，这项技术听起挺复杂，但实际上实现这项技术也很复杂。不过官方已经封装好API，可以直接使用。

首先，使用开发者工具新建一个云函数，如 ocrprint，然后在 config.json 里添加 ocr.printedText 云调用的权限，使用 npm install 安装依赖之后，上传并部署所有文件（此时也会更新权限）。

{"permissions": {"openapi": <"ocr.printedText" > }}

调用该云函数之后，返回的 result 对象里包含 result 对象，在 codeResults 的 data 里可以得到二维码里包含的内容。

const cloud = require("wx-server-sdk");

cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,});

exports.main = async (event, context) => {

try {

const result = await cloud.openapi.ocr.printedText({imgUrl:"https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/ocrprint.png", });

console.log(result);return result;

} catch (err) {

console.log(err);return err;

}};

调用该云函数之后，返回的 result 对象里包含 result 对象，在的items 里可以返回图片包含的文字内容。