UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

浏览器摄像头拍照并裁剪上传(原创)

所属分类：媒体,输入,其他-音频和视频,上传,独立的部件

 16181  120  查看评论 (19)
分享到微信朋友圈
X
浏览器摄像头拍照并裁剪上传(原创) ie兼容12
 查看演示  立即下载

注：您的设备一定要有摄像头，并在网页预览时允许访问设备！

更新时间：2021-01-19 00:33:50

// 完成上传   图片为base64 
$("#main__submit").click(function() {
    var ahis = $(this);
    console.log(cropper.getDataURL());
    ahis.hide(); //修改/url为后台地址，获取data参数，头像为base64编码字符，占用空间较小可直接存数据库。或者通过转码为字节存为文件即可 
    $.post("/url", {
        data: cropper.getDataURL()
    }, function(data) {
        ahis.show();
        ahis.html("OK");
    });
})
相关插件-音频和视频,上传,独立的部件
查看更多

jQuery视频轮播（原创）

 让视频像图片一样轮播
  音频和视频
 44770  370

js音频可视化插件Wavesurfer.js

 Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化，使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 65047  348

3D音频分析仪

 3D音频分析仪,效果那是相当的震撼。
  音频和视频
 41949  400

canvas视频录制(原创)

 mediarecoder录制媒体流 canvas绘制动画 导出录像视频
  音频和视频
 17601  150

讨论这个项目（19）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    江辞 0
    2022/2/15 16:52:05
    怎么向数据库里面保存啊

    回复
    Mirror Lake 0
    2021/8/23 3:09:39
    大哥这个怎么修改保存的图片大小和质量啊
        橘子0
        2024/2/8 10:43:20
        咋设置的 解决了吗
    回复
    ′ .湮 ?_ 0
    2021/5/18 9:41:28
    请问下怎么换成后置摄像头？
        杜福忠 、 0
        2021/5/25 15:18:35
        https://www.baidu.com/s?ie=UTF-8&wd=webcam%20%E5%90%8E%E7%BD%AE%E6%91%84%E5%83%8F%E5%A4%B4
    回复
    浮生若梦 2amor 0
    2021/3/1 17:21:35
    可以调用后置摄像头吗
        杜福忠 、 1
        2021/3/6 15:37:26

        搜索： webcam 后置摄像头  就可以看到很多写法。

        video: { facingMode: { exact: "environment" }
        ┈━ㄔ☆0
        2021/3/9 9:47:00
        大神，这个调用后置摄像头的代码放在哪里
        じ☆①仟零①液...0
        2022/7/17 21:39:54
        解决了没有？我也想要弄后置摄像头？
        じ☆①仟零①液...0
        2022/7/18 8:39:44

        我实现了，加在设置里面：

        $(function() {
    Webcam.set({
        width: 320,
        height: 320,
        image_format: 'png',
        jpeg_quality: 300,
        constraints: {
            facingMode: 'environment'
        }
    });

    Webcam.attach('#camera');
    window.setInterval("scan()", 5000);
});
        じ☆①仟零①液...0
        2022/7/18 9:12:22
        有个问题，我用来做扫一扫，不能自动聚焦，识别起来费力。
    回复
    加油2021 0
    2021/2/18 12:04:12
    这个是用flash的么? 没有flash能用不能?
        西瓜0
        2021/2/18 13:39:08
        不是flash，js实现。放心使用flash早就淘汰了
    回复
    彭久灵5704803654 0
    2021/1/26 21:55:59
    大神，传到FTP的方法能不能具体写下，小弟水平太菜，总是失败。
        杜福忠 、 0
        2021/2/5 20:00:40
        第一次上传插件，这么多人喜欢哈~ 因为这个是基于浏览器的，没有后台，很多方式可以上传，我刚查了资料JS的话有个 jsftp 插件，网上有很多资料，搜索一下这个词，很多教程
    回复
    nybuunn 0
    2021/1/19 9:54:07

    不错  不错  这个好

        杜福忠 、 0
        2021/2/5 20:04:48
        Thanks?(?ω?)?
    回复
    Dave Krinsky 0
    2021/1/19 0:38:25

    太牛逼了。 要的就是你

        杜福忠 、 0
        2021/2/5 20:04:26
        感谢收藏~ 第一次来网站上传。最近有客户要这个功能，也是在网上找了一圈，没有找到完全匹配的。就让前端写了一个样式， 再共享上来了，大家用的着就好😀
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复