微信小程序合成照片 應(yīng)用canvas把他們繪制到一張圖上保存到本地相冊(cè)然后點(diǎn)擊分享

自定義一個(gè)組件

components/canvas.js里

// components/canvas/canvas.js const app = getApp() Component({/*** 組件的屬性列表*/properties: {scene: {type: String,value: ''}},/*** 組件的初始數(shù)據(jù) */data: {pixelRatio: 2,programCode: '',count: 0,spinning: false,loadingFlag: false, // 是否重新加載圖片image:''},// 在組件完全初始化完畢、進(jìn)入頁(yè)面節(jié)點(diǎn)樹后attached () {wx.nextTick(() => {this.getFile() // 獲取小程序碼和頭像的臨時(shí)文件})},/*** 組件的方法列表*/methods: {getFile () {// 請(qǐng)求接口 獲取頭像和小程序碼的臨時(shí)文件if (!this.data.loadingFlag) {this.initData()}},writeCanvas () {let that = thisconst ctx = wx.createCanvasContext('myCanvas', that)let canvasW = that.data.canvasWlet canvasH = that.data.canvasHlet bgImgPath = that.data.image //背景圖片(在這里換圖片)let programCode = that.data.erweima // 小程序碼(在這里換圖片)// 畫大背景 單位是 px 不是 rpxctx.drawImage(bgImgPath, 0, 0, canvasW, canvasH)// 保存上下文ctx.save()// 恢復(fù)畫布ctx.restore()// 畫小程序碼ctx.drawImage(programCode, that.computedPercent(85), that.computedPercent(165), that.computedPercent(117), that.computedPercent(117))ctx.draw(true, () => {that.setData({spinning: false})})},// 初始化數(shù)據(jù)initData () {let that = this// 獲取設(shè)備寬度，計(jì)算canvas寬高wx.getSystemInfo({success: function(res) {let canvasW = Math.round(res.screenWidth *0.978)let canvasH = canvasW * 1.929that.setData({pixelRatio: res.pixelRatio, // 圖片像素比canvasW,canvasH})that.writeCanvas() // 暫時(shí)在此執(zhí)行}})},// 保存圖片save () {let that = thiswx.canvasToTempFilePath({x: 0, // 起點(diǎn)橫坐標(biāo)y: 0, // 起點(diǎn)縱坐標(biāo)width: that.data.canvasW, // canvas 當(dāng)前的寬height: that.data.canvasH, // canvas 當(dāng)前的高destWidth: that.data.canvasW * that.data.pixelRatio, // canvas 當(dāng)前的寬 * 設(shè)備像素比destHeight: that.data.canvasH * that.data.pixelRatio, // canvas 當(dāng)前的高 * 設(shè)備像素比canvasId: 'myCanvas',success: function (res) {console.log(res)//調(diào)取小程序當(dāng)中獲取圖片wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '圖片保存成功！',icon: 'none'})},fail: function (res) {console.log(res)if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {that.doAuth()}}})},fail: function (res) {console.log(res)}}, this)},// 獲取授權(quán)doAuth () {wx.showModal({title: '獲取授權(quán)',content: '您是否同意重新授權(quán)保存圖片',cancelText: '不同意',confirmText: '同意',confirmColor: '#21c0ae',success: function(res) {if (res.confirm) { // 點(diǎn)擊確認(rèn)wx.openSetting({success(settingdata) {if (settingdata.authSetting["scope.writePhotosAlbum"]) {console.log("獲取權(quán)限成功，再次點(diǎn)擊圖片保存到相冊(cè)")} else {console.log("獲取權(quán)限失敗")}},fail: function (res) {console.log(res)}})}}})},/*** 計(jì)算比例* @param {String} value 像素（二倍圖量出來的要除2）*/computedPercent (value) {let currentWidth = this.data.canvasWlet oldWidth = 288return Math.floor(value * currentWidth / oldWidth)}},created: function () {let that = thislet image = wx.getStorageSync('images')var erweima =wx.getStorageSync('erweima')that.setData({image:image,erweima:erweima})}, })

components/canvas.wxml里

<!--components/canvas/canvas.wxml--> <view class="generate-pic-box"><view class="mask" wx:if="{{spinning}}"><view class="mask-cont"><view class="loading"></view></view></view><block hidden="{{!spinning}}"><canvas class="canvas" style="{{'width: ' + (canvasW) + 'px; height: ' + (canvasH) + 'px;'}}" canvas-id="myCanvas"hidden="{{canvasHidden}}"></canvas><!-- <view class="save-text">保存圖片，分享至朋友圈</view> --></block><!-- <view class="save-btn-box"> --><cover-view class="btuns"><button open-type="share" class="button">分享</button></cover-view><cover-view class="save-btn" bindtap="save">保存圖片</cover-view><!-- </view> --> </view>

components/canvas.wxss里

.generate-pic-box {width: 100%;position: relative; } .generate-pic-box .mask {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1001;background-color: rgba(255, 255, 255, 0.5); } .generate-pic-box .mask .mask-cont {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center; } .generate-pic-box .mask .mask-cont .loading {width: 36rpx;height: 36rpx;margin-right: 20rpx; } .generate-pic-box .mask .mask-cont .loading-text {color: #fff; } .generate-pic-box .canvas {margin: 0 auto; } .generate-pic-box .generate-pic-btm {padding-top: 24rpx;padding-bottom: 30rpx;background-color: #fff; } .generate-pic-box .save-text {width: 100%;margin-bottom: 21rpx;font-size: 26rpx;line-height: 1.5;color: #999;text-align: center; }.save-btn-box {width: 100%;display: flex;justify-content: center;align-items: center; } .save-btn {width: 84%;height: 64rpx;line-height: 64rpx;font-size: 28rpx;border-radius: 8rpx;text-align: center;color: #fff;margin-left: 60rpx;position: absolute;z-index: 1000;bottom: 80rpx;background: #076BFF ; } .btuns {width: 84%;color: #fff;font-size: 29rpx;position: absolute;bottom: 171rpx;border-radius: 8rpx;background: #076BFF ;margin-left: 60rpx; } .button {/* width: 84%; */color: #fff;font-size: 29rpx;border-radius: 8rpx;background: #076BFF ; }

把組件引入json里

"usingComponents": {"canvas": "../../components/canvas/canvas"},

直接在wxml里調(diào)用就行了

<view class="component-display-box"><generate-pic></generate-pic></view>

合成照片必須是本地圖片 如果用網(wǎng)絡(luò)圖片 要先下載到本地wx.downloadFile官網(wǎng)上也都有詳細(xì)說明的。重要的一點(diǎn) 下載完圖片真機(jī)調(diào)試什么的照片都可以顯示 如果上傳為測(cè)試版的話 圖片沒有顯示 那就說明下載的路徑的問題了可以在url 里加replace("http:","https:")，一定要加在圖片地址后面

如果有更好的 歡迎一起討論

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的小程序canvan画布，现两张图片合成一张，并保存到本地的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。