您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序怎么使用canvas自適應(yīng)屏幕畫海報并保存圖片功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
我們的在開發(fā)中常用的參考屏幕尺寸(iPhone6)為:375*667;
那么想要適應(yīng)其他尺寸的屏幕時只需按照iPhone6的繪制大小按比例進行換算即可:
獲取系統(tǒng)屏幕尺寸
先利用wx.getSystemInfo (獲取系統(tǒng)信息)的API獲取屏幕寬度,然后除iPhone6的屏幕寬度,即可得到相對單位
// 在onLoad中調(diào)用 const that = this wx.getSystemInfo({ success: function (res) { console.log(res) that.setData({ model: res.model, screen_width: res.windowWidth/375, screen_height: res.windowHeight }) } })
在繪制方法中將參數(shù)乘以相對單位即可實現(xiàn)自適應(yīng)
這里的rpx是相對不同屏幕寬度的相對單位,測量出得實際寬度,就是實際測出的px像素值*rpx就可以了;之后無論實在iPhone5,iPhone6,iPhone7...都可以進行自適應(yīng)。
這里的html也要動態(tài)的設(shè)置寬和高
<canvas canvas-id="PosterCanvas" ></canvas> drawPoster(){ let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data; console.log('手機型號' + that.model,'寬'+that.screen_width*375,'高'+ that.screen_height) let rpx = that.screen_width //這里的rpx是相對不同屏幕寬度的相對單位,實際的寬度測量,就是實際測出的px像素值*rpx就可以了;之后無論實在iPhone5,iPhone6,iPhone7...都可以進行自適應(yīng)。 ctx.setFillStyle('#1A1A1A') ctx.fillRect(0, 0, rpx * 375, that.screen_height * 1.21) ctx.fillStyle = "#E8CDAA"; ctx.setFontSize(29*rpx) ctx.font = 'normal 400 Source Han Sans CN'; ctx.fillText('Hi 朋友', 133*rpx,66*rpx) ctx.fillText('先領(lǐng)禮品再買車', 84*rpx, 119*rpx) ctx.drawImage('../../img/sell_index5.png', 26*rpx, 185*rpx, 324*rpx, 314*rpx) ctx.drawImage('../../img/post_car2x.png', 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx) ctx.setFontSize(16*rpx) ctx.font = 'normal 400 Source Han Sans CN'; ctx.fillText('長按掃描獲取更多優(yōu)惠', 108*rpx, 545*rpx) ctx.drawImage('../../img/code_icon2x.png', 68 * rpx, 575 * rpx, 79 * rpx, 79 * rpx) ctx.drawImage('../../img/code2_icon2x.png', 229 * rpx, 575 * rpx, 79 * rpx, 79 * rpx) ctx.setStrokeStyle('#666666') ctx.setLineWidth(1*rpx) ctx.lineTo(187*rpx,602*rpx) ctx.lineTo(187*rpx, 630*rpx) ctx.stroke() ctx.fillStyle = "#fff" ctx.setFontSize(13 * rpx) ctx.fillText('xxx科技汽車銷售公司', 119 * rpx, 663 * rpx) ctx.fillStyle = "#666666" ctx.fillText('朝陽區(qū)·望京xxx科技大廈', 109 * rpx, 689 * rpx) ctx.setFillStyle('#fff') ctx.draw() },
保存到相冊
很簡單就是在畫完圖片之后的draw回調(diào)函數(shù)里調(diào)用canvasToTempFilePath()
生產(chǎn)一個零時內(nèi)存里的鏈接,然后在調(diào)用saveImageToPhotosAlbum()
就可以了;其中牽扯到授權(quán),如果你第一次拒絕了授權(quán),你第二次進入的時候在iphone手機上是不會再次提醒你授權(quán)的,這時就需要你手動調(diào)用了;以下附上代碼!
ctx.draw(true, ()=>{ // console.log('畫完了') wx.canvasToTempFilePath()({ x: 0, y: 0, width: rpx * 375, height: that.screen_height * 1.21, canvasId: 'PosterCanvas', success: function (res) { // console.log(res.tempFilePath); wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { console.log(res) }, fail: (err) => { } }) } }) })
拒絕授權(quán)后再次提醒授權(quán)的代碼
mpvue.saveImageToPhotosAlbum({ filePath: __path, success(res) { mpvue.showToast({ title: '保存成功', icon: 'success', duration: 800, mask:true }); }, fail(res) { if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") { mpvue.showModal({ title: '提示', content: '需要您授權(quán)保存相冊', showCancel: false, success:modalSuccess=>{ mpvue.openSetting({ success(settingdata) { // console.log("settingdata", settingdata) if (settingdata.authSetting['scope.writePhotosAlbum']) { mpvue.showModal({ title: '提示', content: '獲取權(quán)限成功,再次點擊圖片即可保存', showCancel: false, }) } else { mpvue.showModal({ title: '提示', content: '獲取權(quán)限失敗,將無法保存到相冊哦~', showCancel: false, }) } }, fail(failData) { console.log("failData",failData) }, complete(finishData) { console.log("finishData", finishData) } }) } }) } } });
以上是“微信小程序怎么使用canvas自適應(yīng)屏幕畫海報并保存圖片功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。