您好,登錄后才能下訂單哦!
1.首先我們要把想保存的圖片繪制在畫布上
<view class='container'> <canvas style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true"> </canvas> <button bindtap='clickMe'>保存圖片</button> </view>
2.我們在看看看js代碼在用wx.canvasToTempFilePath方法會返回一個tempFilePath圖片路徑
// canvas 全局配置 var context = null; var rpx var posterHeight = 0 var posterWidth = 0 var avatarPadding = 0 //距離邊界 var avatarRadiu = 0 //頭像半徑 var textScale = 0 //文字比例 //注冊頁面 Page({ data: { img: "../../images/img1.jpg", myCanvasWidth: 0, myCanvasHeight: 0, posterHeight: 0, }, onLoad: function (options) { var that = this var myCanvasWidth = that.data.myCanvasWidth //為了讓圖片滿鋪頁面 var myCanvasHeight = that.data.canvasHeight context = wx.createCanvasContext('canvas'); wx.getSystemInfo({ success: function (res) { myCanvasWidth = res.screenWidth myCanvasHeight = res.screenHeight posterWidth = Math.round(res.screenWidth * 0.68) //計(jì)算讓畫布圖片自適應(yīng) posterHeight = Math.round(posterWidth * 1920 / 1080) avatarPadding = Math.round(posterWidth * 20 / 375) avatarRadiu = Math.round(posterWidth * 25 / 375) textScale = Math.round(posterWidth / 375) rpx = res.windowWidth / 375; that.setData({ myCanvasWidth: myCanvasWidth, myCanvasHeight: myCanvasHeight, posterHeight: posterHeight }) context.drawImage(that.data.img, 0, 0, that.data.myCanvasWidth, that.data.myCanvasHeight); //畫布繪制圖片 context.draw(); }, }) }, clickMe: function () { //保存圖片 wx.canvasToTempFilePath({ canvasId: 'canvas', fileType: 'jpg', success: function (res) { console.log(res) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.log(res) wx.hideLoading(); wx.showToast({ title: '保存成功', }); // //存入服務(wù)器 // wx.uploadFile({ // url: 'a.php', //接口地址 // filePath: res.tempFilePath, // name: 'file', // formData: { //HTTP 請求中其他額外的 form data // 'user': 'test' // }, // success: function (res) { // console.log(res); // }, // fail: function (res) { // console.log(res); // }, // complete: function (res) { // } // }); }, fail() { wx.hideLoading() } }) } }) }, })
3,css樣式 直接給畫布設(shè)置高度寬度就可以 圖片會鋪滿屏幕
總結(jié)
以上所述是小編給大家介紹的微信小程序點(diǎn)擊保存圖片到本機(jī)功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。