小程序调用相机拍照上传

用的wpy框架,有this,原声小程序就按照你们的调方法就行了

     //打开相机
    openCream() {
        const _this = this;
        wx.showActionSheet({
          itemList: ["拍照"],//['拍照','相册']
          itemColor: "",
          //成功时回调
          success: function(res) {
            if (!res.cancel) {
              /* res.tapIndex返回用户点击的按钮序号,从上到下的顺序,从0开始比如用户点击本例中的拍照就返回0,相册就返回1我们res.tapIndex的值传给chooseImage()*/
              _this.chooseImage(res.tapIndex);
            }
          },
          //失败时回调
          fail: function(res) {
            console.log("调用失败");
          },
          complete: function(res) {},
        });
      },
    chooseImage(){
        let this_ = this;
        wx.chooseImage({
          //count表示一次可以选择多少照片
          count: 1,
          //sizeType所选的图片的尺寸,original原图,compressed压缩图
          sizeType: ["original", "compressed"],
          //如果sourceType为camera则调用摄像头,为album时调用相册
          sourceType: ["camera"],
          success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths;
            this_.temSrc = tempFilePaths[0];//保存选择图片的本地地址,需要上传得到真正的url
            wx.uploadFile({//上传
              url: api.fileUpload,
              filePath: tempFilePaths[0],
              header: {
                uapAccessToken: accessToken,
                uapRefreshToken: refreshToken,
            },
            name: 'file',
               success(re) {
                 const data = JSON.parse(re.data);
                 this_.src = data.url
                 this_.$apply()//wpy框架需要
              },
              fail() {
                 console.log()
              }
            })
       },
    });
  }
微信小程序调用相机拍照后添加时间地点水印,可按以下步骤实现: 1. **调用相机拍照**:使用上传控件限制只能拍照,不能从相册选择。示例代码如下: ```html <van-uploader capture="{{['camera']}}" multiple="true" preview-size="{{screenWidth*0.2}}" file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="deleteImg"> </van-uploader> ``` 此代码通过`capture="{{['camera']}}"`属性确保只能调用相机拍照 [^2]。 2. **获取位置信息**:利用官方 API `chooseLocation` 获取位置信息。例如在 JavaScript 代码中可以这样使用: ```javascript wx.chooseLocation({ success: function (res) { // res.name 是获取到的位置名称 let location = res.name; }, fail: function (err) { console.log(err); } }); ``` 3. **获取本地时间**:使用 JavaScript 来获取本地时间。示例代码如下: ```javascript let date = new Date(); let year = date.getFullYear(); let month = String(date.getMonth() + 1).padStart(2, '0'); let day = String(date.getDate()).padStart(2, '0'); let hours = String(date.getHours()).padStart(2, '0'); let minutes = String(date.getMinutes()).padStart(2, '0'); let seconds = String(date.getSeconds()).padStart(2, '0'); let time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; ``` 4. **绘制水印到图片上**:通过 `canvas` 来绘制水印,将获取到的时间和地点信息绘制到 `canvas` 上,最后使用 `canvasToTempFilePath` 生成带有水印的图片。示例代码如下: ```javascript // 获取 canvas 上下文 const ctx = wx.createCanvasContext('myCanvas'); // 绘制图片 ctx.drawImage(tempFilePath, 0, 0, canvasWidth, canvasHeight); // 绘制时间水印 ctx.setFontSize(20); ctx.setFillStyle('#ffffff'); ctx.fillText(time, 10, 30); // 绘制地点水印 ctx.fillText(location, 10, 60); // 绘制到 canvas ctx.draw(false, function () { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function (res) { let watermarkedImagePath = res.tempFilePath; }, fail: function (err) { console.log(err); } }); }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值