微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:53:19

微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能

微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能:小程序canvas的API并沒有像其他的一樣支持小程序獨(dú)有的 rpx 自適應(yīng)尺寸單位，在繪制內(nèi)容時所應(yīng)用的單位仍然是 px，那么如何實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)呢？我們的在開發(fā)中常用的參考屏幕尺寸（iPhone6）為：375*667；那么想要適應(yīng)其他尺寸的屏幕時只需按照i

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能:小程序canvas的API并沒有像其他的一樣支持小程序獨(dú)有的 rpx 自適應(yīng)尺寸單位，在繪制內(nèi)容時所應(yīng)用的單位仍然是 px，那么如何實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)呢？我們的在開發(fā)中常用的參考屏幕尺寸（iPhone6）為：375*667；那么想要適應(yīng)其他尺寸的屏幕時只需按照i

小程序canvas的API并沒有像其他的一樣支持小程序獨(dú)有的 rpx 自適應(yīng)尺寸單位，在繪制內(nèi)容時所應(yīng)用的單位仍然是 px，那么如何實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)呢？

我們的在開發(fā)中常用的參考屏幕尺寸（iPhone6）為：375*667；

那么想要適應(yīng)其他尺寸的屏幕時只需按照iPhone6的繪制大小按比例進(jìn)行換算即可：

獲取系統(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ù)乘以相對單位即可實(shí)現(xiàn)自適應(yīng)

這里的rpx是相對不同屏幕寬度的相對單位，測量出得實(shí)際寬度，就是實(shí)際測出的px像素值*rpx就可以了；之后無論實(shí)在iPhone5，iPhone6，iPhone7...都可以進(jìn)行自適應(yīng)。

這里的html也要動態(tài)的設(shè)置寬和高

<canvas canvas-id="PosterCanvas" style="width:{{screen_width*375+'px'}}; height:{{screen_height*1.21+'px'}}"></canvas>
drawPoster(){
 let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
 console.log('手機(jī)型號' + that.model,'寬'+that.screen_width*375,'高'+ that.screen_height)
 let rpx = that.screen_width
 //這里的rpx是相對不同屏幕寬度的相對單位，實(shí)際的寬度測量，就是實(shí)際測出的px像素值*rpx就可以了；之后無論實(shí)在iPhone5，iPhone6，iPhone7...都可以進(jìn)行自適應(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)，你第二次進(jìn)入的時候在iphone手機(jī)上是不會再次提醒你授權(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)限成功,再次點(diǎn)擊圖片即可保存',
 showCancel: false,
 })
 } else {
 mpvue.showModal({
 title: '提示',
 content: '獲取權(quán)限失敗，將無法保存到相冊哦~',
 showCancel: false,
 })
 }
 },
 fail(failData) {
 console.log("failData",failData)
 },
 complete(finishData) {
 console.log("finishData", finishData)
 }
 })
 }
 })
 }
 }
 });

總結(jié)

以上所述是小編給大家介紹的微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com