文档章节

微信小程序 用canvas绘制的图插入到分享中

潇潇程序缘
 潇潇程序缘
发布于 2018/12/10 10:55
字数 507
阅读 49
收藏 0

用canvas绘制图

createNewImg: function () {
var that = this;
var ctx = wx.createCanvasContext('mycanvas');
ctx.setFillStyle("#F4F4F4");
// context.setFillStyle("#fff")
ctx.fillRect(0, 0, 375, 520)
var path1 = "/common/images/bg_2.png";
var path2 = "/common/images/bg_1.png"
// ctx.drawImage(path1, 0, 0, 50, 30);
ctx.drawImage(path1, 0, 0, 400, 340);
ctx.drawImage(path2, 18, 20, 340, 260);

//大图
var bigImg = that.data.wxCodeImg ;
ctx.drawImage(bigImg, 40, 35, 300, 160)
ctx.stroke();


//奖品
var name = "奖品:"
ctx.setFontSize(14);
ctx.setFillStyle("#333333");
ctx.setTextAlign('left');
ctx.fillText(name, 40, 230);
ctx.stroke();

//奖品名称多行文本
ctx.setFontSize(24);
ctx.setFillStyle("#333333");
// ctx.setTextAlign('left')
// ctx.fillText(prizeName, 120, 200);
ctx.stroke();


that.dealWords({
  ctx: ctx,//画布上下文
  fontSize: 14,//字体大小
  word: that.data.prizeName +"*"+ that.data.prizeNum,//需要处理的文字
  maxWidth: 300,//一行文字最大宽度
  x: 80,//文字在x轴要显示的位置
  y: 213,//文字在y轴要显示的位置
  maxLine: 2//文字最多显示的行数
})

// //画一个块
// ctx.setFillStyle('#fff');
// ctx.fillRect(36, 420, 300, 100)
//放一个按钮
var pathBtn = "/common/images/bg_btn.png";
ctx.drawImage(pathBtn, 100, 255, 200, 50);

//我要抽奖文本
var prizeText = "我要抽奖";
ctx.setFontSize(18);
ctx.setFillStyle("#fff");
ctx.fillText(prizeText, 170, 285);
ctx.stroke();

ctx.restore();
ctx.draw();


//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function () {
  wx.canvasToTempFilePath({
    canvasId: 'mycanvas',
    success: function (res) {
      var tempFilePath = res.tempFilePath;
      that.setData({
        posterImg: tempFilePath, // 这是生成了一个临时路径要把临时路径转发为网络路径  就是把这个路径上传到服务器生成一个网络路径 只有生成网络路径才可以在转发出去的时候有生成的canvas图
      });
      that.save();
    },
    fail: function (res) {
      console.log(res);
    }
  });
}, 200);
 },

生成网络路径

save:function(){
let that=this;
 wx.uploadFile({
   url: File, //开发者服务器 url /comm/fileUpload
   filePath: that.data.posterImg, //要上传文件资源的路径
  name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  header: {
    'content-type': "multipart/form-data", //将本地资源上传到开发者服务器,客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data
  },
  success: function (res) {
    if (res.statusCode == 200) {

      console.log(res);
      let response = JSON.parse(res.data);
      that.data.res_share_img = utils.changeImgUrl(response.data)
      console.log(response)
      console.log(that.data.res_share_img)

     
    } else {
      
    }
  },
  fail:function(){
    console.log(err)
  }

})

},

© 著作权归作者所有

共有 人打赏支持
上一篇: jekens配置
下一篇: 破解webstrom
潇潇程序缘
粉丝 1
博文 88
码字总数 16509
作品 0
朝阳
程序员
私信 提问
微信小程序图表插件(wx-charts)

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。 wx-charts基...

飞翔的熊blabla
2018/11/06
0
0
微信小程序--通过canvas生成图片并保存到本地

前言 需求场景:我们知道,微信小程序可以分享给好友或者微信群,不能分享到朋友圈,那分享到朋友圈就需要特殊处理一下,这里我们把小程序和结合起来使用,生成自定义图片并保存到本地。 代码...

real__隔壁老胖兔
2018/09/17
0
0
微信小程序Canvas隐藏问题处理

一、在微信小程序中Canvas控件还存在着许多问题 使用微信自带的Canvas控件,生成海报二维码时,会遇到canvas在绘制结束后,显示在页面的最上层。 使用 hidden或display:none 无效。 解决方案...

tianma3798
2018/09/14
0
0
wx-charts 微信小程序图表插件

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型...

飞翔的熊blabla
2018/10/06
0
0
微信小程序 canvas 绘图问题总结

业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧。 业务非常...

和牛
2018/07/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
48分钟前
2
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
53分钟前
1
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
2
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
2
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部