微信小程序使用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 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
详解Bootstrap插件
Apr 25 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
微信小程序列表中item左滑删除功能
Nov 07 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
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python中的is和id用法分析
2015/01/26 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python面向对象进阶学习
2019/05/21 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python实现直播推流效果
2019/11/26 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
电大会计学自我鉴定
2014/02/06 职场文书
学校安全生产承诺书
2014/05/23 职场文书
写字楼租赁意向书
2014/07/30 职场文书
企业贷款委托书格式
2014/09/12 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
公司员工辞职信范文
2015/05/12 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
python异常中else的实例用法
2021/06/15 Python