微信小程序用canvas画图并分享

爱被打了一巴掌 2022-11-27 08:46 148阅读 0赞

<canvas style='width:{
       {canvasWidth}}px;height:{
       {canvasHeight}}px' canvas-id='myCanvas'></canvas>
    <button open-type='share'>分享</button>

【js部分】

var ctx = "" // 用于获取canvas
       var leftMargin = "" //文字距离左边边距
       var topMargin = "" //文字距离右边边距
       Page({
    
         /**
          * 页面的初始数据
          */
         data: {
           title: '~~',
           salary: '500-8000元/月',
           rtype: '11',
           rmoney: '20元',
           canvasWidth: '', // canvas宽度
           canvasHeight: '', // canvas高度
           imagePath: '' // 分享的图片路径
         },
    
         /**
          * 生命周期函数--监听页面加载
          */
         onLoad: function (options) {
           var that = this
           var sysInfo = wx.getSystemInfo({
             success: function (res) {
               that.setData({
                 //设置宽高为屏幕宽，高为屏幕高的80%，因为文档比例为5:4
                 canvasWidth: res.windowWidth,
                 canvasHeight: res.windowWidth * 0.8
               })
               leftMargin = res.windowWidth
               topMargin = res.windowWidth * 0.8
             },
           })
         },
    
         /**
          * 生命周期函数--监听页面初次渲染完成
          */
         onReady: function () {
           ctx = wx.createCanvasContext('myCanvas')
           this.addImage()
           this.tempFilePath()
    
         },
         //画背景图
         addImage: function () {
           var context = wx.createContext();
           var that = this;
           var path = "/images/share.jpg";
           //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
           //不知道是什么原因，手机环境能正常显示
           ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
           this.addTitle()
           this.addRtype()
           this.addRmoney()
           this.addSalary()
           ctx.draw()
         },
         //画标题
         addTitle: function () {
           var str = this.data.title
           ctx.font = 'normal bold 20px sans-serif';
           ctx.setTextAlign('center'); // 文字居中
           ctx.setFillStyle("#222222");
           ctx.fillText(str, this.data.canvasWidth / 2, 65)
         },
         // 画返费方式
         addRtype: function () {
           var str = this.data.rtype
           ctx.setFontSize(16)
           ctx.setFillStyle("#ff4200");
           ctx.setTextAlign('left');
           ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
         },
         // 画返费金额
         addRmoney: function () {
           var str = this.data.rmoney
           ctx.setFontSize(16)
           ctx.setFillStyle("#222");
           ctx.setTextAlign('left');
           ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
         },
         // 画薪资
         addSalary: function () {
           var str = this.data.salary
           ctx.setFontSize(16)
           ctx.setFillStyle("#222");
           ctx.setTextAlign('left');
           ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
         },
         /**
          * 用户点击右上角分享
          */
         onShareAppMessage: function (res) {
           // return eventHandler接收到的分享参数
           return {
             title: this.data.title,
             path: '/pages/test/test',
             imageUrl: this.data.imagePath
           };
         },
         //导出图片
         tempFilePath: function () {
           let that = this;
           wx.canvasToTempFilePath({
             canvasId: 'myCanvas',
             success: function success(res) {
               wx.saveFile({
                 tempFilePath: res.tempFilePath,
                 success: function success(res) {
                   that.setData({
                     imagePath: res.savedFilePath
                   });
                 }
               });
             }
           });
         },
    
       })

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序分享

页面代码 <button open-type='share' class="fenxiangitem"> <image class="imgs" s

爱被打了一巴掌/ 2022年12月25日 02:59/ 0 赞/ 240 阅读

相关微信小程序用canvas画图并分享

<canvas style='width:{ {canvasWidth}}px;height:{ {canvasHeight}}px' ca

爱被打了一巴掌/ 2022年11月27日 08:46/ 0 赞/ 149 阅读

相关微信小程序中的canvas

文章目录 canvas 常用属性： canvas基本用法：注意： canvas绘制基本步骤： canvas绘制笑脸： canv

灰太狼/ 2022年11月16日 01:37/ 0 赞/ 716 阅读

相关微信小程序-海报制作（canvas）

文档 [https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreen

落日映苍穹つ/ 2022年10月08日 05:40/ 0 赞/ 457 阅读

相关微信小程序-分享

作用：分享某页面，发送给某好友 1.设置button的open-type属性=“share”，则可调出微信好友列表。 2.js中写一个监听分享的事件。 onShar

末蓝、/ 2022年02月16日 10:22/ 0 赞/ 416 阅读

相关微信小程序用canvas画图并分享

最近开始做微信小程序，有这样一个需求：从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片如下图的列表： ![列表][watermark

落日映苍穹つ/ 2021年10月29日 21:22/ 0 赞/ 363 阅读

相关微信小程序 - 使用canvas绘制海报实现分享功能

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3

喜欢ヅ旅行/ 2021年08月28日 16:28/ 0 赞/ 760 阅读

相关微信小程序 - 小程序分享转发

方法在小程序需要分享的xxx页面添加代码 export default { onShareAppMessage () {

深碍√TFBOYSˉ_/ 2021年07月26日 16:33/ 0 赞/ 601 阅读

相关微信小程序2D canvas绘制分享海报

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

╰+攻爆jí腚メ/ 2021年07月24日 23:50/ 0 赞/ 1052 阅读

相关微信小程序-canvas生成图片并保存到本地

微信小程序-canvas生成图片并保存到本地前言需求场景：我们知道，微信小程序可以分享给好友或者微信群，不能分享到朋友圈，那分享到朋友圈就需要特殊处理一下，这里我们把...

红太狼/ 2020年06月18日 16:20/ 0 赞/ 864 阅读