uniapp cli版微信小程序绘制海报分享

最新推荐文章于 2024-08-10 08:34:33 发布
最新推荐文章于 2024-08-10 08:34:33 发布
阅读量400 收藏 1
点赞数
文章标签： vue.js javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyuexin24/article/details/109024656
版权

使用canvasdrawer组件来进行绘制，根据原有canvasdrawer改写了一个uniapp-cli版本的组件，使用时只需要和vue组件一样引入即可使用。十分简单，易用。
下为改写canvasdrawer组件代码

<template>
    <canvas canvas-id="canvasdrawer"
        :style="{width:width+'px',height:height+'px'}"
        class="board"
        v-if="showCanvas">
    </canvas>
</template>

<script>

export default {
  props: {
    painting: {
      type: Object,
      default: {}
    }
  },
  data(){
    return {
      showCanvas: false,
      width: 100,
      height: 100,
      index: 0,
      imageList: [],
      tempFileList: [],
      isPainting: false,
      ctx: null
    }
  },
  watch: {
    painting(newVal, oldVal) {
      if (!this.isPainting) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          if (newVal && newVal.width && newVal.height) {
            this.showCanvas = true;
            this.isPainting = true;
            this.readyPigment();
          }
        } else {
          if (newVal && newVal.mode !== "same") {
            this.$emit("getImage", {
              errMsg: "canvasdrawer:samme params"
            });
          }
        }
      }
    }
  },
  methods : {
    readyPigment() {
      const {
        width,
        height,
        views
      } = this.painting;
      this.width = width;
      this.height = height;

      const inter = setInterval(() => {
        if (this.ctx) {
          clearInterval(inter);
          this.ctx.clearActions();
          this.ctx.save();
          this.getImageList(views);
          this.downLoadImages(0);
        }
      }, 100);
    },
    getImageList(views) {
      const imageList = [];
      for (let i = 0; i < views.length; i++) {
        if (views[i].type === "image") {
          imageList.push(views[i].url);
        }
      }
      this.imageList = imageList;
    },
    downLoadImages(index) {
      
      const {
        imageList,
        tempFileList
      } = this;
      console.log(index,imageList.length)
      if (index < imageList.length) {
        this.getImageInfo(imageList[index]).then(file => {
          tempFileList.push(file);
          this.tempFileList = tempFileList;
          this.downLoadImages(index + 1);
        });
      } else {
        this.startPainting();
      }
    },
    startPainting() {
      const {
        tempFileList,
        painting: {
            views
        }
      } = this;
      for (let i = 0, imageIndex = 0; i < views.length; i++) {
        if (views[i].type === "image") {
          this.drawImage({
            ...views[i],
            url: tempFileList[imageIndex]
          });
          imageIndex++;
        } else if (views[i].type === "text") {
            if (!this.ctx.measureText) {
              wx.showModal({
                title: "提示",
                content: "当前微信版本过低，无法使用 measureText 功能，请升级到最新微信版本后重试。"
              });
              this.$emit("getImage", {
                errMsg: "canvasdrawer:version too low"
              });
              return;
            } else {
              this.drawText(views[i]);
            }
          } else if (views[i].type === "rect") {
            this.drawRect(views[i]);
          }
      }
      
      this.ctx.draw(false, () => {
        const system = wx.getSystemInfoSync().system
        if (/ios/i.test(system)) {
          this.saveImageToLocal()
        } else {
          // 延迟保存图片，解决安卓生成图片错位bug。
          setTimeout(() => {
            this.saveImageToLocal()
          }, 800)
        }
      });
    },
    drawImage(params) {
      this.ctx.save();
      const {
        url,
        top = 0,
        left = 0,
        width = 0,
        height = 0,
        borderRadius = 0
      } = params;
      this.ctx.drawImage(url, left, top, width, height);
      this.ctx.restore();
    },
    drawText(params) {
      this.ctx.save();
      const {
        MaxLineNumber = 2,
        breakWord = false,
        color = "black",
        content = "",
        fontSize = 16,
        top = 0,
        left = 0,
        lineHeight = 20,
        textAlign = "left",
        width,
        bolder = false,
        textDecoration = "none"
      } = params;
      this.ctx.beginPath();
      this.ctx.setTextBaseline("top");
      this.ctx.setTextAlign(textAlign);
      this.ctx.setFillStyle(color);
      this.ctx.setFontSize(fontSize);
      if (!breakWord) {
        this.ctx.fillText(content, left, top);
        this.drawTextLine(left, top, textDecoration, color, fontSize, content);
      } else {
          let fillText = "";
          let fillTop = top;
          let lineNum = 1;
          for (let i = 0; i < content.length; i++) {
              fillText += [content[i]];
              if (this.ctx.measureText(fillText).width > width) {
                if (lineNum === MaxLineNumber) {
                  if (i !== content.length) {
                    fillText = `${fillText.substring(0, fillText.length - 1)}...`;
                    this.ctx.fillText(fillText, left, fillTop);
                    this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText);
                    fillText = "";
                    break;
                  }
                }
                this.ctx.fillText(fillText, left, fillTop);
                this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText);
                fillText = "";
                fillTop += lineHeight;
                lineNum++;
              }
            }
          this.ctx.fillText(fillText, left, fillTop);
          this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText);
        }
      this.ctx.restore();
      if (bolder) {
        this.drawText({
          ...params,
          left: left + 0.3,
          top: top + 0.3,
          bolder: false,
          textDecoration: "none"
        });
      }
    },
    drawTextLine(left, top, textDecoration, color, fontSize, content) {
      if (textDecoration === "underline") {
        this.drawRect({
          background: color,
          top: top + fontSize * 1.2,
          left: left - 1,
          width: this.ctx.measureText(content).width + 3,
          height: 1
        });
      } else if (textDecoration === "line-through") {
        this.drawRect({
          background: color,
          top: top + fontSize * 0.6,
          left: left - 1,
          width: this.ctx.measureText(content).width + 3,
          height: 1
        });
      }
    },
    drawRect(params) {
      this.ctx.save();
      const {
        background,
        top = 0,
        left = 0,
        width = 0,
        height = 0
      } = params;
      this.ctx.setFillStyle(background);
      this.ctx.fillRect(left, top, width, height);
      this.ctx.restore();
    },
    async getImageInfo(url) {
      const res = await wx.getImageInfo({
        src: url
      });
      if (res.errMsg === "getImageInfo:ok") {
        return res.path;
      } else {
        this.$emit("getImage", {
            errMsg: "canvasdrawer:download fail"
        });
        return new Error("getImageInfo fail");
      }
    },
    async saveImageToLocal() {
      const {
        width,
        height
      } = this;
      const res = await wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width,
        height,
        canvasId: "canvasdrawer"
      }, this);
      if (res.errMsg === "canvasToTempFilePath:ok") {
        this.showCanvas = false;
        this.isPainting = false;
        this.imageList = [];
        this.tempFileList = [];
        this.$emit("getImage", {
          tempFilePath: res.tempFilePath,
          errMsg: "canvasdrawer:ok"
        });
      } else {
        this.$emit("getImage", {
          errMsg: "canvasdrawer:fail"
        });
      }
    }
  },
  onReady() {
    this.ctx = wx.createCanvasContext("canvasdrawer", this);
  }
}
</script>
<style lang="less">
  .board {
    position: fixed;
    top: 2000rpx;
  }
</style>

下为使用时代码

<template>
	<view class="content">
    <view class="draw-img">
      <image :src="shareImage" show-menu-by-longpress class="share-image" :style="{width: '100%',height:canvasHeight+'px'}" @click="preImg"></image>
      <canvasdrawer :painting="painting" @getImage="eventGetImage"></canvasdrawer>
    </view>
    <view class="btn">
      <view @click="eventSave">保存至手机相册</view>
      <view class="cancel">重新生成</view>
    </view>
	</view>
</template>

<script>
import canvasdrawer from "@/components/canvasdrawer/canvasdrawer";
	export default {
		data() {
			return {
        canvasHeight:'',
        shareImage:'',
        painting:{},
        paintinged:{
          "width": 375,
          "height": 555,
          "clear": true,
          "views": [
            {
              "type": "image",
              "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602478808861&di=2dfd90b69ef34fb417913b2822aabe6e&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg",
              "top": 0,
              "left": 0,
              "width": 375,
              "height": 555
            },
            {
              "type": "image",
              "url": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg",
              "top": 200,
              "left": 200,
              "width": 100,
              "height": 100
            },
            {
              "type": "text",
              "content": "文字1",
              "fontSize": 14,
              "color": "red",
              "textAlign": "left",
              "top": 208,
              "left": 50
            },
            {
              "type": "text",
              "content": "文字2",
              "fontSize": 16,
              "color": "yellow",
              "textAlign": "left",
              "top": 300,
              "left": 50
            },
            {
              "type": "text",
              "content": "文字三",
              "fontSize": 18,
              "color": "blue",
              "textAlign": "left",
              "top": 422,
              "left": 163
            }
          ]
        },
      }
    },
    components: {
      canvasdrawer
    },
    async onLoad(option){
       this.getSystem()
       this.eventDraw()
    },
		methods: {
      async getSystem(){
        let that=this
        let res=await uni.getSystemInfo()
        wx.createSelectorQuery().select('.btn').boundingClientRect(function (rect) {
          that.canvasHeight=res[1].windowHeight-rect.height
        }).exec()
      },
      eventDraw() {
        wx.showLoading({
          title: "请稍后",
          mask: true
        });
        this.painting = this.paintinged;
      },
      async eventSave() {
        // 保存图片至本地
        const res = await wx.saveImageToPhotosAlbum({
          filePath: this.shareImage
        });
        if (res.errMsg === "saveImageToPhotosAlbum:ok") {
          wx.showToast({
            title: "保存图片成功",
            icon: "success",
            duration: 2000
          });
        }
      },
      eventGetImage(event) {
        wx.hideLoading();
        this.shareImage = event.tempFilePath;
      },
      preImg(){
        let that=this
        wx.previewImage({
          urls: [that.shareImage] // 需要预览的图片http链接列表
        })
      }
		}
	}
</script>

<style lang="less" scoped>
	.content{
    width: 100%;
    height: 100vh;

    .btn{
      width: 100%;
      height: 98rpx;
      line-height: 98rpx;
      position: fixed;
      left: 0;
      bottom: 0;

      view{
        float: left;
        width: 50%;
        height: 100%;
        background-color: #00A578;
        color: #fff;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
      }

      .cancel{
        background-color: #fff;
        color: #656565;
      }
    }

    .draw-img{
      width: 100%;
    }

  }
</style>

使用方式与canvasdrawer方法一致，本文只是将canvasdrawer整理成vue组件。
实例项目-----传送门思密达

It is a secret
关注
uniapp微信小程序生成分享海报(模板自取)
qq_47195437的博客
06-20 6021
uniapp微信小程序生成分享海报
微信小程序生成分享海报方法（附带二维码生成）
10-17
主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序uniapp分享生成海报带二维码,封装为组件
m0_56146757的博客
07-23 989
【代码】微信小程序uniapp分享生成海报带二维码,封装为组件。
开源神器：Canvas Drawer 打造高效分享图绘制新体验
最新发布
gitblog_00055的博客
08-10 416
???? 开源神器：Canvas Drawer 打造高效分享图绘制新体验 mp_canvas_drawerkuckboy1994/mp_canvas_drawer: 是一个用于在Minecraft游戏中绘制图形的库。适合用于需要自定义Minecraft游戏界面的开发者。特点是可以提供一系列绘图工具，支持在游戏中绘制2D和3D图形。项目地址:https://gitcode.com/gh_mirrors/...
uniapp 实现生成海报并分享给微信好友和保存到本地相册
weixin_43929450的博客
02-08 7817
uniapp 生成海报并分享给好友或者下载到本地
uniapp生成海报，保存相册 / 分享微信好友和朋友圈
m0_60662967的博客
10-19 2472
uniapp生成海报，保存相册 / 分享微信好友和朋友圈
uniapp 微信小程序自定义分享图片
qq_58340302的博客
06-19 4428
2. 自定义内容：因为onShareAppMessage的imageUrl参数的支持的是本地文件路径、代码包文件路径或者网络图片路径 ，所以这里实现自定义的分享的方法是结合canvas画布。微信小程序用户，点击小程序里商品的分享按钮时，想要不同的商品展示不用的分享内容，比如分享图片上展示商品的图片、价格等信息。画画的时候，要是找不准xy的位置，可以从这三种样式里选一个样式接近的再慢慢修改～先贴上画布的代码，这里画了三种自定义分享的内容，样式在代码下方。setGoodsShareCanvas()方法的样式。
微信小程序实现分享商品海报功能
12-13
在微信小程序中，实现分享商品海报的功能是一项常见的需求，它能增强用户互动并促进商品的推广。以下将详细解析如何实现这一功能，我们将基于uni-app框架进行讲解，但原理适用于其他微信小程序开发框架。 首先，...
分享功能，canvas绘制微信小程序分享海报
09-28
总的来说，结合微信小程序的分享功能和canvas绘制，我们可以创造出具有吸引力的个性化分享海报，提高用户的参与度和分享率。在实践中，还可以根据业务需求添加更多复杂的元素，如动态效果、二维码等，进一步提升用户...
微信小程序生成海报demo
10-11
生成海报功能则是微信小程序中一种实用的工具，通常用于用户分享商品、活动或者个人成就等，用户可以自定义选择信息，如图片、文字、二维码等，一键生成一张美观的海报图片，然后分享到朋友圈或聊天中。 在这个demo...
uniapp开发微信小程序使用painter绘制海报
最强的森的博客
11-10 2867
uniapp开发微信小程序使用painter绘制海报 参考文章： 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://blog.csdn.net/YouZi_X/article/details/107339893?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_aggregati
微信小程序生成海报分享朋友圈的实现方法
10-17
利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧
网上收集多个微信小程序生成朋友圈海报图
11-24
网上收集多个微信小程序图片合成组件，生成朋友圈海报图、自定义标题导航、自定义组件、下拉刷新、即时通讯（IM）等，wxa-plugin-canvas是一个生成二维码海报的组件，通过非常简单的配置就可以生成精美的海报
微信小程序canvas案例，类似直播刷赞We-Canvas-master.zip
09-25
微信小程序canvas案例，类似直播刷赞We-Canvas-master.zip
uniapp微信小程序生成带个人二维码的海报
唐僧洗头用飘柔
07-08 1477
小程序生成海报
uniapp canvas绘图生成海报
热门推荐
Neil_1993的博客
05-22 1万+
组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <button type="primary" @tap="saveToAlbum">保存</button> <view class="post"> <tki-qrcode ref=...
uniapp canvas绘图流程，从绘制图案到绘制文字，然后完成。还有一些方法的具体细节。
qq_41231694的博客
01-30 1万+
好的我们开始，uniapp绘制海报进行保存是我们经常需要制作的功能。而绘制海报，我们一般会绘制图片，绘制文字，绘制截取图片。 下面让我们来看下绘制一个海报的具体过程。 1、首先我们需要绘制图片 在canvas上绘制图片。我们需要用到一下代码 ctx.drawImage( 图片路径 , 0, 0, 244 * 1.22, 429 * 1.22); //绘制图 而该方法只支持绘制本地图片，包括本地...
关于uniapp canvas.draw方法没有执行回调的问题
daoxiaofei的博客
12-27 5354
问题： canvas绘制完成后，无法进入canvas.draw的回调函数 原因：由于绘制速度太快 解决： 方法一： 在draw外套个setTimeout 方法二： this.ctx.draw(false, setTimeout(()=>{ console.log(3) },300)) 原文链接: https://www.jianshu.com/p/3a21c4edacf5 ...
微信小程序 — 二维码海报分享到好友功能
棒怡情的专栏
06-09 1951
微信小程序二维码内容，生成海报图片。分享到微信好友功能
uniapp框架开发微信小程序实践：豆瓣电影项目源码解析
资源摘要信息:"uniapp框架-基于mpvue实现豆瓣电影微信小程序-uni-app项目源码-vue语法格式.zip"文件包含了使用uni-app开发的基于mpvue的豆瓣电影微信小程序项目源码。uni-app是一个使用Vue.js开发所有前端应用的框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值