微信小程序Canvas使用方法

一、需求

1.导入一张图片到画布中；

2.添加一些文字到画布中；

3.导出含有图片和文字的图片。

二、主要使用到的一些方法

1.wx.createCanvasContext();  //创建画布对象

2.wx.chooseImage(); //选择本地图片

3.createCanvas.drawImage(); //将图片加入画布

4.createCanvas.fillText(); //在画布中添加文字

5.wx.canvasToTempFilePath(); //将画布合成图片

6.wx.savaImageToPhotosAlbum(); //将图片保存到本地相册

三、代码部分

1.wxml文件

<button type="primary" bindtap="addImage">加入图片</button>

<view class="viewCanvs">

<canvas canvas-id="firstCanvs">

</canvas>

</view>

<button type="primary" bindtap="saveImage" class="saveImage">下载图片</button>

2.js文件

const createCanvas = wx.createCanvasContext(' firstCanvs ')

Page({ 

    data:{

        imagePath:' ',

        screenWidth:' ',

        screenHight:' '

    }，

    onLoad:function(){

        wx.getSystemInfo({

            success:(res) => {

                this.setData({

                    screenWidth:res.screenWidth,

                    screenHight:res.screenHeight

                })

            }

        })

    },

    addImage:function(){

        var x = this

        wx.chooseImage({

            count:1,

            sizeType:'compressed',

            sourceType:'albm',

            success:(result) => {

                 createCanvas.drawImage(result.tempFilePaths[0],0,0,x.data.screenWidth*300/375,x.data.screenHight*400/812), // 300、400是设置的图片在画布中的大小，375、812是开发工具中的机型的屏幕宽、高，这样设置可以确保在其他机型中也可以保持图片在画布中固定的比例大小

                 createCanvas.setFontSize(20);

                 createCanvas.setFillStyle('black');

                 createCanvas.fillText('text',x.data.screenWidth*15/375,x.data.screenHight*460/812);  //文字在画布中的定位

                 wx.showToast({

                    title:'图片生产中...',

                    icon:'loading',

                    duration:2000

                     }),

                  createCanvas.draw(true,setTimeout(function(){canvasId:'firstCanvs',quality:1,success:(result)=>    {x.setData({imagePath:result.tempFilePath,})

    }

})

},2000))

}

})

saveImage:function(){

    wx.saveImageToPhotosAlbum({

        filePath:this.data.imagePath,

        success:(result)=>{

            wx.showToast({

                title:'图片保存成功',

                icon:'success',

                duration:1500,

                })

            }

        })

    },

}