<!--index.wxml-->
<view style='background-color:#000;' wx:if='{{isAuth}}'>
<view class='page-main'>
<view wx:if='{{!photoSrc}}'>
<camera mode="normal" device-position="{{cameraDirec}}" flash="auto" binderror="cameraForbid" style="width: {{canvasWidth}}rpx; height: {{canvasHeight}}rpx;margin-left:{{canvasMaginLeft}}px">
<cover-view class="camera-cover-box">
<cover-image class="camera-top-img" src="../../images/top.png" style="width:100%; height:{{topImgHeight}}rpx;"/>
<cover-image class="camera-bottom-img" src="../../images/bottom.png" style="width:100%; height:{{btmImgHeight}}rpx;"/>
</cover-view>
</camera>
<!-- 测试专用代码 -->
<!-- <view style='width:100%;height:600px;'></view> -->
<!-- 测试专用代码 -->
</view>
<view wx:else class='preview'>
<canvas canvas-id='canvas' style='width: {{canvasWidth}}rpx; height: {{canvasHeight}}rpx;margin-left:{{canvasMaginLeft}}px;'></canvas>
</view>
</view>
<!-- 底部按钮 -->
<view wx:if='{{!photoSrc}}' class = 'page-bottom' style='height:{{btmHeight}}px'>
<!-- 测试专用代码 -->
<!-- <view class='btn-cell'>
<button class='btn share-photo' open-type="openSetting">设置</button>
</view> -->
<!-- 测试专用代码 -->
<button class='take-photo' bindtap="takePhoto"></button>
<image src='https://edu.alva.com.cn/gq-image/change-drec.png' class='change-camera-direc' bindtap="changeCameraDirec"/>
</view>
<view wx:else class='page-bottom' style='height:{{btmHeight}}px' >
<view class='page-canvas-btm'>
<view class='btn-cell' bindtap='backCamera'>
<button class='btn back-camera'></button>
<view>返回</view>
</view>
<view class='btn-cell' bindtap='savePhoto'>
<button class='btn save-photo'></button>
<view>保存</view>
</view>
<view class='btn-cell'>
<button class='btn share-photo' open-type="share"></button>
<!-- <button class='btn share-photo' bindtap='sharePhoto'></button> -->
<view>分享</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
</view>
/**index.wxss**/
.container-box {
background-color:#000;
}
.btn{
border: none;
outline: 0 none;
color:#fff;
}
.camera-cover-box{
position: relative;
height: 100%;
}
.camera-cover-box .camera-bottom-img{
position:absolute;
left:0rpx;
bottom: 0rpx;
}
.preview{
position: relative;
width:100%;
height: 100%;
}
.page-bottom {
position: fixed;
bottom: 0rpx;
left:0rpx;
width: 100%;
min-height: 100px;
background-color: #000;
}
.page-bottom .change-camera-direc{
width:49rpx;
height: 38rpx;
/* background:url('https://edu.alva.com.cn/gq-image/change-drec.png') no-repeat center; */
/* background-size: cover; */
position: absolute;
left:80%;
top:50%;
transform: translate(0,-50%);
}
.page-bottom .take-photo{
width:120rpx;
height: 120rpx;
background:url('https://edu.alva.com.cn/gq-image/camera2.png') no-repeat center;
background-position: 0 0;
background-size: 120rpx;
border-radius: 50%;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.page-bottom .page-canvas-btm{
display: flex;
justify-content:space-around;
align-items:center;
color:#fff;
font-size: 12px;
height: 100%;
vertical-align: middle;
}
.page-bottom .btn-cell{
text-align: center;
}
.page-bottom .back-camera{
background:url('https://edu.alva.com.cn/gq-image/back.png') no-repeat center;
width: 50rpx;
height: 50rpx;
background-size: 50rpx;
}
.page-bottom .save-photo{
background:url('https://edu.alva.com.cn/gq-image/save.png') no-repeat center;
width: 50rpx;
height: 50rpx;
background-size: 50rpx;
}
.page-bottom .share-photo{
background:url('https://edu.alva.com.cn/gq-image/share.png') no-repeat center;
width: 50rpx;
height: 50rpx;
background-size: 50rpx;
}
.get-auth{
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
photoSrc: '',// 照片的临时存储位置
cameraDirec: 'back',//相机的方向
screenWidth: 0,// 动态获取屏幕宽度
screenHeight: 0,
canvasImg: '', // 绘制的canvas的临时路径
canvasHeight: 1280, // 相机以及绘制的canvas图片的高度
canvasWidth: 720,
canvasStandWHprop: 375 / 570,
canvasMaginLeft: 0,
topImgHeight: 390, // 国旗图片的高
btmImgHeight: 360, // 70周年图片的高
// btmImgTop:0, // 70周年图片的top值(根据屏幕宽度动态计算得到,以保证心形的比例)
btmHeight: 100, // 70周年图片以下部分的黑色区域的高度(当手机比较长的时候就需要动态计算以保证照片以下都是黑色的)
isAuth: false
},
onLoad: function () {
let self = this;
wx.getSystemInfo({
// 获取屏幕宽高后对整体显示的计算
success: function (res) {
const rpxToPx = res.windowWidth / 750; // px和rpx的单位转换
const scale = res.windowWidth / 720; // 不同屏幕相对标准图的缩放值
let screenWHprop = res.windowWidth / (res.windowHeight - 100);
let canvasWidth = 720;
let canvasHeight = 1280;
let btmHeight = 100;
let canvasMaginLeft = 0;
console.log(screenWHprop, self.data.canvasStandWHprop)
if (screenWHprop > self.data.canvasStandWHprop) {
btmHeight = 100;
canvasHeight = (res.windowHeight - 100) / rpxToPx;
canvasWidth = canvasHeight * self.data.canvasStandWHprop;
canvasMaginLeft = (res.windowWidth - canvasWidth * rpxToPx) / 2;
} else {
canvasWidth = res.windowWidth / rpxToPx;
canvasHeight = (res.windowHeight - 100) / rpxToPx; //100为底部摄影部分的最小高度,canvasHeight的值是canvas高度的一般计算方法;
let canvasMaxHeight = res.windowWidth / self.data.canvasStandWHprop / rpxToPx; //(要调整心的最大高度只需要调整375/570即可,这个数是canvas的标准宽高比)
let flag = canvasHeight > canvasMaxHeight;
canvasHeight = flag ? canvasMaxHeight : canvasHeight;
btmHeight = flag ? (res.windowHeight - canvasHeight * rpxToPx) : 100;
}
let btmImgHeight = canvasWidth / 330 * 180;
self.setData({
screenWidth: res.windowWidth,
screenHeight: res.windowHeight,
canvasHeight: canvasHeight,
canvasWidth: canvasWidth,
btmHeight: btmHeight,
btmImgHeight: btmImgHeight,
canvasMaginLeft: canvasMaginLeft
});
},
})
wx.showShareMenu({
withShareTicket: true
})
},
onShow() {
this.getAuth();
},
getAuth() {
var that = this;
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.camera']) {
wx.showModal({
title: '提示',
content: '您好,请先授权相机和保存图片到相册的权限,然后再进行拍摄。',
showCancel: false,
success(res) {
if (res.confirm) {//重新授权弹框用户点击了确定
wx.openSetting({//进入小程序授权设置页面
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
this.setData({
isAuth: true
})
}
}
})//end openSetting
}
}// end success
})
} else {
this.setData({
isAuth: true
})
}
}
})
},
changeCameraDirec() {
// 更改相机拍摄方向
let currDirec = (this.data.cameraDirec === 'back') ? 'front' : 'back';
this.setData({
cameraDirec: currDirec
});
},
takePhoto() {
// 拍摄
let self = this;
const ctx = wx.createCameraContext();
const canvas = wx.createCanvasContext('canvas');
ctx.takePhoto({
quality: 'high',
success: (res) => {
self.setData({
photoSrc: res.tempImagePath
});
// 绘制canvas
const rpxToPx = self.data.screenWidth / 750;
let canvasHeight = this.data.canvasHeight * rpxToPx;
let canvasWidth = this.data.canvasWidth * rpxToPx;
let topImgHeight = this.data.topImgHeight * rpxToPx;
let btmImgHeight = this.data.btmImgHeight * rpxToPx;
canvas.drawImage(res.tempImagePath, 0, 0, canvasWidth, canvasHeight);
canvas.drawImage('../../images/top.png', 0, 0, canvasWidth, topImgHeight);
canvas.drawImage('../../images/bottom.png', 0, canvasHeight - btmImgHeight, canvasWidth, btmImgHeight);
canvas.draw(true, setTimeout(function () {
// 绘制canvas完成后把当前画布指定区域的内容导出生成指定大小的图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: canvasWidth,
height: canvasHeight,
destWidth: canvasWidth * wx.getSystemInfoSync().pixelRatio,
destHeight: canvasHeight * wx.getSystemInfoSync().pixelRatio,
canvasId: 'canvas',
quality: 1,
success: function (res) {
// 存储所生成图片的临时路径
self.setData({
canvasImg: res.tempFilePath
});
},
fail: function (err) {
console.log(err);
}
});
}, 500));
}
})
},
backCamera() {
this.setData({
photoSrc: ''
});
},
savePhoto() {
console.log('save')
let that = this;
wx.saveImageToPhotosAlbum({
filePath: that.data.canvasImg,
success: function (data) {
wx.showToast({
title: '保存成功!',
duration: 1000,
success() {
}
});
// setTimeout(function () {
// that.setData({
// photoSrc: ''
// });
// }, 1010);
},
fail: function (err) {
console.log(err);
// if (err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
wx.showModal({
title: '提示',
content: '您好,请先授权,再保存此图片。',
showCancel: false,
success(res) {
if (res.confirm) {//重新授权弹框用户点击了确定
wx.openSetting({//进入小程序授权设置页面
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {//用户打开了保存图片授权开关
// wx.saveImageToPhotosAlbum({
// filePath: benUrl,
// success: function (data) {
// wx.showToast({
// title: '保存成功',
// icon: 'success',
// duration: 2000
// })
// },
// })
} else {//用户未打开保存图片到相册的授权开关
// wx.showModal({
// title: '温馨提示',
// content: '授权失败,请稍后重新获取',
// showCancel: false,
// })
}
}
})//end openSetting
}
}// end success
})
// }
}
})
},
onShareAppMessage() {
let self = this;
return {
title: '和国旗合影',
path: '/pages/index/index',
imageUrl: '',
success: function (shareTickets) {
},
fail: function (res) {
console.log(res + '失败');
}
}
},
sharePhoto() {
let self = this;
const rpxToPx = this.data.screenWidth / 750;
let canvasHeight = this.data.canvasHeight * rpxToPx;
const shareCanvas = wx.createCanvasContext('shareCanvas');
// 绘制底图
shareCanvas.drawImage(self.data.photoSrc, 0, 0, self.data.screenWidth, canvasHeight);
shareCanvas.draw();
// 添加文字描述
shareCanvas.setTextAlign('center');
shareCanvas.setFillStyle('#000');
shareCanvas.setFontSize(22);
shareCanvas.fillText('一起来和国旗合影', 300, 500);
shareCanvas.stroke();
shareCanvas.draw(true);
// 绘制小程序码
const qrImgSize = 180;
shareCanvas.drawImage('../../images/codeId.jpg', (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize);
shareCanvas.stroke();
shareCanvas.draw(true);
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
}, this).then(res => {
return wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
})
}).then(res => {
wx.showToast({
title: '已保存到相册',
})
})
},
cameraForbid() {
}
})