微信小程序繪制圖片發(fā)送朋友圈
本文實(shí)例為大家分享了微信小程序繪制圖片發(fā)送朋友圈的具體代碼,供大家參考,具體內(nèi)容如下
這種生成圖片的效果是很常見(jiàn)的,實(shí)現(xiàn)起來(lái)也不難,跟原生js的差不多。需要注意的就是canvas標(biāo)簽上不要加太多的css,后果呢就是導(dǎo)致canvas不顯示,還有呢就是canvas組件的優(yōu)先級(jí)是最高的,所以會(huì)覆蓋掉下面的所有內(nèi)容,解決方法呢就是使用:
使用上面這兩個(gè)組件是可以蓋在canvas上面的。
注意:canvas繪制不支持網(wǎng)絡(luò)圖片,需要將網(wǎng)絡(luò)圖片保存成本地圖片
onLoad: function(options) { var grade = options.grade; this.setData({ grade: grade }) this.loading(); }, //檢測(cè),網(wǎng)絡(luò)圖片是否下載完成 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) }, //保存到相冊(cè) 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; //獲取設(shè)備的基本信息 wx.getSystemInfo({ success: function(res) { //繪制背景圖 context.drawImage(bg, 0, 0, 350, 468); // 繪制獎(jiǎng)項(xiàng) 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); }); }, }) },
因?yàn)槲业捻?xiàng)目需要,我上面做個(gè)很多判斷,那些東西不需要管,重點(diǎn)就是,繪制圖片drawimage方法 和繪制文字的方法,我的繪制方法是讓他們根據(jù)canvas上的一個(gè)坐標(biāo)點(diǎn)居中繪制的,這個(gè)可以看一下。
還有就是,生成圖片的尺寸要比畫(huà)的尺寸大一倍,這樣圖片不會(huì)失真,比較清楚,也就是這個(gè)方法:
wx.canvasToTempFilePath() 前兩個(gè)參數(shù)是canvas的大小,然后是生成圖片的大小,canvas的ID
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11javascript 動(dòng)態(tài)修改樣式和層疊樣式表代碼
javascript 動(dòng)態(tài)修改樣式和層疊樣式表代碼,需要的朋友可以參考下。2010-04-04利用JavaScript差集實(shí)現(xiàn)一個(gè)對(duì)比小工具
這篇文章主要給大家介紹了關(guān)于利用JavaScript差集實(shí)現(xiàn)一個(gè)對(duì)比小工具的相關(guān)資料,雖然實(shí)現(xiàn)的界面不是太好看,但好在功能實(shí)用即可,需要的朋友可以參考下2021-07-07Webpack中使用環(huán)境變量的各種正確姿勢(shì)
我們?cè)陂_(kāi)發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景,區(qū)分開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境、測(cè)試環(huán)境,不同場(chǎng)景請(qǐng)求不同的接口Api,這時(shí)候項(xiàng)目中配置的「環(huán)境變量」就登場(chǎng)啦,這篇文章主要給大家介紹了關(guān)于Webpack中使用環(huán)境變量的各種正確姿勢(shì),需要的朋友可以參考下2021-09-09跟我學(xué)習(xí)JScript的Bug與內(nèi)存管理
跟我學(xué)習(xí)JScript的Bug與內(nèi)存管理,小編對(duì)JScript的Bug與內(nèi)存管理也不甚了解,所以整理了本篇文章,希望可以解決大家學(xué)習(xí)時(shí)的困擾。2015-11-11JavaScript學(xué)習(xí)筆記之?dāng)?shù)組的增、刪、改、查
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組的增、刪、改、查的相關(guān)資料,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06javascript陷阱 一不小心你就中招了(字符運(yùn)算)
看似簡(jiǎn)單的加法運(yùn)行,卻有很多問(wèn)題,一定要注意字符與數(shù)字的運(yùn)算,注意使用js的強(qiáng)制類型轉(zhuǎn)換,否則會(huì)出現(xiàn)很多問(wèn)題。我們?cè)诰帉?xiě)js的過(guò)程中,最好通過(guò)alert逐行測(cè)試2013-11-11