E企盈营销工具技术服务商 热线:4006-838-530

微信小程序绘制图片,发送朋友圈

E企盈直播平台营销卖货系统

这种生成图片的效果是很常见的,实现起来也不难,跟原生js的差不多。需要注意的就是canvas标签上不要加太多的css,后果呢就是导致canvas不显示,还有呢就是canvas组件的优先级是最高的,所以会覆盖掉下面的所有内容,解决方法呢就是使用:使用上面这两个组件是可以盖在canvas上面的。注意:canvas绘制不支持网络图片,需要将网络图片保存成本地图片 onLoad: function(options) {        var grade = options.grade;        this.setData({            grade: grade        })        this.loading();    },    //检测,网络图片是否下载完成    loading: function() {        var _this = this;        wx.showLoading({            title: ‘生成中…’,        })        timer = setInterval(function() {            var avatarUrl = _this.data.avatarUrl;            var qc_code = _this.data.qc_code;            if (avatarUrl != null && qc_code != null) {                wx.hideLoading();                clearInterval(timer);                _this.draw();            }        }, 500)    },    //保存到相册    saveImage: function() {        var imagePath = this.data.imagePath;        wx.saveImageToPhotosAlbum({            filePath: imagePath,            success: function(res) {                console.log(res)            },            fail: function(res) {                console.log(res)            }        })    },    //将用户头像下载为本地路径    downImage: function(img) {        var _this = this;        wx.getImageInfo({            src: img,            success: function(res) {                console.log(res.path)                _this.setData({                    avatarUrl: res.path                })            }        })    },    //下载小程序二维码    downImage2: function (img) {        var _this = this;        wx.getImageInfo({            src: img,            success: function (res) {                console.log(res.path)                _this.setData({                    qc_code: res.path                })            }        })    },    //生成canvas图片    draw: function() {        var _this = this;        var context = wx.createCanvasContext(‘firstCanvas’);        var userInfo = wx.getStorageSync(‘userInfo’);        var award ;        // 性别        var gender = userInfo.gender;        //背景图片        var bg = ‘../../images/icon-cj.png’;        //得分        var grade = 0 ^ _this.data.grade;        var width;        var height;        if (grade >= 0 && grade <= 30) {            if(gender == 2){                award = ‘../../images/zbzxlp.png’;            }else{                award = ‘../../images/zbzxlg.png’;            }        }else if(grade >= 31 && grade <= 60){            if (gender == 2) {                award = ‘../../images/zklp.png’;            } else {                award = ‘../../images/zklg.png’;            }        } else if (grade >= 61 && grade <= 80){            if (gender == 2) {                award = ‘../../images/zmlp.png’;            } else {                award = ‘../../images/whlg.png’;            }        }else{            if (gender == 2) {                award = ‘../../images/wmlp.png’;            } else {                award = ‘../../images/wmlg.png’;            }        }           if (award == ‘../../images/zbzxlp.png’ || award == ‘../../images/zbzxlg.png’){            width = 156;            height= 25;        }else{            width = 103;            height = 25;        }           //二维码        var qc_code = _this.data.qc_code;        // 用户头像        var avatarUrl = _this.data.avatarUrl;        //获取设备的基本信息        wx.getSystemInfo({            success: function(res) {                //绘制背景图                context.drawImage(bg, 0, 0, 350, 468);                // 绘制奖项                context.drawImage(award,180 – (width / 2),212 – (height / 2),width,height);                //绘制二维码                context.drawImage(qc_code, 175 – (92 / 2), 385 – (108 / 2), 92, 107);                //绘制得分                context.setFontSize(28); //字体大小                context.fillStyle = ‘#4fc089’;                context.setTextAlign(‘center’)                context.fillText(grade, 177, 48)                // 绘制姓名                context.setFontSize(16);                context.fillStyle = ‘#000000’;                context.setTextAlign(‘center’)                context.fillText(userInfo.nickName, 167, 180);                // 绘制头像                context.drawImage(avatarUrl, 72, 157, 33, 33);                context.draw(false, function() {                    setTimeout(function() {                        wx.canvasToTempFilePath({                            width: 350,                            height: 468,                            destWidth: 700,                            destHeight: 936,                            canvasId: ‘firstCanvas’,                            success: function(res) {                                var tempFilePath = res.tempFilePath;                                console.log(“图片”+tempFilePath);                                _this.setData({                                    imagePath: tempFilePath,                                    isCanvas: true                                });                                _this.upload(tempFilePath);                            },                            fail: function(res) {                                console.log(res);                            }                        });                    }, 1000);                });            },        })    },因为我的项目需要,我上面做个很多判断,那些东西不需要管,重点就是,绘制图片drawimage方法 和绘制文字的方法,我的绘制方法是让他们根据canvas上的一个坐标点居中绘制的,这个可以看一下。还有就是,生成图片的尺寸要比画的尺寸大一倍,这样图片不会失真,比较清楚,也就是这个方法:wx.canvasToTempFilePath() 前两个参数是canvas的大小,然后是生成图片的大小,canvas的ID

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序绘制图片,发送朋友圈
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏