WeChat 미니 프로그램에서 이미지를 생성하는 코드

이 글의 내용은 WeChat 애플릿에서 이미지를 생성하는 코드에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

캔버스 추가

먼저 미니 프로그램에서 그리기 작업을 수행하려면 5ba626b379994d53f7acf72a64f9b697 구성 요소를 사용해야 합니다. 단계는 대략 다음 세 부분으로 나뉩니다: 큰 배경 이미지, 동적 텍스트('제목 사용자 이름 및 기타 정보') 및 작은 프로그램 코드 그림. 그런 다음 먼저 wxml 코드에 다음 5ba626b379994d53f7acf72a64f9b697을 넣습니다.

<!--wxml代码-->
<view style=&#39;width:100%;height:100%;&#39; bindlongpress=&#39;saveInviteCard&#39;>
  <canvas canvas-id="shareCanvas" style="width:{{windowWidth}}px;height:{{windowHeight}}px" ></canvas>
</view>

타사 기능 소개

const util = require('../../utils/util.js')

//util.js
var Promise = require('../components/bluebird.min.js')

module.exports = {
  promisify: api => {
    return (options, ...params) => {
      return new Promise((resolve, reject) => {
        const extras = {
          success: resolve,
          fail: reject
        }
        api({ ...options, ...extras }, ...params)
      })
    }
  }
}

bluebird.min.js 소스 파일 코드가 너무 길어서 이겼습니다. 여기에 복사하여 붙여넣지 마세요.

//获取手机宽高 
wx.getSystemInfo({
    success: function (res) {
      wc.put('phoneInfo', res)
    }
  });

var windowHeight = phoneInfo.windowHeight, windowWidth = phoneInfo.windowWidth
self.setData({
   windowHeight: windowHeight,
   windowWidth: windowWidth
 })

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

const wxGetImageInfo = util.promisify(wx.getImageInfo)
//绘制二维码
Promise.all([
      //背景图
      wxGetImageInfo({
        src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536213812443&di=753a0a49acfd390fba9fd7884daafa5c&imgtype=0&src=http%3A%2F%2Fi5.hexunimg.cn%2F2016-08-10%2F185422031.jpg'
      }),
      //二维码
      wxGetImageInfo({
        src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1898297765,3486952215&fm=26&gp=0.jpg'
      })
    ]).then(res => {
      console.log(res)
      if (res[0].errMsg == "getImageInfo:ok" && res[1].errMsg == "getImageInfo:ok"){
        const ctx = wx.createCanvasContext('shareCanvas')

        // 底图
        ctx.drawImage(res[0].path, 0, 0, windowWidth, windowHeight)

        //写入文字
        ctx.setTextAlign('center')    // 文字居中
        ctx.setFillStyle('#f3a721')  // 文字颜色：黑色
        ctx.setFontSize(22)         // 文字字号：22px
        ctx.fillText("作者：墜夢—Eric", windowWidth / 2, windowHeight / 2)

        // 小程序码
        const qrImgSize = 150
        ctx.drawImage(res[1].path, (windowWidth - qrImgSize) / 2, windowHeight / 1.8, qrImgSize, qrImgSize)

        ctx.stroke()
        ctx.draw()
      }else{
        wx.showToast({
          title: '邀请卡绘制失败!',
          image:'../../asset/images/warning.png'
        })
      }
 })

이렇게 해서 우리의 공유 사진이 거의 만들어졌습니다.

사진을 길게 눌러 시스템 앨범에 저장하세요

사용자의 시스템 앨범에 저장하고 이 기능을 구현하려면 주로 wx.canvasToTempFilePath 및 wx.saveImageToPhotosAlbum을 사용합니다. 이 두 가지 API입니다. wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个API。

主要的流程就是先通过wx.canvasToTempFilePath将5ba626b379994d53f7acf72a64f9b697上绘制的图像生成临时文件的形式，然后再通过wx.saveImageToPhotosAlbum

주요 프로세스는 먼저 wx.canvasToTempFilePath를 통해 <canvas></canvas>에 그려진 이미지에서 임시 파일을 생성한 다음 wx.saveImageToPhotosAlbum시스템 앨범에 저장하는 작업을 수행합니다. <p><pre class="brush:css;toolbar:false;"> //保存邀请卡 saveInviteCard:function(){ console.log(&amp;#39;保存图片&amp;#39;) const wxCanvasToTempFilePath = util.promisify(wx.canvasToTempFilePath) const wxSaveImageToPhotosAlbum = util.promisify(wx.saveImageToPhotosAlbum) wxCanvasToTempFilePath({ canvasId: &amp;#39;shareCanvas&amp;#39; }, this).then(res =&gt; { return wxSaveImageToPhotosAlbum({ filePath: res.tempFilePath }) }).then(res =&gt; { wx.showToast({ title: &amp;#39;已保存到相册&amp;#39; }) }) }</pre></p>관련 추천: <p><a href="http://www.php.cn/xiaochengxu-353365.html" target="_self"></a>WeChat Mini 프로그램 QR 코드 캔버스 그리기 예시에 대한 자세한 설명<br></p> <p><a href="http://www.php.cn/xiaochengxu-389004.html" target="_self"></a>WeChat Mini 프로그램 캔버스 기본에 대한 자세한 설명</p>🎜

위 내용은 WeChat 미니 프로그램에서 이미지를 생성하는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!