let _this
Page({/**
* 页面的初始数据*/data: {
canvasInWH:'',//imgUrl: '',
cutGap: 5, //切割间隔
imgW: 0,
imgH:0,
uploadFlag:false,
canvasIn:true},/*上传图片*/uploadImg() {
_this.setData({
canvasIn:true})
const ctx= wx.createCanvasContext('canvasIn', _this)
wx.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {/*获取图片信息*/wx.getImageInfo({
src: res.tempFilePaths[0],
success(imgInfo) {
const imgW=imgInfo.width
const imgH=imgInfo.height
_this.setData({
canvasWH: `width: ${imgW}px;height: ${imgH}px`,//canvasWH: `width: 100%;height: 300px`,
imgW,
imgH
})/*获取图片的大小*/ctx.drawImage(res.tempFilePaths[0], 0, 0, imgW, imgH)
ctx.draw()
const query=wx.createSelectorQuery()
query.select('#canvasOut').boundingClientRect(function(resOut) {/*清除上一次绘图*/const ctxOut= wx.createCanvasContext('canvasOut', _this)
ctxOut.rect(10, 10, resOut.width, resOut.width)
ctxOut.fillStyle= '#fff'ctxOut.fill()
ctxOut.draw()/*开始图片裁剪*/_this.cutImgHandle(imgW, imgH)
})
query.exec()
},
fail(err) {
wx.showModal({
title:'温馨提示',
content:'暂不支持此图片格式',
showCancel:false})
}
})
}
})
},/*点击裁剪动作*/cutImgHandle(imgW, imgH) {
let x= 0let y= 0const cutW= imgW / 3const cutH= imgH / 3const {
cutGap
}=_this.data/*循环裁剪*/const timer= setInterval(function() {
const cfg={
x: x*cutW,
y: y*cutH,
width: cutW,
height: cutH
}/*每个切片的间隔为cutGap*/const cfgOut={
x: parseInt(x* (cutW +cutGap)),
y: parseInt(y* (cutH +cutGap)),
width: parseInt(cutW),
height: parseInt(cutH)
}
wx.canvasGetImageData({
canvasId:'canvasIn',
...cfg,
success: (res)=>{
const data=res.data
console.log(res,'data')
wx.canvasPutImageData({
canvasId:'canvasOut',
data,
...cfgOut,
success: (res)=>{
x++
if (x == 3) {
y++x= 0
if (y == 3) {
_this.setData({
uploadFlag:true,
canvasIn:false})
clearInterval(timer)
}
}
console.log('执行了', res)
},
fail: (err)=>{
console.error(err,'canvasPutImageData')
}
})
},
fail: (err)=>{
console.error(err,'canvasGetImageData')
}
})
},500)
},/*保存图片*/saveImg(e) {
wx.showModal({
title:'温馨提示',
content:'要将图片保存到相册',
success(confirm) {if(confirm.confirm) {
_this.saveImgHandle(e)
}
}
})
},
saveImgHandle(e) {
const {
cutGap,
imgW,
imgH,
uploadFlag
}=_this.data
const cutW= imgW / 3const cutH= imgH / 3
/*判断点击的位置坐标*/const tapX=e.detail.x
const tapY=e.detail.y/*判断是否已上传图片*/
if(uploadFlag) {
const cfgSave={
x:0,
y:0,
width: cutW,
height: cutH,
destWidth: cutW,
destHeight: cutH,
canvasId:'canvasOut',
}for (let x = 0; x < 3; x++) {for (let y = 0; y < 3; y++) {if(
parseInt((cutW+ cutGap) * x) < tapX && parseInt((cutW + cutGap) * (x + 1)) &&parseInt((cutH+ cutGap) * y) < tapY && parseInt((cutH + cutGap) * (y + 1))
) {
cfgSave.x= (cutW + cutGap) *x
cfgSave.y= (cutH + cutGap) *y
}
}
}
wx.canvasToTempFilePath({
...cfgSave,
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(resPhoto) {
wx.showToast({
title:'保存成功'})
}
})
}
})
}else{
wx.showModal({
title:'温馨提示',
content:'请先上传图片',
showCancel:false})
}
},/**
* 生命周期函数--监听页面加载*/onLoad:function(options) {
_this= this},/**
* 生命周期函数--监听页面初次渲染完成*/onReady:function() {
},/**
* 生命周期函数--监听页面显示*/onShow:function() {
},/**
* 生命周期函数--监听页面隐藏*/onHide:function() {
},/**
* 生命周期函数--监听页面卸载*/onUnload:function() {
},/**
* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function() {
},/**
* 页面上拉触底事件的处理函数*/onReachBottom:function() {
},/**
* 用户点击右上角分享*/onShareAppMessage:function() {
}
})