最近在做微信小程序，要做一个截图的功能，所以就做了一个简易的截图功能。废话不说，看功能实现吧(UI什么的没有专业的切图人员提供，自己随意写的，有点丑)。
js代码
Page({
/**
* 页面的初始数据
*/
data: {
showImage: {
url: '',
height: '',
width: ''
},
imgMaxWidth: '',
imgMaxHeight: '',
showBtn: true,
x: 40,
y: 40,
scale: 1,
moveViewWidth: '',
moveViewHeight: '',
lastImage: ''
},
/**
* 图片加载获取图片参数
*/
onImageLoad: function (e) {
this.data.showImage.height = e.detail.height;
this.data.showImage.width = e.detail.width;
// let bili = e.detail.width / e.detail.height
// if (bili > this.data.moveViewWidth / this.data.moveViewHeight) {
// wx.showToast({
// title: '请选择正确比例的图片',
// })
// this.setData({ showBtn: true })
// return;
// }
this.data.showImage.width = this.data.imgMaxWidth;
this.data.showImage.height = e.detail.height * this.data.imgMaxWidth / e.detail.width
this.setData({ showImage: this.data.showImage })
var context = wx.createCanvasContext('canvasOne');
context.drawImage(this.data.showImage.url, 0, 0, this.data.showImage.width, this.data.showImage.height)
context.draw()
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success: (res) => {
let ww = res.windowWidth;
let hh = res.windowHeight
this.setData({
imgMaxWidth: ww * 0.9
});
this.setData({ imgMaxHeight: hh })
this.setData({ moveViewWidth: ww * 0.9 })
this.setData({ moveViewHeight: this.data.moveViewWidth * 450 / 345 })
}
})
},
/**
* 截图完成将指定canvas区域生成图片
*/
jieDone: function () {
var that = this
wx.canvasToTempFilePath({
x: that.data.x,
y: that.data.y,
width: that.data.moveViewWidth * that.data.scale,
height: that.data.moveViewHeight * that.data.scale,
destWidth: that.data.moveViewWidth * that.data.scale,
destHeight: that.data.moveViewHeight * that.data.scale,
canvasId: 'canvasOne',
success: function (res) {
that.data.showImage.url = res.tempFilePath
that.data.showImage.height = that.data.moveViewWidth * that.data.scale
that.data.showImage.width = that.data.moveViewHeight * that.data.scale
that.setData({ showImage: that.data.showImage })
that.setData({ showBtn: true })
that.setData({ lastImage: res.tempFilePath })
console.log(that.data.moveViewHeight, that.data.moveViewWidth)
console.log(that.data.showImage.height, that.data.showImage.width)
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '截取失败',
content: res.errMsg
})
console.log("fail res:")
console.log(res)
}
})
},
cancelImg: function () {
this.setData({ showBtn: true })
},
selectTap() {
var that = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const tempFilePath = res.tempFilePaths[0]
that.data.showImage.url = tempFilePath
that.setData({ showImage: that.data.showImage })
that.setData({ showBtn: false })
}
})
},
onChange: function (e) {
console.log('')
console.log(e.detail)
this.setData({ x: e.detail.x })
this.setData({ y: e.detail.y })
},
onScale: function (e) {
this.setData({ scale: e.detail.scale })
}
})
wxml代码
<!--pages/screenshot/screenshot.wxml-->
<view wx:if="{{showBtn}}" class="btn-w">
<view class="btn" bindtap='selectTap'>选择照片</view>
<image src="{{lastImage}}" onImageLoad="onImageLoad" style="width:{{moveViewWidth}}px;height:{{moveViewHeight}}px"></image>
</view>
<view class="wrapper" wx:if="{{!showBtn}}">
<image src="{{showImage.url}}" bindload="onImageLoad" style="width:{{showImage.width}}px;height:{{showImage.height}}px"></image>
<view class="canvas-wrapper">
<canvas canvas-id="canvasOne" class="canvas-one" style="width:{{showImage.width}}px;height:{{showImage.height}}px"></canvas>
</view>
<movable-area class="move-area">
<movable-view class='move-view' x="{{x}}" y="{{y}}" direction="all" bindchange="onChange" bindscale="onScale" style="width:{{moveViewWidth}}px;height:{{moveViewHeight}}px;"></movable-view>
</movable-area>
<view class="bottom-w">
<view bindtap='cancelImg'>取消</view>
<view bindtap='jieDone'>完成</view>
</view>
</view>
wxss代码
/* pages/screenshot/screenshot.wxss */
.btn-w{
text-align: center;
}
.btn{
width:100%;
border-radius: 12rpx;
height:100rpx;
line-height: 100rpx;
background: linear-gradient(to right,yellow,green);
text-align: center;
font-size:30rpx;
}
.wrapper{
position:relative;
width:100%;
height:93vh;
background-color:rgba(0, 0, 0, .7);
overflow: hidden;
}
.wrapper image{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index:5;
margin-top:40rpx;
}
.canvas-one{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:90%;
margin:0 auto;
vertical-align: middle;
}
.canvas-wrapper{
position:relative;
width:100%;
margin-left:750rpx;
height:93vh;
}
.move-area{
width:90%;
height:100vh;
position:absolute;
top:0;
left:50%;
transform: translateX(-50%);
z-index: 6;
}
.move-view{
position:absolute;
border:3rpx solid #fff;
z-index:7;
}
.bottom-w{
position:fixed;
width:100%;
bottom:0;
height:7vh;
line-height: 7vh;
text-align: center;
color:#fff;
background-color:#000;
font-size:30rpx;
z-index: 10;
}
.bottom-w view{
float:left;
width:50%;
text-align: center;
}
就这样完成，功能相当简易，有时间继续优化扩展，啦啦啦啦！（规则就是用来打破的）
对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！
网友评论