取景框图⽚⼩程序_⼩程序拍照后提取指定框内的图⽚由于⾃⼰在开发的过程中，需要⽤到拍照后⽴即按指定区域切图，于是就研究了⼀下⼩程序的拍照功能，以下是效果图，具体代码看我的GitHub，有不懂的地⽅可以留⾔交流。
IMG_0978.PNG
IMG_0979.PNG
IMG_0C286DAD5062-1.jpeg
在代码中主要⽤到了cover，在相机上⾯进⾏绘制，详细了解请看我的GitHub
关键代码
onLoad: function (options) {
var that = this
that.path = options.path
success: function (res) {我曾经等过你因为我相信是什么歌
var width = res.windowWidth
var height = res.windowHeight
var gap = 20
that.setData({
width:width,
车辆保养height:height,
gap: gap
})
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 = pFilePath
//清除画布上在该矩形区域内的内容。
汽车贴膜注意事项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);
}
})
}
}) }, })
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论