小程序生成海报

最新推荐文章于 2025-02-19 08:00:00 发布

不知名鸽子

最新推荐文章于 2025-02-19 08:00:00 发布

阅读量427

点赞数 3

文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_45449046/article/details/127224860

版权

注意canvas上面的type=‘2d’

 	<view bindtap="share">点击生成图片</view>
	<canvas class="canvas-exp" type="2d" id="myCanvas" style="width: 750px;height: 493px;border: 1px solid red;"></canvas>
    <view hidden='{{previewHidden}}' class='preview' bindtap="yincang">
        <image src='{{preurl}}' mode='widthFix' class='previewImg' ></image>
        <button bindtap='eventSave' class="btnSave">保存到相册</button>
    </view>

第一步在onload中调用一下方法，canvas画出一个背景图片，在背景图片上加入文字

// An highlighted block
	drawCanvas() {
        let _this = this
        wx.createSelectorQuery().select('#myCanvas').fields({
            node: true,
            size: true
        }).exec((res) => {
            // 获取设备设备像素比
            const dpr = wx.getSystemInfoSync().pixelRatio
            let textCanvas = res[0].node // 重点1
            textCanvas.width = res[0].width * dpr
            textCanvas.height = res[0].height * dpr

            let textCtx = textCanvas.getContext('2d') // 重点2
            /**至此，textCanvas，textCtx已经成功获取到，下面代码为绘图测试代码可忽略**/
            this.setData({
                textCanvas: textCanvas
            })

            //canvas字体自适应
            let xs = wx.getSystemInfoSync().windowWidth / 750

            textCtx.clearRect(0, 0, textCanvas._width, textCanvas._height)
            textCtx.beginPath();
            textCtx.scale(dpr, dpr)

            const bg = textCanvas.createImage()
            bg.src = 'https://6f63-ocr-cf7zl-1302451745.tcb.qcloud.la/zhengshuzhaopian.png?sign=e5b60763e29ee49dfa4a46c80a9c0288&t=1664504332'
            bg.onload = () => {
                textCtx.drawImage(bg, textCanvas._width * 0.02, 0, textCanvas._width * 0.95, textCanvas._height)

                textCtx.save()
                textCtx.font = `normal normal ${14*xs}px SourceHanSerifCN`;
                textCtx.fillStyle = '#000000';

                textCtx.fillText(_this.data.zsXinxi[0].studentName, textCanvas._width * 0.22, textCanvas._height * 0.44);
                textCtx.fillText(_this.data.zsXinxi[0].sex, textCanvas._width * 0.37, textCanvas._height * 0.44);
                textCtx.fillText(_this.data.zsXinxi[0].identity, textCanvas._width * 0.24, textCanvas._height * 0.51);
                textCtx.fillText(_this.data.zsXinxi[0].certificateName, textCanvas._width * 0.24, textCanvas._height * 0.576);
                textCtx.fillText("2022-09-30", textCanvas._width * 0.24, textCanvas._height * 0.64);
                textCtx.fillText("2022", textCanvas._width * 0.705, textCanvas._height * 0.23);
                textCtx.fillText("3", textCanvas._width * 0.77, textCanvas._height * 0.23);
                textCtx.fillText("2022", textCanvas._width * 0.74, textCanvas._height * 0.81);
                textCtx.fillText("9", textCanvas._width * 0.81, textCanvas._height * 0.81);

                textCtx.restore();

                console.log('//')

            }
        })
    },

第二步将画出的生成为图片

	share: function () {
        var that = this
        wx.showLoading({
            title: '努力生成中...'
        })
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: this.data.textCanvas._width,//像素比
            height: this.data.textCanvas._height,
            destWidth: this.data.textCanvas.width*2,
            destHeight: this.data.textCanvas.height*2,
            canvas: this.data.textCanvas,//---------重点（是画布中textCanvas）
            fileType: 'jpg',
            quality: 1,
            success: function (res) {
                that.setData({
                    preurl: res.tempFilePath,
                    previewHidden: false,
                })
                wx.hideLoading()
                console.log("保存图片到相册", res);
            },
            fail(e) {
                wx.hideLoading()
                console.log("失败", e)
            }
        })
    },

第三步将图片保存在系统相册

	eventSave() {
        let that = this
        wx.saveImageToPhotosAlbum({ //保存图片到相册
            filePath: this.data.preurl,
            success: function () {
                wx.hideLoading()
                wx.showToast({
                    title: "保存图片成功！",
                    duration: 2000
                })
                that.setData({
                    previewHidden: true,
                })
            },
            fail() {
                wx.showToast({
                    title: "保存失败！",
                    icon: 'none',
                    duration: 2000
                })
                wx.hideLoading()
            }
        })

    },