微信小程序使用canvas的画图操作示例


Posted in Javascript onJanuary 18, 2019

本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下:

基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。

1、下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签,一定要写上canvas-id='canvas的id',这是必须条件,如下面代码:

<canvas canvas-id='canvas' style='width:{{windowW}}px;height:{{windowH}}px'></canvas>
<button bindtap='chooseImage'>相册</button>

2、上面canvas的宽高都是js控制的,使用?wx.getSystemInfo获取屏幕的可见宽高。代码如下:

wx.getSystemInfo({
   success: function (res) {
    that.setData({
     windowW: res.windowWidth,
     windowH: res.windowHeight
    })
   },
})

相当的详细,有没有!!!

3、重点注意一下:在微信小程序的canvas画图中如果使用了网络图片,一定要先把这张图片读取下载下来(可使用wx.downloadFile),存为网络格式的图片!!!

上面这个操作是避免网络状况不好的时候canvas画图完成了背景图片确显示不出来的情况,同时,这个图片所在的域名必须在微信公众平台配置一下,代码如下:

wx.downloadFile({
   url: '图片路径',
   success: function (res) {
    that.setData({
     canvasimgbg: res.tempFilePath
    })
   }
})

4、 我上面wxml代码里面写了一个按钮,使用wx.chooseImage调用了系统相册,所以说,我们选择一张图片画进canvas也是可以的,代码如下:

wx.chooseImage({
   success: function (res) {
    that.setData({
     chooseimg: res.tempFilePaths[0]
    })
   },
})

5、下面就是cancas画图啦,画和屏幕一样宽高的,然后我们再写一行字哈哈哈,代码如下:

var that = this;
var windowW = that.data.windowW;
var windowH = that.data.windowH;
var canvasimgbg = that.data.canvasimgbg;
var canvasimg1 = that.data.chooseimg;
canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH);
canvas.drawImage(canvasimg1, 0, 10, 200, 200);
canvas.setFontSize(50)
canvas.fillText('Hello', 200, 200)
canvas.draw(true,setTimeout(function(){
   that.daochu()
},1000));

使用canvas.draw()画图,完毕之后直接wx.canvasToTempFilePath导出图片

6、导出图片,代码如下:

var that = this;
var windowW = that.data.windowW;
var windowH = that.data.windowH;
wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: windowW,
   height: windowH,
   destWidth: windowW,
   destHeight: windowH,
   canvasId: 'canvas',
   success: function (res) {
    console.log(res)
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
     }
    })
    wx.previewImage({
     urls: [res.tempFilePath],
    })
   }
})

上面这些代码已经完成啦!!!

主要就是各位使用的时候看需要什么样的啦!

下面还是附上完整的代码把!

// pages/canvas/canvas.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
 },
 onLoad: function (options) {
  var that = this;
  that.sys();
  that.bginfo();
 },
 sys: function () {
  var that = this;
  wx.getSystemInfo({
   success: function (res) {
    that.setData({
     windowW: res.windowWidth,
     windowH: res.windowHeight
    })
   },
  })
 },
 bginfo: function () {
  var that = this;
  wx.downloadFile({
   url: '图片链接',//注意公众平台是否配置相应的域名
   success: function (res) {
    that.setData({
     canvasimgbg: res.tempFilePath
    })
   }
  })
 },
 canvasdraw: function (canvas) {
  var that = this;
  var windowW = that.data.windowW;
  var windowH = that.data.windowH;
  var canvasimgbg = that.data.canvasimgbg;
  var canvasimg1 = that.data.chooseimg;
  canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH);
  canvas.drawImage(canvasimg1, 0, 10, 200, 200);
  canvas.setFontSize(50)
  canvas.fillText('Hello', 200, 200)
  canvas.draw(true,setTimeout(function(){
   that.daochu()
  },1000));
  // canvas.draw();
 },
 daochu: function () {
  console.log('a');
  var that = this;
  var windowW = that.data.windowW;
  var windowH = that.data.windowH;
  wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: windowW,
   height: windowH,
   destWidth: windowW,
   destHeight: windowH,
   canvasId: 'canvas',
   success: function (res) {
    console.log(res)
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
     }
    })
    wx.previewImage({
     urls: [res.tempFilePath],
    })
   }
  })
 },
 chooseImage: function () {
  var that = this;
  var canvas = wx.createCanvasContext('canvas');
  wx.chooseImage({
   success: function (res) {
    that.setData({
     chooseimg: res.tempFilePaths[0]
    })
    that.canvasdraw(canvas);
   },
  })
 }
})

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
js中数组对象去重的两种方法
Jan 18 #Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 #Javascript
js中的reduce()函数讲解
Jan 18 #Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 #Javascript
vue-cli3 karma单元测试的实现
Jan 18 #Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
如何解决.vue文件url引用文件的问题
Jan 18 #Javascript
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js 函数调用模式小结
2011/12/26 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python编写Windows Service服务程序
2018/01/04 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python变量命名的7条建议
2019/07/04 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python 星号(*)的多种用途
2020/09/21 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
函授生自我鉴定
2014/03/25 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android