亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片

 更新時(shí)間:2019年07月18日 09:20:30   作者:xiangxx@酷  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近寫(xiě)識(shí)別行駛證功能,點(diǎn)擊拍照把指定區(qū)域截取,生成圖片功能。

系統(tǒng)相機(jī)。該組件是原生組件,使用時(shí)請(qǐng)注意相關(guān)限制。 掃碼二維碼功能,需升級(jí)微信客戶端至6.7.3。

微信小程序Camera相機(jī)地址

我們看下效果:

1、首先生成一個(gè)CanvasContext:

/**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function(options) {
 requireJs.adaptionIphoneX(this);
 
 this.ctx = wx.createCameraContext()
 
 },

2、相機(jī)的 wxml樣式

<camera wx:if='{{isShowCamera}}' device - position="width" flash="off" style="width:{{windowWidth}}px; height:{{windowHeight}}px;">
 
 <cover-view class='camerabgImage-view'>
  <cover-image class='bgImage' src='{{isIphoneX==true?"../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}'> </cover-image>
 
  <cover-view class='cameratop-view1'>中華人民共和國(guó)機(jī)動(dòng)車行駛證</cover-view>
  <cover-view class='cameratop-view2'>(行駛證主頁(yè))</cover-view>
  <cover-view class='cameracenter-view' style='top:{{isIphoneX==true?"52%":"62%"}}'>請(qǐng)對(duì)準(zhǔn)左下角發(fā)證機(jī)關(guān)印章</cover-view>
 
  <!-- 拍照按鈕 --> 
  <cover-view class='camerabotton-view' style='bottom:{{isIphoneX==true?"75px":"0px"}}'>
  <cover-image class='cancelphoto' src='../../myImage/vehicle/quxiao.png' bindtap='cancelPhotoAction'></cover-image>
  <cover-image class='takephoto' src='../../myImage/vehicle/paizhao.png' bindtap='takePhotoAction'></cover-image>
  
  <cover-view class='skipphoto' bindtap='skipphotoAction'>{{skipphotoStatus==1?"跳過(guò)":""}}
  </cover-view>
  
  </cover-view>
 
 </cover-view>
 
 </camera>
 
 <canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>

3、相機(jī)的 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 中訪問(wèn)原生組件 camera  主要針對(duì)相機(jī)權(quán)限處理

微信小程序權(quán)限地址

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: '請(qǐng)求授權(quán)您的攝像頭',
   content: '如需正常使用此小程序功能,請(qǐng)您按確定并在設(shè)置頁(yè)面授權(quán)用戶信息',
   confirmText: '確定',
   success: res => {
   if (res.confirm) {
    wx.openSetting({
    success: function (res) {
     console.log('成功');
     console.log(res);
     if (res.authSetting['scope.camera']) { //設(shè)置允許獲取攝像頭
     console.log('設(shè)置允許獲取攝像頭')
     wx.showToast({
      title: '授權(quán)成功',
      icon: 'success',
      duration: 1000
     })
     that.setData({
      isShowCamera: true,
     })
 
     } else { //不允許
     wx.showToast({
      title: '授權(quán)失敗',
      icon: 'none',
      duration: 1000
     })
     wx.redirectTo({
      url: 'addCarInfo/addCarInfo',
     })
     }
    }
    })
   } else { //取消
    wx.showToast({
    title: '授權(quán)失敗',
    icon: 'none',
    duration: 1000
    })
    wx.redirectTo({
    url: 'addCarInfo/addCarInfo',
    })
   }
   }
  })
 
  }
 })
 },

5、頁(yè)面初始化數(shù)據(jù)

/**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 isShowCamera: false,
 width: 10,
 height: 10,
 src: "",
 image: "",
 skipphotoStatus: "0",// 1跳過(guò) 0沒(méi)有跳過(guò)
 isShowImage: false
 },

 6、點(diǎn)擊拍照 設(shè)置照片, 返回拍照?qǐng)D片

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

 7、針對(duì)原圖片截取尺寸 與 截取后的圖片

 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)
   //過(guò)渡頁(yè)面中,圖片的路徑坐標(biāo)和大小
   that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
   wx.showLoading({
    title: '數(shù)據(jù)處理中...',
    icon: 'loading',
    duration: 10000
   })
   // 這里有一些很神奇的操作,總結(jié)就是MD拍出來(lái)的照片規(guī)格居然不是統(tǒng)一的過(guò)渡頁(yè)面中,對(duì)裁剪框的設(shè)定
   that.canvas.setStrokeStyle('black')
   that.canvas.strokeRect(image_x, image_y, image_width, image_height)
   that.canvas.draw()
   setTimeout(function() {
    wx.canvasToTempFilePath({ //裁剪對(duì)參數(shù)
    canvasId: "image-canvas",
    x: image_x, //畫(huà)布x軸起點(diǎn)
    y: image_y, //畫(huà)布y軸起點(diǎn)
    width: image_width, //畫(huà)布寬度
    height: image_height, //畫(huà)布高度
    destWidth: image_width, //輸出圖片寬度
    destHeight: image_height, //輸出圖片高度
    success: function(res) {
     that.setData({
     image: res.tempFilePath,
     })
     //清除畫(huà)布上在該矩形區(qū)域內(nèi)的內(nèi)容。
     // 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);
     //在此可進(jìn)行網(wǎng)絡(luò)請(qǐng)求
     PublicJS.drivinglicenseUpload(res.tempFilePath, that.uploadFile);
    },
    fail: function(e) {
     wx.hideLoading()
     wx.showToast({
     title: '出錯(cuò)啦...',
     icon: 'loading'
     })
     if (this.data.skipphotoStatus == 1) {
     wx.redirectTo({
      url: 'addCarInfo/addCarInfo',
     })
     } else {
     wx.navigateBack({
      delta: 1
     });
     }
    }
    });
   }, 1000);
   }
  })
  }
 })
 },
 
// 接口返回結(jié)果
 
uploadFile: function(data) {}

 微信小程序Canvas畫(huà)布地址

1.canvas組件是由客戶端創(chuàng)建的原生組件,它的層級(jí)是最高的。

2.請(qǐng)勿在scroll-view中使用canvas組件。

3.css動(dòng)畫(huà)對(duì)canvas組件無(wú)效。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)

    詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)

    這篇文章主要介紹了詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 解決js下referer兼容各大瀏覽器的方法

    解決js下referer兼容各大瀏覽器的方法

    眾所周知,我們web開(kāi)發(fā)人員痛恨IE瀏覽器,因?yàn)镮E不支持標(biāo)準(zhǔn),標(biāo)準(zhǔn)外的默認(rèn)行為又和其他瀏覽器經(jīng)常不一致,所以我們?cè)谧鲰?xiàng)目的時(shí)候,經(jīng)常需要專門(mén)針對(duì)IE來(lái)做些文章,當(dāng)然對(duì)于referer也不例外,今天我們就來(lái)看下如何讓referer兼容主流瀏覽器
    2014-11-11
  • javascript客戶端遍歷控件與獲取父容器對(duì)象示例代碼

    javascript客戶端遍歷控件與獲取父容器對(duì)象示例代碼

    本篇文章主要是對(duì)javascript客戶端遍歷控件與獲取父容器對(duì)象示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • 再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)

    再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)

    由于javascript無(wú)法獲取img文件頭數(shù)據(jù),必須等待其加載完畢后才能獲取真實(shí)的大小,所以lightbox類效果為了讓圖片居中顯示,導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。
    2011-03-03
  • vue+ts下對(duì)axios的封裝實(shí)現(xiàn)

    vue+ts下對(duì)axios的封裝實(shí)現(xiàn)

    這篇文章主要介紹了vue+ts下對(duì)axios的封裝實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 為什么說(shuō)JavaScript預(yù)解釋是一種毫無(wú)節(jié)操的機(jī)制詳析

    為什么說(shuō)JavaScript預(yù)解釋是一種毫無(wú)節(jié)操的機(jī)制詳析

    這篇文章主要給大家介紹了關(guān)于為什么說(shuō)JavaScript預(yù)解釋是一種毫無(wú)節(jié)操的機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧
    2018-11-11
  • JavaScrip實(shí)現(xiàn)圖片壓縮與分辨率等比例縮放

    JavaScrip實(shí)現(xiàn)圖片壓縮與分辨率等比例縮放

    這篇文章主要為大家詳細(xì)介紹了如何使用JavaScrip實(shí)現(xiàn)圖片壓縮與分辨率等比例縮放,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • Webpack如何引入bootstrap的方法

    Webpack如何引入bootstrap的方法

    本篇文章主要介紹了Webpack如何引入bootstrap的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)

    JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)

    這篇文章主要介紹了JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Javascript 數(shù)組添加一個(gè) indexOf 方法的實(shí)現(xiàn)代碼

    Javascript 數(shù)組添加一個(gè) indexOf 方法的實(shí)現(xiàn)代碼

    Javascript 的字符串有個(gè) indexOf 的方法,能夠返回字符在指定的字符串中的位置,非常有用,本文介紹了如何給 Javascript 數(shù)組也添加一個(gè)類似的方法。
    2009-09-09

最新評(píng)論