推荐设备MORE

html 网页模板

html 网页模板

公司新闻

织梦微信小程序插件_微信小程序完成摄影画布指

日期:2021-01-07
我要分享
微信小程序实现拍照画布指定区域生成图片     @酷   这篇文章主要为大家详细介绍了微信小程序实现拍照画布指定区域生成图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近写识别行驶证功能,点击拍照把指定区域截取,生成图片功能。

系统相机。该组件是,使用时请注意相关限制。 扫码二维码功能,需升级微信客户端至6.7.3。

我们看下效果:

1、首先生成一个CanvasContext:

 * 生命周期函数--监听页面加载
 onLoad: function(options) {
 requireJs.adaptionIphoneX(this);
 this.ctx = wx.createCameraContext()
 },

2、相机的 wxml样式

 camera wx:if='{{isShowCamera}}' device - position="width" flash="off" 
 cover-view 
 cover-image src='{{isIphoneX==true "../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}' /cover-image 
 cover-view 中华人民共和国机动车行驶证 /cover-view 
 cover-view (行驶证) /cover-view 
 cover-view style='top:{{isIphoneX==true "52%":"62%"}}' 请对准左下角发证机关印章 /cover-view 
 !-- 拍照按钮 -- 
 cover-view style='bottom:{{isIphoneX==true "75px":"0px"}}' 
 cover-image src='../../myImage/vehicle/quxiao.png' bindtap='cancelPhotoAction' /cover-image 
 cover-image src='../../myImage/vehicle/paizhao.png' bindtap='takePhotoAction' /cover-image 
 cover-view bindtap='skipphotoAction' {{skipphotoStatus==1 "跳过":""}}
 /cover-view 
 /cover-view 
 /cover-view 
 /camera 
 canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" /canvas 

3、相机的 wxss样式

.camerabgImage-view{
 height: 100%;
 width: 100%;
 position:absolute;
.bgImage{
 width: 100%;
 height: 100%;
 position: absolute;
.cameratop-view1{
 margin-top: 174rpx;
.cameratop-view2{
 margin-top: 220rpx;
.cameratop-view1, .cameratop-view2{
 width: 100%;
 display: flex;
 justify-content: center;
 position: absolute;
 font-family: PingFangSC-Medium;
 font-size: 36rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
.cameracenter-view{
 height: 44rpx;
 width: 100%;
 position: absolute;
 font-family: PingFangSC-Medium;
 font-size: 32rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
/* 底部 */
.camerabotton-view{
 height: 200rpx;
 width: 100%;
 position:absolute;
 display: flex;
 justify-content: space-around;
 align-items: center;
.cancelphoto{
 width: 50rpx;
 height: 50rpx;
.takephoto{
 width: 132rpx;
 height: 132rpx;
.skipphoto{
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 text-align: center;
}

4、js 中访问原生组件 camera  主要针对相机权限处理

onShow: function() {
 var that = this
 wx.authorize({
 scope: 'scope.camera',
 success: function (res) {
 that.setData({
 isShowCamera: true,
 fail: function (res) {
 console.log("" + res);
 wx.showModal({
 title: '请求授权您的摄像头',
 content: '如需正常使用此小程序功能,请您按确定并在设置页面授权用户信息',
 confirmText: '确定',
 success: res = {
 if (res.confirm) {
 wx.openSetting({
 success: function (res) {
 console.log('成功');
 console.log(res);
 if (res.authSetting['scope.camera']) { //设置允许获取摄像头
 console.log('设置允许获取摄像头')
 wx.showToast({
 title: '授权成功',
 icon: 'success',
 duration: 1000
 that.setData({
 isShowCamera: true,
 } else { //不允许
 wx.showToast({
 title: '授权失败',
 icon: 'none',
 duration: 1000
 wx.redirectTo({
 url: 'addCarInfo/addCarInfo',
 } else { //取消
 wx.showToast({
 title: '授权失败',
 icon: 'none',
 duration: 1000
 wx.redirectTo({
 url: 'addCarInfo/addCarInfo',
 },

5、页面初始化数据

 * 页面的初始数据
 data: {
 isShowCamera: false,
 width: 10,
 height: 10,
 src: "",
 image: "",
 skipphotoStatus: "0",// 1跳过 0没有跳过
 isShowImage: false

 6、点击拍照 设置照片, 返回拍照图片

 * 拍照
 takePhotoAction: function() {
 var that = this
 that.ctx.takePhoto({
 quality: 'high', //高质量
 success: (res) = {
 this.loadTempImagePath(res.tempImagePath);
 },

 7、针对原图片截取尺寸 与 截取后的图片

 loadTempImagePath: function(options) {
 var that = this
 that.path = options
 wx.getSystemInfo({
 success: function(res) {
 // 矩形的位置
 var image_x = 15;
 var image_y = 150;
 var image_width = that.data.width - 2 * 15;
 var image_height = 238;
 wx.getImageInfo({
 src: that.path,
 success: function(res) {
 that.setData({
 isShowImage: true,
 that.canvas = wx.createCanvasContext("image-canvas", that)
 //过渡页面中,图片的路径坐标和大小
 that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
 wx.showLoading({
 title: '数据处理中...',
 icon: 'loading',
 duration: 10000
 // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中,对裁剪框的设定
 that.canvas.setStrokeStyle('black')
 that.canvas.strokeRect(image_x, image_y, image_width, image_height)
 that.canvas.draw()
 setTimeout(function() {
 wx.canvasToTempFilePath({ //裁剪对参数
 canvasId: "image-canvas",
 x: image_x, //画布x轴起点
 y: image_y, //画布y轴起点
 width: image_width, //画布宽度
 height: image_height, //画布高度
 destWidth: image_width, //输出图片宽度
 destHeight: image_height, //输出图片高度
 success: function(res) {
 that.setData({
 image: res.tempFilePath,
 //清除画布上在该矩形区域内的内容。
 // that.canvas.clearRect(0, 0, that.data.width, that.data.height)
 // that.canvas.drawImage(res.tempFilePath, image_x, image_y, image_width, image_height)
 // that.canvas.draw()
 wx.hideLoading()
 console.log(res.tempFilePath);
 //在此可进行网络请求
 PublicJS.drivinglicenseUpload(res.tempFilePath, that.uploadFile);
 fail: function(e) {
 wx.hideLoading()
 wx.showToast({
 title: '出错啦...',
 icon: 'loading'
 if (this.data.skipphotoStatus == 1) {
 wx.redirectTo({
 url: 'addCarInfo/addCarInfo',
 } else {
 wx.navigateBack({
 delta: 1
 }, 1000);
// 接口返回结果
uploadFile: function(data) {}

1.canvas组件是由客户端创建的原生组件,它的层级是最高的。

2.请勿在scroll-view中使用canvas组件。

3.css动画对canvas组件无效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。