精华内容
下载资源
问答
  • 微信小程序拍照上传加水印

    千次阅读 2020-05-26 13:27:47
    camera.wxml 拍照 预览 camera.js takePhoto() { const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath }); let that = this; wx....

    camera.wxml

    <!--pages/list/media/camera/camera.wxml-->
    <camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <button type="primary" bindtap="takePhoto">拍照</button>
    <view>预览</view>
    <image mode="widthFix" src="{{src}}"></image>
    <canvas class='canvas' style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" canvas-id="firstCanvas"></canvas>
    

    camera.js

    takePhoto() {
     const ctx = wx.createCameraContext()
     ctx.takePhoto({
       quality: 'high',
       success: (res) => {
         this.setData({
            src: res.tempImagePath
         });
         let that = this;
         wx.getImageInfo({
           src: res.tempImagePath,
           success:(ress)=>{
             let date = "水印内容";    //作为水印
             let ctx = wx.createCanvasContext('firstCanvas')    //创建画布
             let textToWidth = ress.width / 3 * 0.5  //这里设置的是水印位置
             let textToHeight = ress.height / 3 * 0.9
             that.setData({
               canvasHeight: ress.height/3,  //画布大小,除以三是变小处理快,自行修改
               canvasWidth: ress.width/3
             })
             //将图片src放到cancas内,宽高为图片大小
             ctx.drawImage(res.tempImagePath, 0, 0, ress.width/3, ress.height/3)
             //将声明的时间放入canvas
             ctx.setFontSize(14) //注意:设置文字大小必须放在填充文字之前,否则不生效
             ctx.setFillStyle('blue')
             ctx.fillText(date, textToWidth, textToHeight)    //水印内容,位置
             // ctx.strokeText(date, ress.width, ress.height)
             wx.showLoading({
               title: '制作水印中...',
             })
             ctx.draw(false, () => {//开始制作
               setTimeout(() => {//使用定时是因为制作水印需要时间,设置定时才不会出bug
                 wx.canvasToTempFilePath({//将画布中内容转成图片,即水印与图片合成
                   canvasId: 'firstCanvas',
                   success: (res) => {
                     wx.hideLoading()
                     wx.saveImageToPhotosAlbum({//保存到手机
                        filePath: res.tempFilePath,
                        success(res) {
                          console.log('1')
                        }
                     })
                   }
                 })
               }, 500)
             })
           }
         })
       }
     })
    }
    
    展开全文
  • 在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的。本文知识点:1、微信小程序选择图片wx.chooseImage()...

    在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的。本文知识点:1、微信小程序选择图片wx.chooseImage()接口的使用2、微信小程序选择视频wx.chooseVideo()接口的使用3、微信小程序上传文件接口wx.uploadFile()的使用4、nodejs上传文件multer模块的使用效果注意:1、在微信开发工具里选择视频接口wx.chooseVideo()返回的数据有视频缩略图字段(thumbTempFilePath),在真机上没有;2、上传视频时,compressed压缩字段无效,不知是所有手机无效还是部分,本文测试时,使用的是华为mate9,这也是小程序的深坑之一;3、上传视频时,使用录制方式,华为mate9视频大小过大,录制的6秒钟视频就有20多M,网上说好像mate9的视频编码格式是h265,普通手机为h264,也许是无法压缩问题引起的;所以尝试了另外一种方式录制,使用camera组件,这种方式需要自己自定义录制界面:点击这里。小程序代码在utils下的wechat.js文件里添加代码,如有则忽略/***从本地相册选择图片或使用相机拍照。*@param{number}count最多可选图片的数量*@param{array}sizeTypeoriginal原图,compressed压缩图*@param{array}sourceTypealbum从相册选图,camera使用相机*/staticchooseImage(count1,sizeType['compressed'],sourceType['album','camera']){returnnewPromise((resolve,reject)wx.chooseImage({count,sizeType,sourceType,success:resolve,fail:reject}));}/***拍摄视频或从手机相册中选视频,返回视频的临时文件路径。*@param{boolean}compressed是否压缩*@param{array}sourceTypealbum从相册选图,camera使用相机*@param{number}maxDuration拍摄视频最长拍摄时间,单位秒。最长支持60秒*/staticchooseVideo(compressedtrue,sourceType['album','camera'],maxDuration60){returnnewPromise((resolve,reject)wx.chooseVideo({sourceType,compressed,maxDuration,success:resolve,fail:reject}));}/***将本地资源上传到开发者服务器,客户端发起一个HTTPSPOST请求*@param{string}url开发者服务器url*@param{string}filePath要上传文件资源的路径*@param{string}name*@param{object}formDataHTTP请求中其他额外的formdata*/staticuploadFile(url,filePath,name,formData{openid:"test"}){returnnewPromise((resolve,reject){letopts{url,filePath,name,formData,header:{'Content-Type':"multipart/form-data"},success:resolve,fail:reject};wx.uploadFile(opts);});}jsletappgetApp();letwechatrequire("../../utils/wechat");Page({data:{tempImagePath:"",//拍照的临时图片地址tempThumbPath:"",//录制视频的临时缩略图地址tempVideoPath:"",//录制视频的临时视频地址type:"chooseImage",},onLoad(){},camera(e){let{type}e.target.dataset;this.setData({type})console.log("开始上传准备",type"chooseImage"?"图片":"视频");//拍照if(type"chooseImage"){console.log("选择图片");wechat.chooseImage().then(d{let{path,size}d.tempFiles[0];this.setData({tempImagePath:path,});returnwechat.uploadFile("https://xx.xxxxxx.cn/api/upload",path,"uploadImg")}).then(d{console.log(d);}).catch(e{console.log(e);})}//录视频elseif(type"chooseVideo"){wechat.chooseVideo().then(d{console.log(d);let{tempFilePath,thumbTempFilePath,size}d;this.setData({//tempThumbPath:thumbTempFilePath,tempVideoPath:tempFilePath,});returnwechat.uploadFile("https://xx.xxxxxx.cn/api/upload",tempFilePath,"tempVideoPath");}).then(d{console.log(d);}).catch(e{console.log(e);})}}})htmlviewclass"view"viewclass"window"imageclass"cover-9"src"{{tempImagePath}}"bindtap"img"wx:if"{{type'chooseImage'}}"/imagevideoclass"cover-9"src"{{tempVideoPath}}"poster"{{tempThumbPath}}"wx:if"{{type'chooseVideo'}}"/videoviewclass"window-2"buttonbindtap"camera"type"primary"data-type"chooseImage"图片/buttonbuttonbindtap"camera"type"primary"data-type"chooseVideo"视频/button/view/view/viewcsspage{height:100%;}.view{width:100%;height:100%;}.window{width:100%;height:100%;}.window-2{display:flex;flex-direction:row;}.cover-9{width:728rpx;height:80%;margin:010rpx;border:2rpxsolid;border-radius:5px;}button{margin:010rpx;width:100%;}nodejs代码constmulterrequire('multer');letpathrequire("path");//上传文件配置conststoragemulter.diskStorage({//文件存储位置destination:(req,file,cb){cb(null,path.resolve(__dirname,'../uploads/tmp/'));},//文件名filename:(req,file,cb){cb(null,`${Date.now()}_${Math.ceil(Math.random()*1000)}_multer.${file.originalname.split('.').pop()}`);}});constuploadCfg{storage:storage,limits:{//上传文件的大小限制,单位bytesfileSize:1024*1024*20}};router.post("/api/upload",async(req,res){letuploadmulter(uploadCfg).any();upload(req,res,async(err){if(err){res.json({path:`//uploads/tmp/${uploadFile.filename}`});console.log(err);return;};console.log(req.files);letuploadFilereq.files[0];res.json({path:`//uploads/tmp/${uploadFile.filename}`});});})1.

    后端打印2.

    上传的文件意外金喜的博客:http://blog.csdn.net/zzwwjjdj1更多小程序文章:http://blog.csdn.net/zzwwjjdj1/article/details/79351547

    展开全文
  • cb(null,file.originalname)//微信路径是一串乱码 如果是web就可以得到文件名 console.log(file) console.log(req.body.file) }, }) 路由配置 router.post("/file",upload.single('img'),async (ctx)=>{ function ...

    代码js

    const w=this
    wx.showActionSheet({
      itemList: ['相册','相机'],//对应0相册 1相机
      success:function(res){
        console.log(res)
        if(res.tapIndex==0||res.tapIndex==1){
          wx.chooseImage({//选择照片
            complete: (res) => {},
            success:function(res){
              console.log(res)//返回临时文件信息
          const a=wx.uploadFile({//上传文件路径
                filePath: res.tempFilePaths[0],
                name: 'img',
                url: 'https://25q686n876.qicp.vip/file',
                formData:{file:"123"},//附加信息与formdata对象一样append
                success:function(res){
                  console.log(res.data)
                }
              })
          a.onProgressUpdate((res)=>{console.log(res)})//后台上传观察进度
                  w.setData({//获取临时路径 然后image组件预览
                    src:res.tempFilePaths[0]
                  })
            }
          })
        }
      }
    })
    

    nodejs代码
    const multer = require(‘koa-multer’);

    //以下是配置

    var storage = multer.diskStorage({
    	//定义文件保存路径
    	destination:function(req,file,cb){
    	    cb(null,'D:/koa/static/uploads/');//路径根据具体而定。如果不存在的话会自动创建一个路径
    	},                       //注意这里有个,
    	//修改文件名
    	filename:function(req,file,cb){
    	    var fileFormat = (file.originalname).split(".");
              //  cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
              cb(null,file.originalname)//微信路径是一串乱码 如果是web就可以得到文件名
              console.log(file)
              console.log(req.body.file)
        },
        
    })
    
    路由配置
    
    router.post("/file",upload.single('img'),async (ctx)=>{
        function file(){
            return new Promise((resovle,rejects)=>{
                    resovle({fil:2})
                    console.log(ctx.req.body.file)
            })
        }
        ctx.body=await file();
    })
    
    展开全文
  • 主要介绍了微信小程序拍照和摄像功能实现方法,结合实例形式分析了微信小程序拍照与摄影功能的原理、相关实现技巧与注意事项,需要的朋友可以参考下
  • 前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信...

      前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发,第七章:微信小程序编辑名片页面开发,第八章:微信小程序分组开发与左滑功能实现。)

    第九章:微信小程序拍照收纳开发以及删除名片等

    还是先来看看我们今天的主题——拍照收纳。

    拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面,大家可以翻翻之前的教程。

    这个布局很快,wxml 没多少内容。

    拍照收纳的原理是收纳名片功能,步骤是打开微信的拍照 API,同时支持选择本地图片 wx.chooseImage 接口。

    取到图片路径需上传图片文件到后台服务器,这里参照文档打印三个回调。

    但是我发现在开发者工具测试的时候,没有任何打印信息,后台同样也没有接到我上传过去的图片。

    选择一张图片,点击打开后。控制台的 console 没有成功或者失败的回调。

    由于尚处内测版本,暂时还不确定是开发者工具上的 bug 还是 API 接口问题,总之这里影响了小程序开发,我已经写邮件给微信做了反馈。

    如果图片上传成功,后台取到图片会去调一个识别信息操作,最后把识别到的信息传给我们前台进行渲染,最后把信息保存到名片夹里面,收纳名片流程才算走通。

    再补充下名片夹页面的名片删除吧:

    每个名片夹后面都带个删除功能,这个功能是通过左滑出现。

    点击删除,出现是否确定删除弹框(使用自带的模态框组件)。

    确定与取消事件。

    由于这里名片分为,线上收纳与线下收纳。故而多了个 if 判断,走的删除 request 不是一个接口,其他都相差不多。这里最重要的是要获取到 cardId,才能知道被删除的是哪张名片。

    名片的父元素绑定的全部事件,以及需要用到的一些自定义参数。Id 用在左滑上data-card_id 用在页面跳转与删除上,data-card_type 用在判断线上与线下名片。

    cardId 可以在 bindtouchstart 上取到,因为左滑事件是发生 bindtouchstart 事件上。

    当然后面需要用到的值还是先定义个 var 存起来。

    删除完之后还需重新刷新下首页。

    并且提升下用户体验,告诉用户名片删除成功。

    最后一提,当列表很多时,我们需要确定点击到的是那个信息。

    上面的信息都是 block 循环出来的,bindtap 点击事件,然后就是 id=”{{pms.type}}”,重点就是这个 id 来判断被点击的对象。

    操作数据,我们一定要先熟悉好数据的结构,故而在开发前和后台一定要约定好数据结构,熟悉数据结构后,其实开发起来就如庖丁解牛,非常快速(大家开发了小程序后,有没有对 zepoto 与 jQuery 产生反感?哈哈!)

    好了,关于拍照组件的相关内容就写到这里吧!这一章内容就算是博卡君教程的完结篇了。虽然写的内容中包含小程序开发工具的问题,不过我还是推荐大家都尝试调用一下拍照相关功能,看看这些问题在你的机器上会不会出现。按照微信的官方文档,我尝试给 weixin_developer@qq.com 那个邮箱发了邮件报告 bug。没想到很快收到了官方回复,确认了这点。希望尽快得到更新版,一起期待吧?

    原文https://my.oschina.net/wwnick/blog/753597

    转载于:https://www.cnblogs.com/ytkah/articles/5930267.html

    展开全文
  • 主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • * 上传图片 */ chooseimage: function () { var _this = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 ...
  • 微信小程序拍照识别垃圾分类|垃圾分类查询小程序|拍照识别垃圾分类小程序 微信小程序拍照识别垃圾分类查询小程序|拍照识别垃圾分类小程序 最近全中国人都在讨论一件事情那就是垃圾分类! 从上海开始到全国46个城市...
  • 微信小程序拍照闪退

    千次阅读 2020-07-31 16:05:04
    下面对微信小程序拍照进行了优化后,经过测试拍照闪退的概率明显少多了,虽然不能保证拍照不闪退,至少目前没有出现了。记录一下方法。 /** * 选择照片 */ takePhoto: function () { var that = this; var ...
  • 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给...
  • 在做冰箱这个项目时,对物品的图片需要有一个上传功能。今天在这里讲一下这个功能是如何实现的。首先讲述一下这个功能的完整描述:有一个上传图片的按钮,点击按钮,弹出操作菜单:从手机相册选择,拍照。点击从...
  • 微信小程序 拍照打卡功能实现

    千次阅读 2020-05-06 15:41:09
    微信小程序 拍照打卡功能实现小程序端签到页面wxml签到页面js拍照页面wxml拍照页面jsJava后台保存照片保存打卡数据 由于拍照组件是相当于一个块,用隐藏是显示的方法不太好,为了更好的用户交互,选择了在一个新的...
  • 微信小程序图片上传并移除

    千次阅读 2019-04-01 10:39:01
    微信小程序图片上传 ps: 最近项目使用到图片上传, 通过api中 wx.chooseImage(Object object)、wx.uploadFile实现 需求: 1. 最多上传3张图片,当第三张图片时,添加按钮隐藏, 反之显示 ​ 2. 每添加一张显示删除...
  • 主要介绍了微信小程序-拍照或选择图片并上传文件的相关资料,需要的朋友可以参考下
  • 一个进行文件图片传输的小程序,图片要高清图,所以小程序带有拍照功能,但是小程序拍的图片模糊,像微信相机拍的,有没有哪位知道是什么问题・_・?
  • 这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下upload.wxml拍照选取照片上传upload.js// ...
  • 主要介绍了微信小程序上传图片并进行压缩的实现代码,文中提到了上传图片并进行压缩的属性值,需要的朋友可以参考下
  • 微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家...
  • 微信小程序拍照的实现主要用到的组件就是 camera,这个组件主要就的调用手机的摄像头进行拍照,小程序拍照后上传到后台,后台通过算法识别垃圾的分类情况。这样就很方便的处理了我们平常不熟悉的垃圾分类,非常实用...
  • 微信小程序上传图片

    2019-05-28 14:23:05
    微信小程序上传图片 下面为实例代码,具体文档看小程序官方文档 //上传图片 chooseimage: function (e) { var _this = this; flag = "1"; wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], ...
  • 微信小程序拍照和摄像实例代码

    万次阅读 2018-01-20 10:33:26
    微信小程序拍照和摄像实例代码 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给...
  • 微信小程序头像上传

    千次阅读 2018-12-26 14:05:16
    itemList: ['从相册中选择', '拍照'], itemColor: "#f7982a", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) {  that.chooseWxImageShop('album');//从相册中选择 } ...
  • 但是具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序 作者Q--Q:1-3-7-9-1-7-4-4-6-4 先上效果: 我们小程序要用到的组件就是微信小程序的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,625
精华内容 1,450
关键字:

微信小程序拍照上传

微信小程序 订阅