商城网站建设类电商软件及服务提供商--HiShop海商,欢迎您!

注册有礼

微信小程序海报

相关文章

Hi商学院为您提供丰富、全面的,当下热门的微信小程序海报相关新闻资讯和知识,让您第一时间了解微信小程序海报更多热门信息。下面从多角度全面来讲解关于微信小程序海报的方面的内容。

  • 微信小程序制作海报并分享到朋友圈如何实现

    小程序制作海报可以通过一些小程序直接上传图片实现,这里小编为大家介绍如何通过小程序自己制作海报并分享到朋友圈呢?

    添加画布

    首先,在小程序里进行绘图操作需要用到<canvas>组件,那我们就先在我们的wxml代码中放入如下的<canvas>:

    <canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas>

    这样一来我们就有了一个600x900的绘图区域。然后,我们要开始写JS代码在这张画布上进行绘图操作。

    步骤1:绘制背景图

    通过观察《长城你造不造》合成的那张分享图,我们可以分析得出它的组成主要有以下3个部分:一张大的背景图,一段动态的文字(xxxx 喊你“一起来为修长城献砖”),以及一个小程序码图片。

    那么我们就先找一张图片来当做背景图,将它画到画布上去,代码大致如下:

    const wxGetImageInfo = promisify(wx.getImageInfo)

    wxGetImageInfo({

        src: 'https://some-domain/bg.png'

    }).then(res => {

        const ctx = wx.createCanvasContext('shareCanvas')

        ctx.drawImage(res.path, 0, 0, 600, 900)

        ctx.draw()

    })

    在这段代码中,我们通过使用wx.getImageInfo这个API来下载一个网络图片到本地(并可获取该图片的尺寸等其他信息),然后调用ctx.drawImage方法将图片绘制到画布上,填满画布。

    步骤2:绘制文字

    接着,让我们来在画布上继续绘制一段文字,一般这种宣传用的分享图,少不了文字描述,而且可能是根据场景内容不同而产生的动态信息,比如可能是一篇文章的作者、文章的标题和内容。

    我们尝试下在画布上添加一段居中显示的文字:“作者:一斤代码”,还是基于前面的那段代码接着写:

    const wxGetImageInfo = promisify(wx.getImageInfo)

    wxGetImageInfo({

        src: 'https://some-domain/bg.png'

    }).then(res => {

        const ctx = wx.createCanvasContext('shareCanvas')

        

        // 底图

        ctx.drawImage(res.path, 0, 0, 600, 900)

        // 作者名称

        ctx.setTextAlign('center')    // 文字居中

        ctx.setFillStyle('#000000')  // 文字颜色:黑色

        ctx.setFontSize(22)         // 文字字号:22px

        ctx.fillText(“作者:一斤代码”, 600 / 2, 500)

        

        ctx.stroke()

        ctx.draw()

    })

    由于在canvas上绘制文字不会自动折行,如果要画一段比较长的文本,可以考虑限制一行的字数,将长文本拆分成几行来画。

    步骤3:绘制小程序码

    最后,我们在画布最后添加一个小程序码,可以是静态的小程序码,也可以是比如为每一篇文章动态生成的小程序码(参考《微信小程序之生成自定义参数小程序二维码》这篇文章),反正这个小程序码也就是一张图片,所以绘制方法跟绘制底图差不多。最后的代码类似如此:

    const wxGetImageInfo = promisify(wx.getImageInfo)

    Promise.all([

        wxGetImageInfo({

            src: 'https://some-domain.com/background.png'

        }),

        wxGetImageInfo({

            src: 'https://some-domain.com/api/generate/qrcode'

        })

    ]).then(res => {

        const ctx = wx.createCanvasContext('shareCanvas')

        

        // 底图

        ctx.drawImage(res[0].path, 0, 0, 600, 900)

        // 作者名称

        ctx.setTextAlign('center')    // 文字居中

        ctx.setFillStyle('#000000')  // 文字颜色:黑色

        ctx.setFontSize(22)         // 文字字号:22px

        ctx.fillText(“作者:一斤代码”, 600 / 2, 500)

        // 小程序码

        const qrImgSize = 180

        ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)

        ctx.stroke()

        ctx.draw()

    })

    这样,差不多我们的分享图就生成好了。

    保存到系统相册

    接着,我们要把它保存进用户的系统相册中去,实现这个功能,我们主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个API。

    主要的流程就是先通过wx.canvasToTempFilePath将<canvas>上绘制的图像生成临时文件的形式,然后再通过wx.saveImageToPhotosAlbum进行保存到系统相册的操作。

    const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)

    const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)

    wxCanvasToTempFilePath({

        canvasId: 'shareCanvas'

    }, this).then(res => {

        return wxSaveImageToPhotosAlbum({

            filePath: res.tempFilePath

        })

    }).then(res => {

        wx.showToast({

            title: '已保存到相册'

        })

    })

    其中promise.util.js如下:

    [javascript] view plain copy

    /** 

     * 将wx的callback形式的API转换成支持Promise的形式 

     */  

    module.exports = {  

      

      promisify: api => {  

        return (options, ...params) => {  

          return new Promise((resolve, reject) => {  

            const extras = {  

              success: resolve,  

              fail: reject  

            }  

            api({ ...options, ...extras }, ...params)  

          })  

        }  

      }  

      

    ...
  • 微信小程序免费生成海报三秒即可分享

    导读:腾讯官方发布了一款名叫vgo微海报的小程序,使用者可一键生成自己需要的海报模板,再也不用担心自己的PS技术了。...

    猜你喜欢:


  • vgo微海报小程序入口,vgo微海报小程序二维码

    导读:vgo微海报小程序,免费的海报生成工具,最便捷的海报制作小程序。我们提供丰富的模板,你可以独立完成邀请函、招聘、双12、圣诞、新年、红包、促销等海报创意设计制作。...

    猜你喜欢:


  • 小程序生成海报保存分享图片完全指南

    导读:在我们分享小程序时,会有一个图片式的海报,这种功能显示是如何显示的,下面小编为大家解答小程序生成海报保存分享图片完全指南...

    猜你喜欢:


  • 淘宝店铺海报是什么?又有什么作用?

    导读:淘宝店铺海报是什么 ?随着淘宝走进千家万户越来越多的人开始加入淘宝,成为一名淘宝店主,然而作为一名淘宝店主首先你要去装修你的淘宝店,对于淘宝店的装修淘宝店铺海报是非...

    猜你喜欢:


  • 本本海报小程序入口,本本海报小程序二维码

    导读:本本海报,随时可以下载你喜欢的美图。...

    猜你喜欢:


  • 小程序导出朋友圈海报详细记录

    导读:小程序提供了转发给好友的接口,但是没提供分享到朋友圈的接口。于是,只有引导用户保存图片分享到朋友圈。...

    猜你喜欢:


    共1页/7条