商城系統(tǒng) 注冊(cè)

微信小程序canvas圖片及文本適配

2020-09-27|HiShop
導(dǎo)讀:小程序中的繪圖一般是需要canvas來(lái)制作完成,那么如何合理利用小程序canvas進(jìn)行繪圖,并且圖片及文本適配呢。下面一一來(lái)解答。...

小程序中的繪圖一般是需要canvas來(lái)制作完成,那么如何合理利用小程序canvas進(jìn)行繪圖,并且圖片及文本適配呢。下面一一來(lái)解答。

 

場(chǎng)景需求

小程序目前不支持直接分享到朋友圈,所以對(duì)于有分享到朋友圈的需求,一般是生成一張圖片,例如,生成一張帶有小程序碼的圖片,用戶可以將這張圖片保存到手機(jī)本地,然后將這張圖片分享到朋友圈。這張圖片需要使用canvas畫(huà)出來(lái)。

今天我們不講怎么生成碼,這個(gè)一般是后端封裝一個(gè)API,前端通過(guò)調(diào)用API得到一個(gè)小程序碼的url,通過(guò)image去畫(huà)到canvas上,跟在canvas上畫(huà)一個(gè)image是一樣的邏輯。這篇文章主要是講怎么在canvas上適配圖片和文字,也就是怎么將圖片和文本畫(huà)到canvas上的正確的位置,能在不同的手機(jī)上都能正確的展示。

效果圖展示(以下圖片是在微信開(kāi)發(fā)者工具中顯示的) 
這里演示的Demo是: 
“選擇圖片”button選擇一張圖片,可以居中顯示在以下圖中的黃色區(qū)域,即canvas中,并在canvas的頂部居中展示文本“你若盛開(kāi),蝴蝶自來(lái)”。

微信小程序canvas圖片及文本適配

代碼說(shuō)明

wxml

 

  1. <button bindtap="chooseImg">選擇圖片</button>
  2. <view class="canvas-box">
  3. <canvas class="canvas" canvas-id="shareCanvas" bindlongtap="saveShareImage"></canvas>
  4. </view>

$3. scss(wxss)  這里我用的是scss去寫(xiě)樣式代碼,在webStorm中可以通過(guò)配置,將scss解析成wxss,至于具體怎么配置,可以自行百度。  PS1:這里定義了一個(gè)scss rpx function,是因?yàn)樵趙ebStrom中格式化代碼的時(shí)候會(huì)將數(shù)字和單位rpx中間添加一個(gè)空格,導(dǎo)致編譯報(bào)錯(cuò),所以用一個(gè)function去處理  PS2:樣式說(shuō)明(設(shè)計(jì)稿是基于iphone6視覺(jué)稿標(biāo)準(zhǔn)):  button寬高:700rpx * 92rpx (350px * 46px)  包裹c(diǎn)anvas的容器的view(.canvas-box)position:fixed,占據(jù)除頂部button的高度之外,填滿剩余全部空間,canvas居中顯示,寬高:700rpx, 100%

 

  1. @function rpx($value) {
  2. @return $value*1rpx;
  3. }
  4.  
  5. page {
  6. background-color: #fff6f6;
  7. button {
  8. width: rpx(700);
  9. height: rpx(92);
  10. background-color: #ffddab !important;
  11. }
  12. .canvas-box {
  13. position: fixed;
  14. top: rpx(92);
  15. left: 0;
  16. right: 0;
  17. bottom: 0;
  18. canvas {
  19. position: absolute;
  20. width: rpx(700);
  21. height: 100%;
  22. top: 50%;
  23. left: 50%;
  24. transform: translate(-50%, -50%);
  25. }
  26. }
  27. }

$4. js  1、在data中定義三個(gè)變量

 

  1. data: {
  2. windowWidth: 0, // 可使用窗口寬度
  3. windowHeight: 0, // 可使用窗口高度
  4. ratio: 0 // 根據(jù)尺寸動(dòng)態(tài)計(jì)算 1px換算成多少rpx
  5. }

2、通過(guò)wx.getSystemInfo獲得系統(tǒng)信息,并且計(jì)算ratio

 

  1. onReady: function (e) {
  2. // 獲取系統(tǒng)信息
  3. wx.getSystemInfo({
  4. success: res => {
  5. console.log(res);
  6. this.setData({
  7. windowWidth: res.windowWidth,
  8. windowHeight: res.windowHeight,
  9. });
  10. this.setData({
  11. // 屏幕寬度 375px = 750rpx,1px=2rpx
  12. // 1px = (750 / 屏幕寬度)rpx;
  13. // 1rpx = (屏幕寬度 / 750)px;
  14. ratio: 750 / this.data.windowWidth
  15. });
  16. }
  17. });
  18. },

3、button的觸發(fā)事件chooseImg,通過(guò)wx.chooseImage選擇圖片,通過(guò)wx.getImageInfo獲取選擇的圖片的大小

 

  1. chooseImg: function () {
  2. wx.chooseImage({
  3. count: 1,
  4. success: res => {
  5. let imgUrl = res.tempFilePaths[0];
  6. // 獲取圖片大小
  7. wx.getImageInfo({
  8. src: imgUrl,
  9. success: data => {
  10. let imgWidth = data.width;
  11. let imgHeight = data.height;
  12.  
  13. // 創(chuàng)建canvas,根據(jù)選擇的圖片大小,在canvas上繪制圖片和文字
  14. this.createCanvasShareImage(imgUrl, imgWidth, imgHeight);
  15. }
  16. });
  17. }
  18. });
  19. }

4、創(chuàng)建canvas并在canvas上添加圖片和文本

 

  1. createCanvasShareImage: function (imgUrl, imgW, imgH) {
  2. // 使用wx.createCanvasContext獲取繪圖上下文 context
  3. let context = wx.createCanvasContext('shareCanvas');
  4. console.log('context: ', context);
  5.  
  6. // 獲取canvas的寬度:
  7. // 750的設(shè)計(jì)稿基于iphone6的尺寸(屏幕寬度: 375px)在小程序中的比例是: 1px = 2rpx ==> 375px = 750rpx ==> 屏幕寬度(px) = 750rpx
  8. // 所以 1rpx = 屏幕寬度 / 750
  9. // 我們這里css中設(shè)置的 canvas 的width:700rpx, 所以 canvas的寬度計(jì)算是: [(屏幕寬度 / 750)* 700]rpx, 這樣就可以做到在不同手機(jī)上都可以適配
  10. let canvasWidthPx = 700 / this.data.ratio;
  11.  
  12. // 設(shè)置 canvas 的背景并填充canvas
  13. context.fillStyle = '#ffdc22';
  14. context.fillRect(0, 0, canvasWidthPx, this.data.windowHeight);
  15.  
  16. // 繪制圖片:圖片居中顯示在 canvas 中
  17. let imgX = (700 - imgW) / 2;
  18. let imgY = (this.data.windowHeight * this.data.ratio - 46 * this.data.ratio - imgH) / 2;
  19. let clipWidth = imgW * this.data.ratio;
  20. let clipHeight = imgH * this.data.ratio;
  21. context.drawImage(imgUrl, -imgX, -imgY, clipWidth, clipHeight, 0, 0, imgW, imgH);
  22.  
  23. // 設(shè)置字體大小、文本顏色
  24. context.setFontSize(20);
  25. context.fillStyle = "#000";
  26.  
  27. // 計(jì)算文本的寬度:measureText() 取到文本的 width
  28. let txtWidth = context.measureText('你若盛開(kāi),蝴蝶自來(lái)').width;
  29.  
  30. // 繪制居中文本:這個(gè)地方的 (x, y)的坐標(biāo)是在文本的左下角位置
  31. context.fillText("你若盛開(kāi),蝴蝶自來(lái)", (canvasWidthPx - txtWidth) / 2, 20 * this.data.ratio);
  32.  
  33. context.draw();
  34. }

5、長(zhǎng)按bindlongtapcanva保存圖片或者直接預(yù)覽圖片,先通過(guò)wx.canvasToTempFilePath將當(dāng)前畫(huà)布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的的圖片,再通過(guò)wx.saveImageToPhotosAlbum將圖片保存到本地,或者通過(guò)wx.previewImage直接預(yù)覽圖片。

 

  1. saveShareImage() {
  2. wx.canvasToTempFilePath({
  3. canvasId: 'shareCanvas',
  4. success: (res) => {
  5. console.log('canvasToTempFilePath: ', res);
  6. // 將圖片保存到相冊(cè)
  7. wx.saveImageToPhotosAlbum({
  8. filePath: res.tempFilePath,
  9. success: (data) => {
  10. console.log(data);
  11. }
  12. });
  13.  
  14. // 直接預(yù)覽圖片
  15. wx.previewImage({
  16. urls: [res.tempFilePath]
  17. })
  18. }
  19. })
  20. }

 

電話咨詢 預(yù)約演示 0元開(kāi)店