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

本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码,供大家参考,具体内容如下

这种生成图片的效果是很常见的,实现起来也不难,跟原生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

以上是 微信小程序绘制图片发送朋友圈 的全部内容, 来源链接: utcz.com/z/358667.html

回到顶部