取景框图片 小程序_微信小程序拍照后提取指定框内的图片

由于自己在开发的过程中，需要用到拍照后立即按指定区域切图，于是就研究了一下小程序的拍照功能，以下是效果图，具体代码看我的GitHub，有不懂的地方可以留言交流。

IMG_0978.PNG

IMG_0979.PNG

IMG_0C286DAD5062-1.jpeg

在代码中主要用到了cover，在相机上面进行绘制，详细了解请看我的GitHub

关键代码

onLoad: function (options) {

var that = this

that.path = options.path

wx.getSystemInfo({

success: function (res) {

var width = res.windowWidth

var height = res.windowHeight

var gap = 20

that.setData({

width:width,

height:height,

gap: gap

})

wx.getImageInfo({

src: that.path,

success: function(res){

that.canvas = wx.createCanvasContext("image-canvas", that)

//过渡页面中，图片的路径坐标和大小

that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)

wx.showLoading({

title: '数据处理中',

mask: true

})

that.canvas.setStrokeStyle('red')

// 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的

//过渡页面中，对裁剪框的设定

that.canvas.strokeRect(that.data.gap, that.data.gap, that.data.width - 2 * that.data.gap, 50)

that.canvas.draw()

setTimeout(function () {

wx.canvasToTempFilePath({//裁剪对参数

canvasId: "image-canvas",

x: that.data.gap,//画布x轴起点

y: that.data.gap,//画布y轴起点

width: that.data.width - 2 * that.data.gap,//画布宽度

height: 50,//画布高度

destWidth: that.data.width - 2 * that.data.gap,//输出图片宽度

destHeight: 50,//输出图片高度

canvasId: 'image-canvas',

success: function (res) {

that.filePath = res.tempFilePath

//清除画布上在该矩形区域内的内容。

that.canvas.clearRect(0, 0, that.data.width, that.data.height)

that.canvas.drawImage(that.filePath, that.data.gap, that.data.gap, that.data.width - that.data.gap*2, 50)

that.canvas.draw()

wx.hideLoading()

//在此可进行网络请求

},

fail:function(e){

wx.hideLoading()

wx.showToast({

title: '出错啦...',

icon: 'loading'

})

}

});

}, 1000);

}

})

}

})

},

})