HTML5: 实现调用系统拍照或者选择照片并预览

最新推荐文章于 2022-10-15 16:00:08 发布
最新推荐文章于 2022-10-15 16:00:08 发布
阅读量214 收藏
点赞数
原文链接：http://www.cnblogs.com/storebook/p/9047303.html
版权
ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览

 

1.返回顶部
1、 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title></title>
</head>
<body>
    <input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera" /><br />
   <div>
       <img src="" id="img"  height="200"/>
   </div>
    <!--
    # 解析
    # accept 属性（允许上传两种文件类型：gif 和 jpeg）
    # capture 捕获到系统默认的设备，有三个参数值可设置  camera--照相机； camcorder--摄像机； microphone--录音
    # js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，
    # 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
    -->

    <script>
        var upload = function (c, d) {
            "use strict";
            var $c = document.querySelector(c),
                $d = document.querySelector(d),
                file = $c.files[0],
                reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $d.setAttribute("src", e.target.result);
            };
        };
        //# 解析
        //# 参数在上面 HTML 就已经讲解了，
        //# file 表示你选中的那个图片，然后它里面有几个属性 name、size、type、slice等，也都非常实用，

        //# FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
        //# 调用 FileReader 的 readAsDataURL 接口，将启动异步加载文件内容，通过给 reader 监听一个 onload 事件，
        //# 将数据加载完毕后，在onload事件处理中，通过 event 的 result 属性即可获得文件内容，然后扔进 img 的 src 即可 打开图片并预览。
    </script>
</body>
</html>
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、参考
2、
 
6.
warn作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/9047303.html

weixin_30664615
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5照片预览
11-11
本资源是html5照片预览，下载解压部署到tomcat下边就可以访问了
html调用摄像头拍照，并生成预览
HoperandEvian的专栏
10-21 2825
参考内容：http://blog.jianchihu.net/talking-about-the-html5-camera-api.html
HTML5图像预览
qq_32089551的博客
07-04 1063
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预览与查看原图</title> <style type="text/css"> body{ background: #f8f8f8;} #drag{ widt...
HTML5 图片上传 带预览功能 (pc,手机都能适配)
02-16
HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型
html5调用本地摄相头拍照上传相片
03-01
本项目是一个html5调用本地摄相头拍照上传相片的示例代码，项目很少，代码简单，应该一看就会的，需要用chrome浏览器或opern浏览器，版本要高一些才行。
webcam html5 实现网站调用摄像头拍照
07-25
近期公司要在做一个身份证采集信息，拍照取人像,本项目提供了基本的拍照实现，实现照片预览存储请查看https://blog.csdn.net/qq_29099209/article/details/81201461
javascript实现摄像头拍照预览
12-13
使用javascript实现电脑摄像头的打开和截图的功能，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>摄像头调用实例</title> [removed]...
HTML5视频上传（包含html5自带拍照，录像，音频，附件）
08-30
html5视频前端视频上传，手机拍照上传，手机录像上传。HLMT5中input实现多种文件上传,视频上传,图片上传，调用手机摄像头，照相机，相册等功能。
html5 canvas标签的剪切 用到jquery的插件jcrop
03-28
用到了html5 的video标签 调用摄像头拍照后在canvas标签中显示 利用jquery的jcrop插件对拍摄的照片进行剪切 预览 design里有jcrop的demo 还有.php的实现代码 .NET工程里有 C# 和 .htm版的 反转还有些问题 剪切能实现...
html5在线拍照,HTML5整合本地摄像头，实现视屏预览及拍照上传
weixin_39628551的博客
05-30 569
WebRTC(Web Real-Time Communication，网页实时通信)，是一个支持网页浏览器进行实时语音对话或视频对话的API。视频流HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia (请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Vi...
前端选择图片后纯前端预览
qq_60391201的博客
10-15 315
在上传图片文件时，对选取的图片进行预览。
html 如何设置选择图片,html中如何设置默认图片？
weixin_35182280的博客
06-04 1510
前言大家可能都知道img标签是怎么设置默认图片的，但是你知道background-img是如何设置默认图片的嘛？img这里是应用了img标签的``事件，当加载失败就用默认图片地址。但是这里可能出现如果默认图片地址也加载不出来，或者失败，在IE内核的浏览器下就会反复加载，出现死循环，最后造成堆栈溢出错误。因此， 需要用下面两种方法解决：更改 代码为其它处理方式或者确保 中的默认图片足够小，并且存...
C++queue介绍及详细使用示例（源代码）
最新发布
05-23
deque（双端队列）是C++标准模板库（STL）中的一个容器，它支持在序列的两端（前端和后端）快速插入和删除元素。deque 通常在需要快速地在两端添加或移除元素，但又不想承受像 list 那样的额外开销时使用。 deque的主要特性： 双端操作：deque 允许在序列的前端和后端快速插入和删除元素。 内部引用：deque 通常不会将所有元素都存储在连续的内存块中，而是将元素存储在多个较小的、独立的内存块中，并通过内部引用机制来管理这些内存块。这使得 deque 在进行前端插入和删除操作时比 vector 更高效，因为 vector 在这些操作时需要移动所有元素。 迭代器：deque 支持双向迭代器，可以向前或向后遍历元素。 随机访问：尽管 deque 的元素不是连续存储的，但它仍然支持通过索引直接访问元素（类似于 vector）。
实验报告3.doc
05-23
实验报告3.doc
（基于Golang 1.18简单封装的Gorm分页插件）.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
vue调用企业微信拍照接口照片增加水印并可以预览
07-12
您可以使用企业微信提供的拍照接口，结合Vue进行调用和水印功能的实现。以下是一个简单的实现示例： 1. 首先，确保您已经引入了企业微信的JavaScript SDK，可以在HTML文件中添加以下代码： ```html <script src="https://qydev.weixin.qq.com/sdk/js/qywx.js"></script> ``` 2. 在Vue组件中，可以创建一个拍照按钮，并绑定点击事件： ```html <template> <div> <button @click="takePhoto">拍照</button> <img v-if="photoUrl" :src="photoUrl" alt="照片预览"> </div> </template> <script> export default { data() { return { photoUrl: '' }; }, methods: { takePhoto() { // 调用企业微信拍照接口 wx.invoke('camera', {}, (res) => { if (res.err_msg === 'camera:ok') { // 拍照成功，获取照片的临时文件路径 const tempPhotoUrl = res.localIds[0]; this.addWatermark(tempPhotoUrl); } }); }, addWatermark(tempPhotoUrl) { // 创建一个Canvas元素 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 创建一个新的Image对象，用于加载照片 const image = new Image(); image.onload = () => { // 在Canvas上绘制照片 canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); // 绘制水印文字 context.font = '20px Arial'; context.fillStyle = 'red'; context.fillText('水印文字', 10, 30); // 将Canvas转换为Base64格式的图片数据 const base64PhotoUrl = canvas.toDataURL('image/jpeg'); // 更新预览照片的URL this.photoUrl = base64PhotoUrl; }; image.src = tempPhotoUrl; } } }; </script> ``` 在上述示例中，首先调用企业微信的`camera`接口进行拍照，成功后获取照片的临时文件路径。然后，创建一个Canvas元素，将照片绘制到Canvas上，并添加水印文字。最后，将Canvas转换为Base64格式的图片数据，并更新预览照片的URL。 请注意，以上示例仅为演示目的，实际应用中可能需要根据您的需求进行适当修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值