微信小程序使用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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript this 深入理解
Jul 30 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
jquery动态更换设置背景图的方法
2014/03/25 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
javascript 数组操作详解
2015/01/29 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python新手实现2048小游戏
2015/03/31 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python的log日志功能及设置方法
2019/07/11 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
python分布式计算dispy的使用详解
2019/12/22 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python grpc超时机制代码示例
2020/09/14 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
公司办公室岗位职责
2014/03/19 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
工商管理本科生求职信
2014/07/13 职场文书
党委领导班子整改方案
2014/09/30 职场文书