欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序使用canvas畫圖保存圖片到手機相冊代碼示例

 更新時間：2024年09月16日 10:13:15   作者：巖巖很哇塞！  
在微信小程序中利用canvas?API繪制圖形后,可通過CanvasContext.draw方法將圖形渲染到畫布,并使用wx.canvasToTempFilePath將畫布導出為圖片,再通過wx.saveImageToPhotosAlbum方法保存到手機相冊,,需要的朋友可以參考下

微信小程序要實現(xiàn)使用canvas繪制一個圖，然后保存到手機相冊

**最終效果：**實現(xiàn)生成以下圖片

一、初始化canvas

// wxml頁面設置canvas標簽
<canvas style="width: {{windowW}}px; height: {{windowH}}px;" disable-scroll='true' canvas-id="myCanvas" wx:if="{{showCanvas}}"></canvas>

// js頁面初始化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

// 繪制一個準考證并下載到手機相冊
getsaves(){
    var that = this;
    let rat = 3;
    that.data.ctx.setFontSize(8*rat);
    that.data.ctx.setFillStyle('#080808');
    that.data.ctx.fillText('山東省第六屆中小學生作文大賽決賽', 28*rat, 29*rat);
    that.data.ctx.setFontSize(8*rat);
    that.data.ctx.fillText('準考證', 81*rat, 59*rat);
    that.data.ctx.setFontSize(6*rat);
    that.data.ctx.fillText('考試時間：' + '10月18日(周五)上午9:00-11:00', 35*rat, 78*rat);
    that.data.ctx.fillText('考試地點：山東師范大學附屬小學', 35*rat, 93*rat);
    that.data.ctx.fillText('濟南市歷下區(qū)山師北街1號', 66*rat, 104*rat);
    // that.data.ctx.fillText(that.data.details.cityName=='濟南市'?'考試地點：山東師范大學附屬小學':'考試地點：臨沂商城實驗學校', 26*rat, 93*rat);
    // that.data.ctx.fillText(that.data.details.cityName=='濟南市'?'濟南市歷下區(qū)山師北街1號':'臨沂市蘭山區(qū)蘭山街道工業(yè)大道59號', 56*rat, 104*rat);
    
    that.data.ctx.setFillStyle('#444444');
    that.data.ctx.fillText('準考證號', 43*rat, 128*rat);
    that.data.ctx.fillText('考生姓名', 43*rat, 144*rat);
    that.data.ctx.fillText('考生學校', 43*rat, 160*rat);
    that.data.ctx.fillText('考生組別', 43*rat, 176*rat);
    that.data.ctx.fillText('考場號', 43*rat, 192*rat);
    that.data.ctx.fillText('座位號', 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ū)學校', 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('請妥善保管，憑有效身份證件（身份證、戶口本、護照、', 35*rat, 226*rat);
    that.data.ctx.fillText('社?？?、學生證等）入場考試。', 35*rat, 238*rat);

    that.data.ctx.setFontSize(8*rat);
    that.data.ctx.fillText('考生守則', 255*rat, 29*rat);

    const text1 = '     一、考生必須自覺服從監(jiān)考員等考試工作人員管理，不得以任何理由妨礙監(jiān)考員等考試工作人員履行職責，不得擾亂考場及其他考試工作地點的秩序。二、考生憑準考證、身份證（學生證、戶口簿）按規(guī)定時間、地點參加考試。三、考生人場，除書寫用0.5mm黑色簽字筆外，其他任何物品不準帶入考場。嚴禁攜帶各種通訊工具（如無線耳機、移動電話及其他無線接收、傳送設備等）、手表、電子存儲記憶錄放設備以及涂改液、修正帶等物品進人考場?？紙鰞?nèi)不得自行傳遞文具、用品等。四、考生入場后，對號入座，將準考證等證件放在課桌左上角以便核驗，考生領到答題和試卷后，應檢查答題卡和試卷是否有重印、漏印、字跡不清等印刷質量問題或缺頁現(xiàn)象，如有，請立即舉手報告，否則在開考一段時間后，考生如發(fā)現(xiàn)上述問題，由此延誤的考試時不予彌補?？忌鷳谥付ㄎ恢煤鸵?guī)定的時間內(nèi)準確清楚地填寫畢業(yè)學校、姓名準考證號、座號等欄目。五、開考信號發(fā)出后才能開始答題。六、開考15 分鐘后不準人場。七、在考場內(nèi)須保持安靜，不準喧嘩，不準交頭接耳、左顧右盼，不準將試題、草稿紙帶出考場。八、考試終了信號發(fā)出后，考生應立即停止答卷，并按試題、草稿紙自下而上的順序排放好，坐在座位上，等候考員查收，無誤后，根據(jù)監(jiān)考員指令依次離開考場。九、如不遵守考場紀律，不服從考試工作人員管理，有違紀、作弊等行為的，將按照《國家教育考試違規(guī)處理辦法》進行處理。';
    that.drawText(that.data.ctx, text1, 185*rat, 49*rat, 30*rat,165*rat); // 假設每行的最大寬度為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); //描述路徑的起點為手指觸摸的x軸和y軸
    that.data.ctx.lineTo(162*rat, 133*rat); //繪制一條直線，終點坐標為手指觸摸結束后的x軸和y軸
    that.data.ctx.moveTo(35*rat, 149*rat); //描述路徑的起點為手指觸摸的x軸和y軸
    that.data.ctx.lineTo(162*rat, 149*rat); //繪制一條直線，終點坐標為手指觸摸結束后的x軸和y軸
    that.data.ctx.moveTo(35*rat, 165*rat); //描述路徑的起點為手指觸摸的x軸和y軸
    that.data.ctx.lineTo(162*rat, 165*rat); //繪制一條直線，終點坐標為手指觸摸結束后的x軸和y軸
    that.data.ctx.moveTo(35*rat, 181*rat); //描述路徑的起點為手指觸摸的x軸和y軸
    that.data.ctx.lineTo(162*rat, 181*rat); //繪制一條直線，終點坐標為手指觸摸結束后的x軸和y軸
    that.data.ctx.moveTo(35*rat, 197*rat); //描述路徑的起點為手指觸摸的x軸和y軸
    that.data.ctx.lineTo(162*rat, 197*rat); //繪制一條直線，終點坐標為手指觸摸結束后的x軸和y軸
    that.data.ctx.moveTo(73*rat,118*rat);
    that.data.ctx.lineTo(73*rat, 214*rat); // 繪制一條直線到終點
    that.data.ctx.stroke();

    
    that.data.ctx.draw(true, function () {
      that.daochu();
    });
},

三、封裝文字換行縮進

// 由于右側文字較多，需要縮進和自動換行
drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
    ctx.setFontSize(16);
    let lineWidth = 0;
    let lastSubStrIndex = 0; // 每次開始截取的字符串的索引
    const indentWidth = 20; // 定義縮進寬度
    let shouldIndent = false; // 是否需要縮進
    for (let i = 0; i < str.length; i++) {
      const charWidth = ctx.measureText(str[i]).width;
      lineWidth += charWidth;
  
      // 檢查是否需要換行
      if (lineWidth > canvasWidth - indentWidth || str[i] === '。') {
        // 處理當前行文本
        let lineText = str.substring(lastSubStrIndex, i + 1);
        if (shouldIndent) {
          lineText = ' '.repeat(indentWidth / ctx.measureText(' ').width) + lineText;
          shouldIndent = false; // 只在句號后的一行縮進
        }
        ctx.fillText(lineText, leftWidth, initHeight); // 繪制文本
        initHeight += 22; // 16為字體的高度
        lineWidth = 0; // 新行開始時寬度為0
        lastSubStrIndex = i + 1; // 更新開始截取的索引
  
        // 如果遇到句號，設置需要縮進的標志
        if (str[i] === '。') {
          shouldIndent = true;
        }
        // 更新leftWidth并考慮縮進
        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);
    }
    // 標題border-bottom 線距頂部距離
    titleHeight += 10;
    return titleHeight;
},

總結 

到此這篇關于微信小程序使用canvas畫圖保存圖片到手機相冊的文章就介紹到這了,更多相關微信小程序canvas畫圖保存圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論