相思资源网 Design By www.200059.com
本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码，供大家参考，具体内容如下
这种生成图片的效果是很常见的，实现起来也不难，跟原生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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序绘制图片发送朋友圈的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/9/21
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。