canvasdrawer 微信原生小程序生成海报图片

这篇具有很好参考价值的文章主要介绍了canvasdrawer 微信原生小程序生成海报图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在小程序中生成海报是一种非常有效的推广方式

用户可以使用小程序的过程中生成小程序海报并分享给他人

通过海报的形式,用户可以直观地了解产品或服务的特点和优势

常见绘制海报方式

目前,小程序海报有两种常见的实现方式:

· canvas 绘制海报

· 服务端绘制海报

这两种方式各有千秋

canvas 绘制海报
使用 canvas 绘制海报主要有以下几个步骤

1、创建 canvasContext

2、获取网络图片的本地路径

3、绘制图片、文字等到 canvas

4、调用 wx.canvasToTempFilePath 导出图片

尽管 canvas 绘制功能强大,但实际使用中,这些操作看似简单,但调试起来却比较麻烦

而且面对一些复杂的排版时,使用 canvas 绘制相较于使用 CSS 绘制来说困难许多,如圆角、百分比、自定义字体等等。

除此之外,canvas 的宽高有最大限制,超出限制则会绘制空白

服务端绘制

小程序也可以通过调用服务端接口,将需要生成海报的数据传递给服务端,

由服务端使用 Canvas API 等第三方库来生成图片。

然而,这种绘制方式需要走网络请求,如果量大会给服务器带来一定的成本压力。

此外,对于复杂排版的实现,使用 Canvas 绘制也有一定的难度。

尽管小程序海报虽然好用,但是当遇到要求比较高的设计稿需要还原海报时,对小程序开发者来说是一个十分让人头疼的问题

考虑到海报在小程序中使用的广泛性,我们把canvas绘制海报封装成组件使用,通过对象配置的方式生成海报图,更加简洁易用~
微信小程序生成图片 canvasdrawer.js,# 小程序,小程序

引入组件

"usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }

wxml

<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>

js

Page({
  data: {
    shareImage:'',
    paintingIndex:0,
    painting:{
      width: 375,
      height: 500,
      clear: true,
      views: [
        {
          type: 'image',
          url: 'https://defaultbg.png',
          top: 0,
          left: 0,
          width: 381,
          height: 500
        }
      ]
    },
    show:false,
    pop:false,
    share:"",
    pay:false,
    from:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getShare();
  },
  async getShare(){
    let _this = this;
    await get_share().then(res=>{
      const painting =  {
        width: 375,
        height: 500,
        clear: true,
        views: [
          {
            type: 'image',
            url: 'https://defaultbg.png',
            top: 0,
            left: 0,
            width: 381,
            height: 500
          },
          {
            type: 'image',
            url: res.data.personnel_share_img || 'https://default.png',
            top: 190,
            left: 48,
            textAlign: "center",
            borderRadius:8,
            width: 290,
            height: 130
          },
          {
            type: "text",
            content: res.data.activity_name || '',
            fontSize: 18,
            width: 280,
            color: "#000000",
            textAlign: "left",
            top: 336,
            left: 46,
            zIndex:200
          },
          {
            type: 'image',
            url: res.data.avatar_url || 'https://default.png',
            top: 405,
            left: 42,
            borderRadius:7,
            width: 70,
            height: 60,
            zIndex:200
          },
          {
            type: "text",
            content: res.data.guardian_name || '默认名称',
            fontSize: 16,
            color: "#000000",
            textAlign: "left",
            top: 415,
            left: 120,
            zIndex:200
          },
          {
            type: "text",
            content: "分享给你",
            width: 96,
            fontSize: 14,
            color: "#555555",
            textAlign: "left",
            top: 440,
            left: 120,
            zIndex:200
          },
          {
            type: 'image',
            url: res.data.qr_img_url || 'https://default.png',
            top: 390,
            left: 240,
            width: 100,
            height: 90,
            zIndex:200
          },
        ]
      };
      _this.setData({
        share:res.data,
        painting
      })
    })
     await _this.setData({
          mode: 'normal',
          painting:this.data.painting,
          paintingIndex: 1,
          show:true
        })
  },
  eventGetImage(event){
    let _this = this;
    const { tempFilePath } = event.detail
    this.setData({
      shareImage: tempFilePath
    })
  }
})

获取组件

微信小程序生成图片 canvasdrawer.js,# 小程序,小程序文章来源地址https://www.toymoban.com/news/detail-812693.html

到了这里,关于canvasdrawer 微信原生小程序生成海报图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序 绘制海报,长按图片分享,保存海报

    uView UI 2.0 dcloud 插件市场地址

    2024年02月12日
    浏览(67)
  • 微信小程序生成海报工具Painter

    由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆

    2024年02月09日
    浏览(83)
  • 微信小程序实现画布生成海报功能

    微信小程序可以通过使用 标签来实现生成海报的功能。以下是基本实现步骤: 1.在 WXML 文件中创建一个 标签,并设置其宽度和高度属性。 ’ 2.在 JS 文件中,获取到 标签的上下文对象。 3.在 ctx 上下文对象中,使用各种绘图 API 绘制出海报的内容 4.最后调用 ctx.draw() 方法将海

    2024年02月16日
    浏览(53)
  • 微信小程序实现生成分享海报案例

    一、引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的 painter 放到小程序的 components 目录下 二、页面中引入插件 (1)页面的 json 文件 (2)页面的 wxml 文件 其中 painter 插件可以获取绘制出来的图片路径, image 标签展示出来 三、绘制海报 1、

    2024年02月08日
    浏览(96)
  • PHP 合并图片,微信小程序合并海报,合并文字

    //业务需求:我们需要一个微信小程序码,但是是需要提供给别人扫码的但是只有一个纯粹的小程序码是不好看的,所以需要推广的海报图片。再结合文字   最终效果     准备工作  1、需要海报的底图  2、小程序码的图片  代码部分结合YII2但不影响使用 完整过程 第一步:

    2024年02月08日
    浏览(67)
  • 微信小程序生成二维码海报并分享

    背景:点击图标,生成海报后,点击保存相册,可以保存 生成海报:插件wxa-plugin-canvas,此处使用页面异步生成组件方式,官网地址:wxa-plugin-canvas - npm 二维码:调用后端接口生成二维码 需要调用获取图片信息接口wx.getImageInfo(),获取到图片的宽高以做整体宽高配置 closePos

    2024年03月21日
    浏览(81)
  • 微信小程序 api+前端实现生成分享海报

    1.先看效果图,点击分享海报按钮,然后弹出分享海报  2.前端代码 这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址 https://github.com/kuckboy1994/mp_canvas_drawer 把 components 中的 canvasdrawer 拷贝到自己项目下,然后再app.json中引用就行了,如下 \\\"usingCompon

    2024年02月09日
    浏览(51)
  • uniapp微信小程序生成分享海报(模板自取)

    uniapp微信小程序生成分享海报模板 1、模板自取 2、可自行按需求更改调整 3、效果图如下: 生成前  ----- 生成后的图 需知: 博主的实现效果是先把需要生成的图片排版成静态页面,再点击生成海报-----通过canvas生成海报!!!            不需要这样效果话可以省略第一步

    2024年02月14日
    浏览(54)
  • 微信小程序插件 painter 生成海报、二维码

    GitHub 地址:https://github.com/Kujiale-Mobile/Painter 一、引入 将 components/painter 整个文件放到自己项目的 components 中;以组件的形式在页面的 json 文件中引入; 二、使用 3、注意 1、使用网络图片的时候需要在小程序后台配置 request、uploadFile、downloadFile 合法域名,否则线上版本不显示

    2024年02月15日
    浏览(49)
  • 微信小程序使用canvas生成分享海报功能复盘

    近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理。但是由于小程序不具备传统意义的dom元素,所以也没有办法采用此类工具。 所以就只能一笔一笔的用 canvas 画出来了,下面对实现这个功能中遇到的问题做一

    2024年02月16日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包