微信小程序实现的canvas合成图片功能示例


Posted in Javascript onMay 03, 2019

本文实例讲述了微信小程序实现的canvas合成图片功能。分享给大家供大家参考,具体如下:

先要获取图片的信息  然后将需要合成的内容用canvas绘制出来,得到一个合成好的画布,接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。这个时候的路径 是微信的临时路径,浏览器是访问不了的,因此需要请求服务器  用 wx.uploadFile 将本地资源上传到开发者服务器。

在页面的wxml中加入canvas组件如下:

<view class="canvasBox">
 <canvas canvas-id="shareCanvas" style="width:375px;height:300px"></canvas>
</view>

在js中

picture: function () { //生成图片
   let that = this;
   let p1 = new Promise(function (resolve, reject) {
    wx.getImageInfo({
     src: 图片路径,
     success(res) {
      resolve(res);
     }
    })
   }).then(res => {
    const ctx = wx.createCanvasContext('shareCanvas');
    ctx.drawImage(res.path, 0, 0, 375, 300);  //绘制背景图
    //ctx.setTextAlign('center')  // 文字居中
    ctx.setFillStyle('#000000') // 文字颜色:黑色
    ctx.setFontSize(20)     // 文字字号:22px
    ctx.fillText("文本内容", 20, 70) //开始绘制文本的 x/y 坐标位置(相对于画布) 
    ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
    ctx.draw(false, that.drawPicture());//draw()的回调函数 
    console.log(res.path);
   })
  },
  drawPicture: function () { //生成图片
    var that = this;
   setTimeout(function(){
    wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
     x: 0,
     y: 0,
     width: 375,
     height: 300,
     destWidth: 750, //输出的图片的宽度(写成width的两倍,生成的图片则更清晰)
     destHeight: 600,
     canvasId: 'shareCanvas',
     success: function (res) {
      console.log(res);
      that.draw_uploadFile(res);
     },
    })
   },300)
  },
  draw_uploadFile: function (r) { //wx.uploadFile 将本地资源上传到开发者服务器
   let that = this;
   wx.uploadFile({
    url: 图片上传接口, //线上接口
    filePath: r.tempFilePath,
    name: 'imgFile',
    success: function (res) {
     console.log(res);
     if(res.statusCode==200){
      res.data = JSON.parse(res.data);
      let imgsrc = res.data.data.src;
      that.setData({
       imgPath: imgsrc
      });
     }else{
      console.log('失败')
     }
    },
   })
  },

注意:若是将此方法写成自定义组件,则 wx.createCanvasContextwx.canvasToTempFilePath 都需要多传一个this

微信小程序实现的canvas合成图片功能示例

因在自定义组件下,当前组件实例的this,用以操作组件内 <canvas/> 组件。

至于分享的话 ,拿到服务器返回的图片路径之后 就可以用来写分享的图片路径了

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

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 #Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 #Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 #Javascript
详解微信小程序缓存--缓存时效性
May 02 #Javascript
详解如何使用router-link对象方式传递参数?
May 02 #Javascript
详解Vue底部导航栏组件
May 02 #Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
You might like
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JavaScript中的细节分析
2012/06/30 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python 写的一个爬虫程序源码
2016/02/28 Python
python中cPickle类使用方法详解
2018/08/27 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
优秀纪检干部材料
2014/08/27 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
房屋维修申请报告
2015/05/18 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python