小程序之 保存canvas生成商品圖片附加小程序二維碼 分享到朋友圈

一、概述

需要用到的生成二維碼組件（可自行下載添加到小程序根目錄utils里）：https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js
以上二維碼組件默認是有空白邊的的，如果不需要空白區域，也可以修改draw方法（如需要修改請進：https://github.com/demi520/wxapp-qrcode/issues/11）

二、需求分析：

效果圖是750*1140大小的PSD效果圖，如下：（點擊可查看大圖）

我的思路：

在小程序中先創建三個canvas：

第一個是畫二維碼；

第二個是畫與PSD相同大小的畫布可用于保存到手機，樣做的原因是單位不需要變，圖片，文字，等 位置和大小就可以完全按PSD的尺寸了，不需要去計算；

第三個是最后用來顯示效果的（其實就是將第二個再重新畫到這個新的畫布上面大小就按縮放比例顯示）。

多走了很多彎路：開始效果是實現了（畫與畫布相同大小canvas是需要去計算很多的比如文字大小與位置，圖片的大小與位置，起始坐標，都是要去計算的）。但是canvas尺寸太小，保存的時候也就屏幕那么大，不得不得新想辦法。

JD的小程序也保存的分享的圖片相當大（2550px4002px），不知道是不是用canvas畫的還是后臺生成的。我現在保存的大小與PSD（7501140）大小一樣。不會太小也不會太大。

現實代碼

WXML代碼：

<view class="container"><view class="canvasarea"><canvas canvas-id="mycanvas" class="qrcode"/><canvas canvas-id="mycanvas2" style="width:{{crentwidth}}px;height:{{crentheight}}px;" class="qrcode2"/> </view> <div class="canvasshow" style="width:{{ncrentwidth}}px;height:{{ncrentheight}}px;overflow:hidden;"><canvas bindtap="previewImg2" canvas-id="mycanvas3" class="qrcode3" style="width:{{ncrentwidth}}px;height:{{ncrentheight}}px;"/></div> </view>

js代碼:

var QR = require("../../utils/qrcode.js"); Page({data: {},onLoad: function (options) {console.log("頁面加載事件");var that = this;wx.getSystemInfo({success: function (res) { that.setData({scrollWidth: res.windowWidth,scrollHeight: res.windowHeight,savewidth:750,//保存的圖片寬saveheight: 1140,//保存的圖片高}); //console.log(crentwidth, crentheight);}});let shareurl="https://youdomain.com/b?id=8559";QR.api.draw(shareurl, "mycanvas", 300, 300);var ctx1 = wx.createCanvasContext("mycanvas");var leftwidth = 30;//兩邊間距var imgwidth = 750 - leftwidth * 2;console.log(imgwidth);//生成分享商品圖片 避免二維碼還沒生成，等個三秒鐘再開始畫setTimeout(function () { wx.showLoading({title: "生成中......",})wx.canvasToTempFilePath({canvasId: "mycanvas",success: function (res) { var ctx = wx.createCanvasContext("mycanvas2");ctx.drawImage(res.tempFilePath, 0, 330, 100, 100);ctx.beginPath();ctx.setFillStyle("white")ctx.rect(0, 0, that.data.savewidth, that.data.saveheight);ctx.setFillStyle("#fff");ctx.fill();console.log("畫標題");ctx.setFontSize(32);ctx.setFillStyle("#333");var chr = "汽車鯊魚腮仿真出風口側風口引擎蓋裝飾進風口假風口車貼改裝用品";var temp = "";//截取文只顯示一行for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp+"......").width < imgwidth) {temp += chr[a];}else {break;}}var titlevtop = 60;//標題距頂部高度ctx.fillText(temp + "...", leftwidth, titlevtop);ctx.setFontSize(36);ctx.setFillStyle("#e51a1c");var pricevtop = 115;//價格距頂部高度ctx.fillText("￥1.00", leftwidth, pricevtop);wx.getImageInfo({src: "https://youdomain.com/upload/20170214/s201702140521515718.jpg",success: (res) => { var vtop = 156;//產品圖距離頂部位置// 向畫布上繪制圖像ctx.drawImage(res.path, leftwidth, vtop, imgwidth, imgwidth);// 返回之前保存過的路徑狀態和屬性ctx.restore();//畫二維碼wx.canvasToTempFilePath({canvasId: "mycanvas",success: function (res) {var vtop2 = 876;//二維碼距頂部位置var ewmwidth = 232;//二維碼的寬高ctx.drawImage(res.tempFilePath, leftwidth - 2, vtop2, ewmwidth, ewmwidth);//畫LOGOwx.getImageInfo({src: "https://youdomain.com/images/logo.png",success: (res) => {console.log("給二維碼添加logo:");var logowidth = 73;//logo寬高ctx.drawImage(res.path, leftwidth+ ewmwidth / 2 - logowidth / 2, vtop2 + ewmwidth/2 - logowidth / 2, logowidth, logowidth);var vtop3 = 970;//文字距頂部的高度ctx.setFontSize(36);ctx.setFillStyle("#333");ctx.fillText("百易商小程序", leftwidth + ewmwidth + logowidth, vtop3);var vtop4 = 1020;//文字距頂部的高度ctx.setFontSize(26);ctx.setFillStyle("#999");ctx.fillText("長按或掃一掃識別小程序", leftwidth + ewmwidth + logowidth, vtop4);//ctx.save();ctx.draw();//ctx.save();console.log("大圖生成完");setTimeout(function(){var radius = that.data.savewidth / that.data.saveheight;//原大小比率var crentheight = parseInt((that.data.scrollWidth / radius).toFixed(0));//當前屏幕比例的高var x = that.data.scrollWidth / that.data.savewidth;//寬縮小比例var y = crentheight / that.data.saveheight;//高縮小比例var ncrentwidth = that.data.scrollWidth;//屏幕的寬that.setData({ x: x, y: y, ncrentwidth: ncrentwidth, ncrentheight: crentheight });wx.canvasToTempFilePath({canvasId: "mycanvas2",success: function (res) {console.log(res);var ctx3 = wx.createCanvasContext("mycanvas3");ctx3.scale(x, y);ctx3.beginPath();ctx3.drawImage(res.tempFilePath, 0, 0, that.data.savewidth,that.data.saveheight);ctx3.draw();ctx3.save();console.log("縮略圖生成成功，顯示！")wx.showToast({title: "生成完成！",})setTimeout(function () {wx.hideLoading();}, 1000)}});},100) }}) }}); }})}, fail:function(res){console.log(res);}});}, 3000)},//點擊保存分享圖片previewImg2: function (e) {wx.showActionSheet({itemList: ["保存圖片"],success: function (res) {console.log(res.tapIndex)if (res.tapIndex == 0) {console.log("保存圖片")wx.canvasToTempFilePath({canvasId: "mycanvas2",success: function (res) {var tempFilePath = encodeURI(res.tempFilePath)console.log(res)wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function success(res) { console.log("saved::" + res.savedFilePath);wx.showToast({title: "保存成功",})}})},fail: function (res) {console.log(res);wx.showToast({title: "保存失敗",icon: "loading"}),setTimeout(function () {wx.hideLoading()}, 2000)}});}},fail: function (res) {console.log(res.errMsg)}})} });

特別說明：

1、wx.getImageInfo使用時圖片必須是：downloadFile 合法域名才能畫出來，不然會報錯。

2、二維碼生成后掃描或識別需要登錄 小程序公眾平臺，在《設置中》->《開發設置》->《掃普通鏈接二維碼打開小程序》中開通二維碼 并添加相應規則

添加規則如下：

詳情頁面獲取方式：

if (typeof (options.q) != "undefined") {var getq = decodeURIComponent(options.q).replace("https://yourdomain.com/b?id=","");//替換規則后，獲取的就是商品ID//從圖片識別或掃一掃接收的參數that.setData({id: getq}) }else{//默認接收參數that.setData({id: options.id}) }

總結

以上是生活随笔為你收集整理的小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。