微信小程序实现的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 树形结构的选择器
Feb 15 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
js倒计时显示实例
Dec 11 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
ThinkPHP中关联查询实例
2014/12/02 PHP
php内存缓存实现方法
2015/01/24 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python中类的一些方法分析
2014/09/25 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
python之随机数函数的实现示例
2020/12/30 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
法律专业实习鉴定
2013/12/22 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
社区反邪教工作方案
2014/06/16 职场文书
爱心捐书活动总结
2014/07/05 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
打架检讨书范文
2015/01/27 职场文书
故宫的导游词
2015/01/31 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js