微信小程序生成圖片分享朋友圈

一、實現邏輯

  • 使用wx.downloadFile()獲取圖片的路徑(wx.getImageInfo這個api也可以獲取圖片路徑)
  • 使用canvas的api畫出文字與圖片
  • 用canvasToImage()生成用canvas畫出來的圖片
  • 用wx.saveImageToPhotosAlbum保存圖片到手機

二、期間遇到的問題

  • canvas無法使用rpx作為單位做適配,所以要動態獲取手機屏幕的寬度
  • 把整個生成圖片的功能封裝成自定義組件時wx.canvasToTempFilePath()與wx.createCanvasContext()這兩個api需要傳去第二個this參數,不然獲取不到canvasId
  • 使用wx.canvasToTempFilePath()生成圖片的畫質很模糊,只需要把destWidth,destHeight這兩個參數的值是生成圖片的寬高的4倍即可

三、代碼實現

  1. wxml代碼
<view class="canvas-box">
    <canvas 
        class="canvas" 
        canvas-id="shareImg"
        style="width: {{width}}px; height: {{height}}px;z-index: 100;">
    </canvas>
</view>
    
<view class="btn-box">
    <view bindtap="saveImageToLocal">
        <view>保存海報</view>
    </view>
</view>
  1. 動態獲取屏幕寬度,獲取自適應單位(ui圖以ipone6為標準)
    //獲取屏幕寬度,獲取自適應單位
    wx.getSystemInfo({
        success: function(res) {
            var num = (res.windowWidth/375).toFixed(2)
            this.setData({rpx: num})
        }
    })
    var rpx = _this.data.rpx
    //給寬高賦值
    this.setData({height: rpx*350})
    this.setData({width: rpx*250})
    this.setData({leftWidth: rpx*60})
    this.setData({topHeight: rpx*110})
  1. 下載圖片
    //獲取二維碼圖片
    wx.downloadFile({
        url: url,
        success (res) {
            _this.setData({tempFilePath: res.tempFilePath})
        },
        fail (err) {
            console.log(err,'err')
        }
    })

4.用canvas畫圖

    //在自定義組件中使用canvas,獲取wx.createCanvasContext第二個參數必須傳入this,不然獲取不到
    const ctx = wx.createCanvasContext('shareImg',_this);
    //繪制一個白色矩形
    ctx.setFillStyle('#fff');
    ctx.fillRect(0, 0, _this.data.width, _this.data.height); 
    //繪制背景圖
    ctx.drawImage(
        _this.data.wxBgImg,  //背景圖
        0,  //目標圖片在畫布中x坐標
        0,  //目標圖片在畫布中y坐標
        _this.data.width,  //目標圖片寬
        250*rpx  //目標圖片高
    );
    
    // 繪制想要的文字
    ctx.setFontSize(16);
    ctx.setFillStyle('black');
    ctx.fillText('請掃碼購買', 70*rpx, 300*rpx);
    ctx.stroke();
    // 畫(前面都是準備,這才是畫的那一步)
    ctx.draw(false,_this.canvasToImage());
  1. 生成canvas畫出來的圖片
        //畫二維碼
        canvasToImage: function () {
            var _this = this;
            base.hideLoading()
            //這里必須加一個定時器,不然會生成圖片失敗
            setTimeout(() => {
                wx.canvasToTempFilePath({
                    canvasId: 'shareImg',
                    width: _this.data.width,
                    height: _this.data.height,
                    destWidth: _this.data.width*4,//輸出的圖片的寬度是畫布區域的寬度的4倍
                    destHeight: _this.data.height*4,//輸出的圖片的高度是畫布區域的高度的4倍
                    success: res => {
                        console.log(res,'畫二維碼====成功')
                        _this.setData({
                            resultImage: res.tempFilePath
                        });
            
                    },
                    fail: (err) => {
                         console.log(err,"err==========")
                        wx.showToast({
                            title: '圖片生成失敗',
                            icon: 'success',
                            duration: 2000
                        });
                }
            },this);//在自定義組件中使用canvas,獲取wx.canvasToTempFilePath第二個參數必須傳入this,不然獲取不到
        }, 2000);
  1. 保存圖片
        //保存圖片
        saveImageToLocal() {
            wx.saveImageToPhotosAlbum({
                filePath: this.data.resultImage,
                    success: res => {
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                        });
                    },
                    fail() {
                        wx.showToast({
                            title: '保存失敗',
                            duration: 2000
                        });
                    }
            });
        },
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容