微信小程序使用canvas畫圖保存圖片到手機(jī)相冊(cè)代碼示例
更新時(shí)間：2024年09月16日 10:13:15 作者：巖巖很哇塞！
在微信小程序中利用canvas?API繪制圖形后,可通過CanvasContext.draw方法將圖形渲染到畫布,并使用wx.canvasToTempFilePath將畫布導(dǎo)出為圖片,再通過wx.saveImageToPhotosAlbum方法保存到手機(jī)相冊(cè),,需要的朋友可以參考下
微信小程序要實(shí)現(xiàn)使用canvas繪制一個(gè)圖，然后保存到手機(jī)相冊(cè)
**最終效果：**實(shí)現(xiàn)生成以下圖片
一、初始化canvas
// wxml頁(yè)面設(shè)置canvas標(biāo)簽
<canvas style="width: {{windowW}}px; height: {{windowH}}px;" disable-scroll='true' canvas-id="myCanvas" wx:if="{{showCanvas}}"></canvas>
// js頁(yè)面初始化canvas
data: {
ctx: '',
details: '',
windowW: 375*3,
windowH: 265*3,
ratio:3,
showCanvas:false
},
onLoad(options) {
this.setData({
ctx: wx.createCanvasContext('myCanvas'),
showCanvas:true
})
},
二、繪制canvas
// 繪制一個(gè)準(zhǔn)考證并下載到手機(jī)相冊(cè)
getsaves(){
var that = this;
let rat = 3;
that.data.ctx.setFontSize(8*rat);
that.data.ctx.setFillStyle('#080808');
that.data.ctx.fillText('山東省第六屆中小學(xué)生作文大賽決賽', 28*rat, 29*rat);
that.data.ctx.setFontSize(8*rat);
that.data.ctx.fillText('準(zhǔn)考證', 81*rat, 59*rat);
that.data.ctx.setFontSize(6*rat);
that.data.ctx.fillText('考試時(shí)間：' + '10月18日(周五)上午9:00-11:00', 35*rat, 78*rat);
that.data.ctx.fillText('考試地點(diǎn)：山東師范大學(xué)附屬小學(xué)', 35*rat, 93*rat);
that.data.ctx.fillText('濟(jì)南市歷下區(qū)山師北街1號(hào)', 66*rat, 104*rat);
// that.data.ctx.fillText(that.data.details.cityName=='濟(jì)南市'?'考試地點(diǎn)：山東師范大學(xué)附屬小學(xué)':'考試地點(diǎn)：臨沂商城實(shí)驗(yàn)學(xué)校', 26*rat, 93*rat);
// that.data.ctx.fillText(that.data.details.cityName=='濟(jì)南市'?'濟(jì)南市歷下區(qū)山師北街1號(hào)':'臨沂市蘭山區(qū)蘭山街道工業(yè)大道59號(hào)', 56*rat, 104*rat);
that.data.ctx.setFillStyle('#444444');
that.data.ctx.fillText('準(zhǔn)考證號(hào)', 43*rat, 128*rat);
that.data.ctx.fillText('考生姓名', 43*rat, 144*rat);
that.data.ctx.fillText('考生學(xué)校', 43*rat, 160*rat);
that.data.ctx.fillText('考生組別', 43*rat, 176*rat);
that.data.ctx.fillText('考場(chǎng)號(hào)', 43*rat, 192*rat);
that.data.ctx.fillText('座位號(hào)', 43*rat, 208*rat);
that.data.ctx.setFillStyle('#000000');
that.data.ctx.fillText('2023005020340', 81*rat, 128*rat);
that.data.ctx.fillText('張三', 81*rat, 144*rat);
that.data.ctx.fillText('蔣莊礦區(qū)學(xué)校', 81*rat, 160*rat);
that.data.ctx.fillText('初中組', 81*rat, 176*rat);
that.data.ctx.fillText('--', 81*rat, 192*rat);
that.data.ctx.fillText('--', 81*rat, 208*rat);
that.data.ctx.setFillStyle('#080808');
that.data.ctx.setFontSize(5*rat);
that.data.ctx.fillText('請(qǐng)妥善保管，憑有效身份證件（身份證、戶口本、護(hù)照、', 35*rat, 226*rat);
that.data.ctx.fillText('社?？?、學(xué)生證等）入場(chǎng)考試。', 35*rat, 238*rat);
that.data.ctx.setFontSize(8*rat);
that.data.ctx.fillText('考生守則', 255*rat, 29*rat);
const text1 = ' 一、考生必須自覺服從監(jiān)考員等考試工作人員管理，不得以任何理由妨礙監(jiān)考員等考試工作人員履行職責(zé)，不得擾亂考場(chǎng)及其他考試工作地點(diǎn)的秩序。二、考生憑準(zhǔn)考證、身份證（學(xué)生證、戶口簿）按規(guī)定時(shí)間、地點(diǎn)參加考試。三、考生人場(chǎng)，除書寫用0.5mm黑色簽字筆外，其他任何物品不準(zhǔn)帶入考場(chǎng)。嚴(yán)禁攜帶各種通訊工具（如無線耳機(jī)、移動(dòng)電話及其他無線接收、傳送設(shè)備等）、手表、電子存儲(chǔ)記憶錄放設(shè)備以及涂改液、修正帶等物品進(jìn)人考場(chǎng)?？紙?chǎng)內(nèi)不得自行傳遞文具、用品等。四、考生入場(chǎng)后，對(duì)號(hào)入座，將準(zhǔn)考證等證件放在課桌左上角以便核驗(yàn)，考生領(lǐng)到答題和試卷后，應(yīng)檢查答題卡和試卷是否有重印、漏印、字跡不清等印刷質(zhì)量問題或缺頁(yè)現(xiàn)象，如有，請(qǐng)立即舉手報(bào)告，否則在開考一段時(shí)間后，考生如發(fā)現(xiàn)上述問題，由此延誤的考試時(shí)不予彌補(bǔ)?？忌鷳?yīng)在指定位置和規(guī)定的時(shí)間內(nèi)準(zhǔn)確清楚地填寫畢業(yè)學(xué)校、姓名準(zhǔn)考證號(hào)、座號(hào)等欄目。五、開考信號(hào)發(fā)出后才能開始答題。六、開考15 分鐘后不準(zhǔn)人場(chǎng)。七、在考場(chǎng)內(nèi)須保持安靜，不準(zhǔn)喧嘩，不準(zhǔn)交頭接耳、左顧右盼，不準(zhǔn)將試題、草稿紙帶出考場(chǎng)。八、考試終了信號(hào)發(fā)出后，考生應(yīng)立即停止答卷，并按試題、草稿紙自下而上的順序排放好，坐在座位上，等候考員查收，無誤后，根據(jù)監(jiān)考員指令依次離開考場(chǎng)。九、如不遵守考場(chǎng)紀(jì)律，不服從考試工作人員管理，有違紀(jì)、作弊等行為的，將按照《國(guó)家教育考試違規(guī)處理辦法》進(jìn)行處理。';
that.drawText(that.data.ctx, text1, 185*rat, 49*rat, 30*rat,165*rat); // 假設(shè)每行的最大寬度為300像素
that.data.ctx.setStrokeStyle("#646464");
that.data.ctx.setLineWidth(1);
that.data.ctx.rect(35*rat, 118*rat, 127*rat, 96*rat);
that.data.ctx.stroke()
that.data.ctx.beginPath(); //創(chuàng)建一條路徑
that.data.ctx.moveTo(35*rat, 133*rat); //描述路徑的起點(diǎn)為手指觸摸的x軸和y軸
that.data.ctx.lineTo(162*rat, 133*rat); //繪制一條直線，終點(diǎn)坐標(biāo)為手指觸摸結(jié)束后的x軸和y軸
that.data.ctx.moveTo(35*rat, 149*rat); //描述路徑的起點(diǎn)為手指觸摸的x軸和y軸
that.data.ctx.lineTo(162*rat, 149*rat); //繪制一條直線，終點(diǎn)坐標(biāo)為手指觸摸結(jié)束后的x軸和y軸
that.data.ctx.moveTo(35*rat, 165*rat); //描述路徑的起點(diǎn)為手指觸摸的x軸和y軸
that.data.ctx.lineTo(162*rat, 165*rat); //繪制一條直線，終點(diǎn)坐標(biāo)為手指觸摸結(jié)束后的x軸和y軸
that.data.ctx.moveTo(35*rat, 181*rat); //描述路徑的起點(diǎn)為手指觸摸的x軸和y軸
that.data.ctx.lineTo(162*rat, 181*rat); //繪制一條直線，終點(diǎn)坐標(biāo)為手指觸摸結(jié)束后的x軸和y軸
that.data.ctx.moveTo(35*rat, 197*rat); //描述路徑的起點(diǎn)為手指觸摸的x軸和y軸
that.data.ctx.lineTo(162*rat, 197*rat); //繪制一條直線，終點(diǎn)坐標(biāo)為手指觸摸結(jié)束后的x軸和y軸
that.data.ctx.moveTo(73*rat,118*rat);
that.data.ctx.lineTo(73*rat, 214*rat); // 繪制一條直線到終點(diǎn)
that.data.ctx.stroke();
that.data.ctx.draw(true, function () {
that.daochu();
});
},
三、封裝文字換行縮進(jìn)
// 由于右側(cè)文字較多，需要縮進(jìn)和自動(dòng)換行
drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
ctx.setFontSize(16);
let lineWidth = 0;
let lastSubStrIndex = 0; // 每次開始截取的字符串的索引
const indentWidth = 20; // 定義縮進(jìn)寬度
let shouldIndent = false; // 是否需要縮進(jìn)
for (let i = 0; i < str.length; i++) {
const charWidth = ctx.measureText(str[i]).width;
lineWidth += charWidth;
// 檢查是否需要換行
if (lineWidth > canvasWidth - indentWidth || str[i] === '。') {
// 處理當(dāng)前行文本
let lineText = str.substring(lastSubStrIndex, i + 1);
if (shouldIndent) {
lineText = ' '.repeat(indentWidth / ctx.measureText(' ').width) + lineText;
shouldIndent = false; // 只在句號(hào)后的一行縮進(jìn)
}
ctx.fillText(lineText, leftWidth, initHeight); // 繪制文本
initHeight += 22; // 16為字體的高度
lineWidth = 0; // 新行開始時(shí)寬度為0
lastSubStrIndex = i + 1; // 更新開始截取的索引
// 如果遇到句號(hào)，設(shè)置需要縮進(jìn)的標(biāo)志
if (str[i] === '。') {
shouldIndent = true;
}
// 更新leftWidth并考慮縮進(jìn)
leftWidth = leftWidth;
}
}
// 處理最后一行文本
if (lastSubStrIndex < str.length) {
let lineText = str.substring(lastSubStrIndex);
if (shouldIndent) {
lineText = ' '.repeat(indentWidth / ctx.measureText(' ').width) + lineText;
}
ctx.fillText(lineText, leftWidth, initHeight);
}
// 標(biāo)題border-bottom 線距頂部距離
titleHeight += 10;
return titleHeight;
},總結(jié)
到此這篇關(guān)于微信小程序使用canvas畫圖保存圖片到手機(jī)相冊(cè)的文章就介紹到這了,更多相關(guān)微信小程序canvas畫圖保存圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面的代碼就是判斷腳本之家是不是字符串類型的代碼2008-11-11
JavaScript判斷日期時(shí)間差的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了js判斷日期時(shí)間差的方法，文章給大家補(bǔ)充介紹了js求時(shí)間差的代碼，需要的朋友參考下吧2018-03-03
用javascript實(shí)現(xiàn)檢測(cè)指定目錄是否存在的方法
今天看到一篇關(guān)于onegreen被掛馬的代碼發(fā)現(xiàn)這個(gè)函數(shù)，它用js就可以檢測(cè)，制定的目錄或指定的文件是否存在，一般用來讀chm文件中的圖片來檢測(cè)，目錄的存在。高手就是不學(xué)好。2008-01-01
這篇文章主要介紹了js動(dòng)態(tài)生成唯一id的兩種方法,需要的朋友可以參考下2023-05-05
原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁(yè)面
這篇文章主要為大家詳細(xì)介紹了原生js驗(yàn)證簡(jiǎn)潔美觀注冊(cè)登錄頁(yè)面的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript開發(fā)者必備的10個(gè)Sublime Text插件
Sublime Text幾乎是任何開發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開發(fā)者必備的10個(gè)Sublime Text插件，感興趣的小伙伴們可以參考一下2016-02-02
PHP實(shí)現(xiàn)基于Redis的MessageQueue隊(duì)列封裝操作示例
這篇文章主要介紹了PHP實(shí)現(xiàn)基于Redis的MessageQueue隊(duì)列封裝操作,結(jié)合實(shí)例形式分析了Redis的PHP消息隊(duì)列封裝與使用相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解
這篇文章主要介紹了深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
值得分享和收藏的Bootstrap學(xué)習(xí)教程
這絕對(duì)是一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程，完整的知識(shí)體系，系統(tǒng)的學(xué)習(xí)資料，幫助大家開啟Bootstrap學(xué)習(xí)之旅，享受Bootstrap帶給大家的奇妙樂趣2016-05-05
如何利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能
Web Speech API使你能夠?qū)⒄Z(yǔ)音數(shù)據(jù)合并到Web應(yīng)用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于將指定文字合成為對(duì)應(yīng)的語(yǔ)音,這篇文章主要介紹了利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能,需要的朋友可以參考下2024-06-06