怎样用html实现微信九宫格,微信小程序使用canvas实现，图片分割为九宫格，点击图片保存...

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() {

}

})