wx 使用canvas画海报

最新推荐文章于 2024-09-13 07:09:51 发布
最新推荐文章于 2024-09-13 07:09:51 发布
阅读量545 收藏
点赞数
分类专栏： 前端 web js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZMM_Devil/article/details/106915984
版权
前端 同时被 3 个专栏收录
31 篇文章 1 订阅
订阅专栏
web
31 篇文章 0 订阅
订阅专栏
js
26 篇文章 0 订阅
订阅专栏

直接放代码   各个地方基本都有注释 

<template>
  <view class="poster">
    <canvas v-if="getImg==''" style="width: 315px;height: 502px;position: fixed;left: 999999rpx;" canvas-id="poster1" class="post"></canvas>
    <image  v-if="getImg!=''" :src="getImg" style="width: 630rpx;height: 1004rpx;" class="getimg" />
    <button @click="preservation" v-if="getImg!=''" class="width290 height76 radius38 font32 weight400 line76 colorFFFFFF absolute left58" style="background-color: #81D8D0;top:1150rpx;">保存至相册</button>
    <button open-type="share"  v-if="getImg!=''" class="width290 height76 radius38 font32 weight400 line76 colorFFFFFF absolute right48" style="background-color: #81D8D0;top:1150rpx;">推荐给好友</button>
  </view>
</template>


<script>
  import wepy from '@wepy/core';
  import lbajax from '../lbts/ajax.js';
  import testMixin from '../mixins/test.js';
  wepy.page({
    mixins: [ testMixin ],
    data: {
      getImg: '',
      imgUrl:'',
      show: false,
      QrCode:'',
      posterInfo:{},
      state:'',
      route:'',
      id:'',
    },
    onShareAppMessage(){
      return {
        title:this.posterInfo.shopName,
        path:this.route+'?ph='+this.posterInfo.phone+'&id='+this.id,
        imageUrl: this.imgUrl
      };
    },
   async onLoad(options) {
     console.log(getApp().$wepy.$options.globalData)
     new Promise(this.validityInfo)
     .then((res)=>{
       if(res==1){
         this.state = options.c;
         this.id=options.id;
         this.imgUrl=options.imgUrl;
            wx.showLoading({
              title: '加载中'
            });
            let data={
              storeId:getApp().$wepy.$options.globalData.poster.id,
            }
            if(options.c==0){
              this.route="/infoPages/temlete"
              data.paths="infoPages/temlete"
            }else{
              this.route="/power/temleteMore"
              data.paths="power/temleteMore"
            }
            console.log(data,'data')
            lbajax({
              url:'/wx/getQrCode2',
              method:'POST',
              data:data,
              }).then((res)=>{
                this.posterInfo=getApp().$wepy.$options.globalData.poster
                this.QrCode=res
                this.init();
              })
       }else{
         wx.showLoading({
           title: '请先登录！'
         });
         setTimeout(function () {
           wx.navigateTo({
               url: '/power/login'
           });
           wx.hideLoading()
         }, 2000)
         
       }
     }).catch((err)=>{
       console.log(err)
     })
     
    },
    methods: {
      /**
       * 验证是否登录
       * */
      validityInfo(resolve, reject){
        console.log(getApp().$wepy.$options.globalData.poster)
        let info = getApp().$wepy.$options.globalData.poster;
        if(info.phone && info.headImg){
          resolve(1);
        }else{
          resolve(0);
        }
      },
      /**
       * 保存到相册
       * */
      preservation() {
        wx.getSetting({
          success: (res) => {
            // 如果没有则获取授权
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                  wx.saveImageToPhotosAlbum({
                    filePath: this.getImg,
                    success: () => {
                      wx.showToast({
                        title: '保存成功'
                      })
                    },
                    fail() {
                      wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                      })
                    }
                  })
                },
              })
            } else {
              // 有则直接保存
              wx.saveImageToPhotosAlbum({
                filePath: this.getImg,
                success() {
                  wx.showToast({
                    title: '保存成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            }
          },
        })
      },
      /**
       * 如果图片加载失败返回上一页
       * */
      toBack(){
        wx.navigateBack()
      },
      roundRect(ctx, x, y, w, h, r) {
        // 开始绘制
        ctx.beginPath()
        // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
        // 这里是使用 fill 还是 stroke都可以，二选一即可
        ctx.setFillStyle('transparent')
        // ctx.setStrokeStyle('transparent')
        // 左上角
        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

        // border-top
        ctx.moveTo(x + r, y)
        ctx.lineTo(x + w - r, y)
        ctx.lineTo(x + w, y + r)
        // 右上角
        ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

        // border-right
        ctx.lineTo(x + w, y + h - r)
        ctx.lineTo(x + w - r, y + h)
        //右下五角
        // ctx.lineTo(w, h)
        // ctx.lineTo(w, h)
        //右下有角
          ctx.lineTo(x + w, y + h - r)
          ctx.lineTo(x + w - r, y + h)
        // 右下角
        ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

        // border-bottom
        ctx.lineTo(x, y + h)
        ctx.lineTo(x, y + h) //注释去掉左下角
        // 左下角
        ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

        // border-left
        ctx.lineTo(x, y + r)
        ctx.lineTo(x + r, y)

        // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
        ctx.fill()
        // ctx.stroke()
        ctx.closePath()
        // 剪切
        ctx.clip()
      },
      headImg(contex, url) {
        var avatarurl_width = 37; //绘制的头像宽度
        var avatarurl_heigth = 37; //绘制的头像高度
        var avatarurl_x = 15; //绘制的头像在画布上的位置
        var avatarurl_y = 387; //绘制的头像在画布上的位置
        contex.save();
        contex.beginPath(); //开始绘制
        //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
        contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y,
          avatarurl_width / 2, 0,
          Math.PI * 2, false);
        contex.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
        contex.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
        contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
      },
      /**
       * 客片欣赏海报
       * */
       appreciate(backimg,ctx){
         if (true) { //店铺名字
           ctx.setFontSize(15);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText(this.posterInfo.shopName, 37, 292);
         }
         if(true){//客片风格
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('客片风格：大童', 15, 311+15);
         }
         if(true){//样片主题
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('样片主题：童真时刻', 159, 311+15);
         }
         if (true) { //消费
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('人均消费：'+this.posterInfo.seryPrice, 15, 344+15);
         }
         if (true) { //店评分
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('门店评分：', 159, 344+15);
         }
         if (true) { //分数星星
         var num = 4;
         if(!this.posterInfo.storeScore){
           this.posterInfo.storeScore=5
         }
         for(let i=0;i<this.posterInfo.storeScore;i++){
           ctx.drawImage('/static/img/score.png', 224+num, 344+5, 12, 12);
           num=num+4+12;
         }
         }
         ctx.save();
         //分割线
         ctx.beginPath(); //开始一个新的路径
         ctx.moveTo(300, 377)
         ctx.lineTo(15, 377)
         ctx.setStrokeStyle('#EBEBEB')
         ctx.stroke()
         ctx.restore()
         this.headImg(ctx, backimg[1])
         if (true) { //昵称
           ctx.setFontSize(12);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText(this.posterInfo.userName, 58, 397 + 15);
         }
         if (true) { //长按识别文字
           ctx.setFontSize(12);
           ctx.setFillStyle('#ADADAD');
           ctx.setTextAlign('left');
           ctx.fillText('长按识别小程序码', 15, 428 + 15);
         }
         if (true) { //即可查看精美样片！
           ctx.setFontSize(12);
           ctx.setFillStyle('#81D8D0');
           ctx.setTextAlign('left');
           ctx.fillText('即可查看精美样片！', 15, 449 + 15);
         }
         if (true) { //即可查看精美样片！
           ctx.setFontSize(12);
           ctx.setFillStyle('#AAAAAA');
           ctx.setTextAlign('left');
           ctx.fillText('还有更多精彩内容，等着你！', 15, 470 + 15);
         }
       },
      /**
       * 客片展示海报
       * */
       exhibition(backimg,ctx) {
         if (true) { //店铺名字
           ctx.setFontSize(15);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText(this.posterInfo.shopName, 37, 292);
         }
         if (true) { //消费
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('人均消费：'+this.posterInfo.seryPrice, 15, 311 + 17);
         }
         if (true) { //店评分
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('门店评分：', 159, 311 + 17);
         }
         if (true) { //分数星星
         var num = 4;
         if(!this.posterInfo.storeScore){
           this.posterInfo.storeScore=5
         }
         for(let i=0;i<this.posterInfo.storeScore;i++){
           ctx.drawImage('/static/img/score.png', 224+num, 317, 12, 12);
           num=num+4+12;
         }
         }
         if (true) { //门店位置
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText('门店位置：', 15, 344 + 17);
         }
         if (true) { //详细位置
           ctx.setFontSize(13);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText(this.posterInfo.address, 80, 344 + 17);
         }
         ctx.save();
         //分割线
         ctx.beginPath(); //开始一个新的路径
         ctx.moveTo(300, 377)
         ctx.lineTo(15, 377)
         ctx.setStrokeStyle('#EBEBEB')
         ctx.stroke()
         ctx.restore()
         this.headImg(ctx, backimg[1])
         if (true) { //昵称
           ctx.setFontSize(12);
           ctx.setFillStyle('#000');
           ctx.setTextAlign('left');
           ctx.fillText(this.posterInfo.userName, 58, 397 + 15);
         }
         if (true) { //长按识别文字
           ctx.setFontSize(12);
           ctx.setFillStyle('#ADADAD');
           ctx.setTextAlign('left');
           ctx.fillText('长按识别小程序码', 15, 428 + 15);
         }
         if (true) { //即可查看精美样片！
           ctx.setFontSize(12);
           ctx.setFillStyle('#81D8D0');
           ctx.setTextAlign('left');
           ctx.fillText('即可查看精美样片！', 15, 449 + 15);
         }
         if (true) { //即可查看精美样片！
           ctx.setFontSize(12);
           ctx.setFillStyle('#AAAAAA');
           ctx.setTextAlign('left');
           ctx.fillText('还有更多精彩内容，等着你！', 15, 470 + 15);
         }
       },
      /**
       * 生成图片
       * */
      init() {
        wx.showLoading({
          title: '加载中',
        })
        //二维码
        let qrcode = new Promise((resolve) =>{
          wx.getImageInfo({
            src: this.QrCode,
            success: (res) => {
              resolve(res.path)
            },
            fail: (err) => {
              console.log(err)
              wx.showToast({
                title: '网络错误请重试',
                icon: 'loading'
              })
              this.toBack()
            }
          });
        });
        //头像
        let headImg = new Promise((resolve) =>{
          wx.getImageInfo({
            src: this.posterInfo.headImg,
            success: (res) => {
              resolve(res.path)
            },
            fail: (err) => {
              console.log(err)
              wx.showToast({
                title: '网络错误请重试',
                icon: 'loading',
                duration:2000,
                success:(res)=>{
                  this.toBack()
                }
              })
            }
          });
        });
        //大图
        let backimg = new Promise((resolve)=> {
          wx.getImageInfo({
            src:this.imgUrl,
            success: (res) => {
              resolve(res.path)
            },
            fail: (err) => {
              console.log(err)
             wx.showToast({
               title: '网络错误请重试',
               icon: 'loading',
               duration:2000,
               success:(res)=>{
                 this.toBack()
               }
             })
            }
          });
        });
        Promise.all([backimg, headImg,qrcode])
          .then((backimg) => {
            let ctx = wx.createCanvasContext('poster1', this)
            ctx.save()
            this.roundRect(ctx, 0, 0, 315, 502, 10);
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(0, 0, 315, 502);
            ctx.drawImage(backimg[0], 0, 0, 315, 260);
            ctx.restore()
            ctx.drawImage('/static/img/shop.png', 15, 278, 16, 15);
            console.log(this.state)
            if(this.state==0){
              this.exhibition(backimg,ctx);
            }else{
              this.appreciate(backimg,ctx);
            }
            //二维码
            ctx.drawImage(backimg[2], 200, 387, 100, 100);
            ctx.draw(true, (res) => {
              wx.canvasToTempFilePath({
                canvasId: 'poster1',
                destWidth: 315*2,
                destHeight: 502*2,
                success: (res) => {
                  this.getImg = res.tempFilePath;
                  wx.hideLoading()
                },
                fail: function(res) {
                console.log(res)
                }
              });
            })
          });
      }
    }
  })
</script>
<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }
.getimg{
    position: absolute;
    top: 120rpx;
}
  .poster {
    display: flex;
    // align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  button::after{
    border: none;
  }
</style>

 

Answer_Ming
关注
专栏目录
微信小程序页面带参海报分享组件---WxPoster
易名
01-11 5807
目录WxPoster特点组件截图快速入手DemoTODOLicense WxPoster WxPoster是一个微信小程序海报分享组件，使用简单，只需要将组件嵌入到想要分享的页面，传入页面路径和标题就可以生成漂亮的带小程序码的分享海报。 特点 多海报模板支持 动态设置 分享引导语自定义 分享者昵称(默认获取微信昵称)自定义 分享海报的背景图片自定义 支持海报文字颜色的设置(目前黑白) 标题、昵...
wx-charts：基于canvas绘制图表
极客小寨的博客
06-21 4075
每日推荐 这篇文章主要介绍了微信小程序图表插件(wx-charts)实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 https://github.com/xiaolin3303/wx-charts 本文作者 作者：xiaolin3303 链接：https://github.com/xiaolin3303 前言 最近由于工作需要，将应用里的...
wx-Canvas:小型图像渲染器用于微信小程序
05-10
wx-画布 小型图像渲染器用于微信小程序 例子 这是画布展示示例！ 这是拖动画布显示的示例！ 这是grid-trace-drag画布显示示例！ 这是显示多键盘的示例，但现在不起作用（2017-6-11）
微信小程序快速绘画工具：wxapp-canvas 使用教程
最新发布
gitblog_00552的博客
09-13 982
微信小程序快速绘画工具：wxapp-canvas 使用教程 wxapp-canvas ???? 微信小程序快速绘画工具 项目地址: https://gitcode.com/gh_mirrors/wx/wxapp-canvas ...
uni-app使用wx-canvas实现微信小程序上显示地图map和坐标geo
weixin_45938584的博客
11-03 1340
源码 <template> <view class="echart-box"> <canvas class="ec-canvas" :id="chartId" :canvasId="chartId" @error="error"></canvas> </view> </template> <script> import WxCanvas from "../../components/echart.
canvas (vue mpvue 微信原生-wx)
ICUiseeyou的博客
10-26 417
canvas 文本绘制
uniapp使用canvas画海报二维码
Blue54的博客
05-18 2667
给定画布大小《在template内》 简单来说就是<canvas canvas-id=“”>组成 <canvas canvas-id="myQrcode" style=" width: 178px;height: 178px;position: absolute;top: -1000rpx;" /> <canvas canvas-id="myCanvas" style="height:1334px;width:750px;position:absolute;top: -9
微信小程序使用canvas自适应屏幕画海报并保存图片功能
10-16
然后，在页面的js文件中，我们使用wx.createCanvasContext来创建Canvas的绘图上下文，并在绘制方法中使用计算出的相对单位来完成绘图。例如，在drawPoster函数中，我们可以按照计算出的rpx值来绘制矩形、设置字体...
小程序中使用canvas绘制海报
ZcWCR的博客
12-29 726
最近项目需求使用canvas绘制朋友圈可分享的海报，中间遇到很多问题，于是上网搜索，完美解决后，在此总结一下。 先来看一下效果图，点击按钮生成带二维码的图片。 1.关于canvas画布的宽度和高度 wxml： <canvas canvas-id="canvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;background:red;position:fixed;top:-10000px;left:0; right:0;" d
微信小程序canvas分享海报功能
10-16
例如，我们可以使用`wx.getImageInfo`来预加载图片，然后使用`wx.createSelectorQuery`选择canvas元素并执行绘图操作。如果用户首次拒绝授权，我们需要提供重新打开授权设置的入口。 在用户点击“保存图片”按钮时...
微信小程序---canvas
weixin_38961329的博客
02-10 1万+
canvas官网：CanvasRenderingContext2D.canvas - Web APIs | MDN 小程序-canvas组件：canvas | 微信开放文档
wx-charts 微信小程序图表插件
03-14
微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个
微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip
09-25
微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip
微信小程序canvas画图功能实现
12-26
微信小程序canvas画图功能实现
微信小程序使用canvas绘图并且把图片上传到服务器上面.rar
05-25
微信小程序使用canvas绘图并且把图片上传到服务器上面
小程序canvas绘制基础+动态绘制canvas
weixin_42322441的博客
05-11 552
设置设备像素比（用于适应px） setCanvasSize: function () { let $this = this var res = wx.getSystemInfoSync(); var scale = 750 / res.windowWidth; //不同屏幕下canvas的适配比例；设计稿是750宽 // w = 515/scale canvas尺寸=设计尺寸/scale $this.setData({ scale
uniapp使用wxml-to-canvas开发小程序保存canvas图片
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
01-10 3736
uniapp使用wxml-to-canvas开发小程序保存页面为图片、常用保存为海报图。
小程序canvas绘图
qq_36738092的博客
08-13 342
小程序海报分享。 本海报分享是列表分享，所以每次取消都需要清空之前的图片临时路径。 <view class="sharesContent" v-if="showPoster" :style="{ height: windowHeight + 'px' }"> <view class="sharesContent_bj" v-if="showPoster" @click="closePoster()" :style="{ height: windowHeight + 'px' }
微信小程序canvas画图
热门推荐
impossible1994727的博客
07-16 2万+
基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。 1、下面介绍一下canvas的画图，我这个简单一点，画一个带图文的背景图，图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签，一定要写上canvas-id='canvas的id'，这是必须条件，如下面代码： <...
小程序canvas生成海报
05-17
小程序中可以使用canvas生成海报，具体步骤如下： 1. 在wxml文件中创建一个canvas标签，设置宽高和id。 2. 在js文件中获取canvas的上下文对象。 3. 绘制海报内容，包括背景图片、文字、二维码等。 4. 在canvas绘制完成后，将canvas转换成图片并保存到本地。 5. 在页面中显示生成的海报图片。 下面是一个简单的示例代码： wxml文件： ```html <canvas canvas-id="mycanvas" style="width: 750px; height: 1334px;"></canvas> ``` js文件： ```javascript // 获取canvas的上下文对象 var context = wx.createCanvasContext('mycanvas'); // 绘制背景图片 context.drawImage('background.jpg', 0, 0, 750, 1334); // 绘制文字 context.setFontSize(32); context.setFillStyle('#ffffff'); context.fillText('这是一段文字', 100, 100); // 绘制二维码 context.drawImage('qrcode.jpg', 500, 500, 200, 200); // 完成绘制 context.draw(false, function() { // 将canvas转换成图片并保存到本地 wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function(res) { // 在页面中显示生成的海报图片 wx.previewImage({ urls: [res.tempFilePath] }) } }) }) ``` 注意：在绘制图片时，需要确保图片已经加载完成，否则会出现图片未绘制的问题。可以使用wx.getImageInfo()方法获取图片信息，确保图片已经加载完成后再进行绘制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值