精华内容
下载资源
问答
  • JavaScript拍照上传

    2018-09-29 11:26:38
    运用javascript写的拍照上传,可以自拍上传,也可以上传本地图片
  • 基于html5、JS实现的拍照上传图片

    千次下载 热门讨论 2015-01-26 16:34:36
    原理:调出摄像头,拍照保存到画布,将图片URi传送到后台
  • 主要为大家详细介绍了js实现手机拍照上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js调用本地摄像头拍照上传到web服务器。后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中。
  • 前端实现拍照上传demo

    2018-07-26 18:04:39
    一个pc端实现拍照,并且上传到后台的demo,生成的是base64码需要后台处理
  • js实现拍照截取上传

    2015-06-29 22:29:08
    使用js调用本地摄像头拍照后截取并上传到web服务器。用户也可从本地选择一张图片,然后可对选择的图片或拍照的图片进行拖动、缩放后截取,最后上传到web服务器。后台使用java实现图片的接收和存储,上传的图片默认...
  • 主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能,以及图片上传功能引用exif.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js开启摄像头拍照上传图片</title> </head> <body> <video id="video" width="640" height="480" autoplay="autoplay"></...
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>js开启摄像头拍照并上传图片</title>
    </head>
    <body>
    
    <video id="video" width="640" height="480" autoplay="autoplay"></video>
    <canvas id="canvas" style="display: none;" width="640" height="480"></canvas>
    <button onclick="openMedia()">开启摄像头</button>
    <button id="capture" onclick="takePhoto()">拍照</button>
    <button onclick="closeMedia()">关闭摄像头</button>
    <div><img id="imgTag" src="" alt="imgTag"></div>
    <script>
      let video = document.getElementById("video");
      let canvas = document.getElementById("canvas");
      let context = canvas.getContext("2d");
      // 开启摄像头
      function openMedia() {
         // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
         if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
    
                // 首先,如果有getUserMedia的话,就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    
                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
    
                // 否则,为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        //默认使用前摄像头,强制使用后置摄像头如下设置
        // let constraints = {video: { facingMode: { exact: "environment" } }};
        let constraints = {video: true};
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in video) {
                    video.srcObject = stream;
                } else {
                    // 防止在新的浏览器里使用它,应为它已经不再支持了
                    video.src = window.URL.createObjectURL(stream);
                }
                video.onloadedmetadata = function (e) {
                    video.play();
                };
            })
            .catch(function (err) {
                console.log(err.name + ": " + err.message);
            });
      }
      // 拍照
      function takePhoto() {
        //绘制画面
        context.drawImage(video, 0, 0, 640, 480);
        // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
        let img = document.getElementById('canvas').toDataURL();
            // 这里的img就是得到的图片
        console.log('img-----', img);
        document.getElementById('imgTag').src=img;
      }
      // 关闭摄像头
      function closeMedia() {
        if("srcObject" in video) {
          let stream = video.srcObject;
          let tracks = stream.getTracks();
          tracks.forEach(function(track) {
                track.stop();
              });
          video.srcObject = null;
        }
      }
    </script>
    </body>
    </html>
    

    参考:
    https://www.cnblogs.com/cangqinglang/p/10210826.html

    展开全文
  • 利用前端获取图片,js处理压缩后通过ajax上传后台存储
  • h5 调用ios原生相机拍照上传照片

    千次阅读 2018-10-23 11:50:42
    JSContext *context=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; NSString *alertJS= [NSString stringWithFormat:@"imgBase('%@')",dataStr];//准备执行的js代码 --...

    1.html中的点击按钮和回调显示标签---------------直接上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <input type="button" name="" value="拍照" onclick="takeIDcardImg()"> <!--点击拍照调用相机-->
        <br/>
        <p id="result">扫描结果:</p> <!--原生给h5值---插入html上-->
        
    <script>
        //调用APP的扫描方法   h5->app
        function takeIDcardImg(){
            app.takeIDcardImg('imgBase');
        }
    
    //扫描结果回调方法    app->h5
    function imgBase(result){
        document.getElementById("result").innerHTML = '扫描结果:' + result;
    }
    </script>
    </body>
    </html>

    2.使用---------- JavaScriptCore的----这里是创建了一个类,也可以用块回调。

    (1)。创建AppJSObject类继承NSObject .----------- AppJSObject.h

    #import <Foundation/Foundation.h>
    #import <JavaScriptCore/JavaScriptCore.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @protocol AppJSObjectDelegate <JSExport>
    
    -(void)takeIDcardImg:(NSString *)message;//--takeIDcardImg--方法名要是html中保持一致
    
    @end
    
    @interface AppJSObject : NSObject<AppJSObjectDelegate>
    
    @property(nonatomic,weak) id<AppJSObjectDelegate> delegate;
    
    @end
    
    NS_ASSUME_NONNULL_END
    

    (2).AppJSObject.m

    -(void)takeIDcardImg:(NSString *)message{
        NSLog(@"%@",message);
        [self.delegate takeIDcardImg:message];
    }

    3.ViewController控制起中

    #import "WebViewController.h"
    #import <JavaScriptCore/JavaScriptCore.h>
    #import "AppJSObject.h"
    
    @interface WebViewController ()<UIWebViewDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate, AppJSObjectDelegate>
    @property (nonatomic, strong) UIWebView * webView;
    @property (nonatomic, strong) UIImageView * imageVC;
    
    @end
    
    
    @implementation WebViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
        self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
        [self.view addSubview:_webView];
        self.webView.delegate = self;
        
        [self loadExamplePage:_webView];//本地加载
    }
    
    - (void)loadExamplePage:(UIWebView*)webView {
        NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
        NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
        NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
        [webView loadHTMLString:appHtml baseURL:baseURL];
    }
    
    
    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //NSLog(@"------UserAgent = %@", [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"]);
        JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        AppJSObject *jsObject = [AppJSObject new];
        jsObject.delegate = self;
        context[@"app"] = jsObject;
        
    }
    
    -(void)takeIDcardImg:(NSString *)message {
        [self openCamera];
        
    }
    /**
     *  调用照相机
     */
    
    - (void)openCamera {
        UIImagePickerController *picker = [[UIImagePickerController alloc] init];
        picker.delegate = self;
        picker.allowsEditing = YES; //可编辑
        //判断是否可以打开照相机
        if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
        {
            //摄像头
            picker.sourceType = UIImagePickerControllerSourceTypeCamera;
                    //出现这个问题,基本就是UI操作放在了非主线程中操作导致。我的问题是webview的回调,有时候会进入子线程处理。所以统一加上dispatch_async(dispatch_get_main_queue...
            dispatch_async(dispatch_get_main_queue(), ^{ //不加这句有时候点击会闪退 
                [self presentViewController:picker animated:YES completion:nil];
            });
        }
        else
        {
            NSLog(@"没有摄像头");
        }
        
    }
    
    #pragma mark - UIImagePickerControllerDelegate
    
    // 拍照完成回调
    
    //参数:图片选择器  字典参数
    
    -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{
        
        //通过key值获取到图片
        
        UIImage * image =info[UIImagePickerControllerOriginalImage];
        
        //NSLog(@"image=%@  info=%@",image, info);
        
        
        
        //判断数据源类型
        
        if (picker.sourceType == UIImagePickerControllerSourceTypePhotoLibrary) {
            
            //设置图片背景
            //        NSUserDefaults * user = [NSUserDefaults standardUserDefaults];
            //        NSData* imgData = UIImageJPEGRepresentation(image, 1);
            
            self.imageVC.image = image;
    
            
    
            [self dismissViewControllerAnimated:YES completion:nil];
            
        }
        
        if (picker.sourceType == UIImagePickerControllerSourceTypeCamera) {
            
            NSLog(@"在相机中选择图片");
            
            UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
            
            
            
            //设置图片背景
            
            self.imageVC.image = image;
            
            
    //        NSData *data = UIImageJPEGRepresentation(image, 1.0f);
    //
    //        NSString *encodedImageStr = [data base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];//新的方法
            
            
            NSData *imageData = UIImageJPEGRepresentation(image, 1.0f);
            NSString *dataStr = [imageData base64Encoding];//这个base64方法被遗弃了,但是前端能接受到,最新方法,他接受不到只能将就了
    
            JSContext *context=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
            NSString *alertJS= [NSString stringWithFormat:@"imgBase('%@')",dataStr];//准备执行的js代码 --这里的imgBase要与html 中保持一致
            [context evaluateScript:alertJS];//通过oc方法调用js
    
             dispatch_async(dispatch_get_main_queue(), ^{
                [self dismissViewControllerAnimated:YES completion:nil];
            });
            
        }
        
    }
    
    
    
    //进入拍摄页面点击取消按钮
    
    - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
    
    {
        
            dispatch_async(dispatch_get_main_queue(), ^{
                [self dismissViewControllerAnimated:YES completion:nil];
            });
        
    }

    4.还有就是前端要判断手机类型.UserAgent需要修改下在appdelegate中添加

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero];
        NSString *userAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
        NSString *newUserAgent = [userAgent stringByAppendingString:@"IOSAPP"];//自定义需要拼接的字符串
        NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:newUserAgent, @"UserAgent", nil];
        [[NSUserDefaults standardUserDefaults] registerDefaults:dictionary];
    }

    5.还有几种方法。参考链接。https://blog.csdn.net/dolacmeng/article/details/79623708

    展开全文
  • Javascript实现拍照上传压缩,旋转

    千次阅读 2017-10-08 15:45:01
    使用exif.js实现拍照上传并压缩旋转 1.先引入必须的文件 <script src="jquery.js"> <script src="exif-2.3.0.js"> <script src="pressImg.js"></script> 2.html代码 *">

    使用exif.js实现拍照上传并压缩旋转

    1.先引入必须的文件

    <script src="jquery.js"></script>
    <script src="exif-2.3.0.js"></script>
    <script src="pressImg.js"></script>
    

    2.html代码

    <input type="file" id="choose" accept="image/*">
    <div id="box">
    
    </div>
    

    3.main.js文件实现拍照上传,加压缩旋转

    var filechooser = document.getElementById("choose");
    var maxsize = 512 * 1024;//1kb = 1024B(字节)
    filechooser.onchange = function() {
        var file = this.files[0];
        EXIF.getData(file, function(){
            EXIF.getAllTags(this);
            EXIF.getTag(this, 'Orientation');
            console.log("最初的file对象");
            console.log(file);
            var size = file.size;//获取图片大小
            var reader = new FileReader();
            reader.onload = function(){
                var result = this.result;//base64图片字符串
                var img = new Image();
                img.src = result;
                //如果图片大小小于等于512kb时,则直接上传
                if (size <= maxsize) {
                    console.log("小于512kb时的上传");
                    console.log(img);
                    //旋转操作
                    obj.rotateImg(file,img);
                    img = null;
                    //上传   
                    return;//完成结束
                };
                //图片加载完毕之后进行压缩,然后上传
                if(img.complete) {
                    callback();
                }else {
                    img.onload = callback;
                };
                function callback() {
                    var data = obj.pressImg(img);
                    console.log("压缩后的图片(base64字符串)");
                    //将压缩后的base64字符串重新转为file对象
                    var newimgFile = obj.convertBase64UrlToBlob(data);
                    console.log(newimgFile);
                    //上传
                    //完成后置空
                    img = null;
                    //在页面中展示图片(展示效果用)
                    var img1 = new Image();
                    img1.id="imgCover";
                    img1.src = data;
                    console.log(img1);
                    //旋转操作
                    obj.rotateImg(file,img1);
                    //最后展示
                    $("#box").html(img1);
                };
            };
            reader.readAsDataURL(file);
        });
    };
    

    4.核心文件:

    var obj = {
        /**
         * 用于对图片进行压缩上传
         */
        pressImg: function(img){//img指图片格式为base64字符串的图片
            //用于压缩图片的canvas
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');
            //瓦片canvas
            var tCanvas = document.createElement("canvas");
            var tctx = tCanvas.getContext("2d");
            var initSize = img.src.length;
            var width = img.width;
            var height = img.height;
            //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
            var ratio;
            if((ratio = width * height / 4000000) > 1) {
                ratio = Math.sqrt(ratio);
                width /= ratio;
                height /= ratio;
            } else {
                ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            //铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //如果图片像素大于100万则使用瓦片绘制
            var count;
            if ((count = width * height / 1000000) > 1) {
                count = (Math.sqrt(count) + 1); //计算要分成多少块瓦片(计算平方根)
                //计算每块瓦片的宽和高
                var nw = (width / count);
                var nh = (height / count);
                tCanvas.width = nw;
                tCanvas.height = nh;
                for (var i = 0; i < count; i++) {
                    for (var j = 0; j < count; j++) {
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height);
            }
            //进行最小压缩
            var ndata = canvas.toDataURL('image/jpeg', 0.5);//改变这里的参数即可改变压缩率。(例如:0.1)
            console.log('压缩前:' + initSize);
            console.log('压缩后:' + ndata.length);
            console.log('压缩率:' + (100 * (initSize - ndata.length) / initSize) + "%");
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            return ndata;
        },
        /**
         * 用于将得到的base64位的字符串图片转化为file对象
         */
        convertBase64UrlToBlob: function(urlData){
            var bytes=window.atob(urlData.split(',')[1]);//去掉url的头,并转换为byte  
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            };
            return new Blob( [ab] , {type : 'image/png'});
        },
        /*用于对图片进行旋转操作*/
        rotateImg: function(imgFile,imgObj){
            console.log(imgFile.exifdata.Orientation);
            switch(imgFile.exifdata.Orientation){
                case 8:
                    //需要向左旋转90度。
                    console.log($(imgObj));
                    $(imgObj).css("transform","rotate(-90deg)");
                    break;
                case 3:
                    //需要向右旋转180度。
                    console.log($(imgObj));
                    $(imgObj).css("transform","rotate(180deg)");
                    break;
                case 6:
                    //需要向右旋转90度。
                    console.log($(imgObj));
                    $(imgObj).css("transform","rotate(90deg)");
                    break;
                case 1:
                    //不需要旋转
                    break;
            }
        }
    }
    
    展开全文
  • 利用exif.js解决IOS手机H5页面拍照上传照片旋转90度问题: upLoadPic($inputBorn, $inpOutBorn, 1); 其中$inputBorn为type="file"的input, $inpOutBorn为展示图片用的盒子,盒子要给宽高,默认的情况下,图片是以背景...
  • 本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下: index.jsp 展示界面,按钮点击拍照,将拍照图片显示 <img id="showImage_img1" class="showBigImg pic" style="display:none;...

    本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下:

    index.jsp
    展示界面,按钮点击拍照,将拍照图片显示

    <img id="showImage_img1" class="showBigImg pic" style="display:none;height:150px;width: 100%;" alt="暂无">
    <input type="hidden" class="u-input" id="imageUrl_img1" name="img1" v-model="userInfo.img1">
    <input title="上传照片" type="button" id="img1" onclick="toPhoto('img1')">
    

    index.js
    点击按钮跳转到拍照界面,回调函数将图片地址传回显示

    function toPhoto(code) {
        let url = contextPath + "/user/addUser/toPhoto.html?code=" + code;
        // 打开拍照界面,回调图片URL
        openDialog("Photo", "拍照", url, 980, 622, true, (o) => {
            if (o != null && o.imgUrl != null && o.imgUrl != undefined) {
                let code = o.code;
                let url = o.imgUrl;
                // 显示图片
                $("#showImage_" + code).prop("src", url).show();
                $("#imageUrl_" + code).val(url);
            }
        }, false);
    }
    

    拍照界面 photo.jsp

    <div style="text-align: center;padding-top: 20px;">
    	<video id="video" width="800px" height="400px" autoplay="autoplay"></video>
    </div>
    <div style="float: right;padding-top: 20px">
    	<canvas id="canvas" width="400px" height="400px"></canvas>
    </div>
    <button class="noprint u-btn success" onclick="myPhoto()">拍照</button>
    <button class="noprint u-btn texture dark" onclick="closeDialog('Photo')">取消</button>
    
    <script>
    	// 回调对象设置
    	let o;
        $(function () {
                window.dialogReady = function (dialog, options) {
                    o = options;
                };
        })
    
    	let code = document.getElementById("code").value;
    	// 图片上传地址
    	let baseImgUrl = "https://xxxx";
    	//获得video摄像头区域
            let video = document.getElementById("video");
            window.onload = function () {
                getMedia();
            }
            // 开启摄像头
            function getMedia() {
                let constraints = {
                    video: {width: 500, height: 500},
                    audio: true
                };
                let promise = navigator.mediaDevices.getUserMedia(constraints);
                promise.then(function (MediaStream) {
                    video.srcObject = MediaStream;
                    video.play();
                }).catch(function (PermissionDeniedError) {
                    console.log(PermissionDeniedError);
                });
            };
    		// 将base64转换为blob
            function dataURLtoFile(dataURI, type) {
                let binary = atob(dataURI.split(',')[1]);
                let array = [];
                for (let i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {type: type});
            }
            // 照片处理
            function myPhoto() {
                //获得Canvas对象
                let canvas = document.getElementById("canvas");
                let ctx = canvas.getContext('2d');
    
                // var image = new Image(); //定义一个图片对象
                // image.src = 'imgs/img.jpg';
                // image.onload = function () { // 此处必须注意!后面所有操作均需在图片加载成功后执行,否则图片将处理无效
                	// 截取视频图像
                    ctx.drawImage(video, 0, 0, 500, 500);
    
                    // 处理拍照图片,获取图片base64显示数据
                    let imgUrl = canvas.toDataURL();
                    let blob = dataURLtoFile(imgUrl, 'image/jpeg');
                    let formData = new FormData();
                    let fileOfBlob = new File([blob], new Date() + '.jpg'); // 重命名了
                    formData.append("fileId", fileOfBlob);
                    $.ajax({
                        url: baseImgUrl + "img-api/api/upload/uploadImage", //用于文件上传的服务器端请求地址
                        dataType: 'json',
                        type: 'POST',
                        async: false,
                        data: formData,
                        processData: false, // 使数据不做处理
                        contentType: false, // 不要设置Content-Type请求头
                        success: function (r) { //服务器成功响应处理函数
                            if (r.state) {
                                var data = r.result;
                                var url = baseImgUrl + data[0]
                                if (url != null && url != "") {
                                	// 设置回调图片地址
                                    o.imgUrl = url;
                                    o.code = code;
                                    // 关闭摄像头
                                    // let mediaStreamTrack = video.srcObject;
                                    // mediaStreamTrack.getTracks().forEach(function(track) {
                                    //     track.stop();
                                    // });
                                    closeDialog('Photo');
                                }
                            } else {
                                message("错误", "上传失败");
                            }
                        }
                    });
                // }
            }
    </script>
    

    其他js事件 andyui.js
    closeDialog openDialog

    /**
     * 关闭窗口
     * 
     * @param dlgId 对话框ID
     * @param showTier 是否弹出层(默认true)
     */
    function closeDialog (dlgId) {
    	$(document).an_dialog('close', dlgId);
    }
    
    /**
     * 打开窗口
     * 
     * @param dlgId 对话框ID
     * @param title 标题
     * @param url 展示内容的链接
     * @param width 窗口宽度
     * @param height 窗口长度
     * @param modalval
     * @param onClose 关闭对话框时的回调函数
     */
    function openDialog(dlgId, title, url, width, height, modalval, onClose) {
    	$(document).an_dialog({
    		title : title,
    		id : dlgId,
    		width : width || 900,
    		height : height || 700,
    		modalval : modalval === undefined ? true : modalval,
    		url : url,
    		onClose : onClose
    	});
    }
    
    展开全文
  • 主要介绍了Vue.js 2.0 移动端拍照压缩图片上传预览功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 通过js调用android接口启动照相机拍照,成功后将图片上传
  • html5+js+php实现调用摄像头拍照并压缩图片上传到服务器。
  • 基于html5 JS实现的拍照上传图片

    千次阅读 2017-03-07 10:15:05
    #video,#canvas {display: block;margin:1em auto;width:180px;height:180px;} #snap { display: block;margin:0 auto;width:80%;height:2em; } 点击拍照 window.addEventListe
  • js实现图片上传 转载于:https://www.cnblogs.com/mangwusuozhi/p/9156186.html
  • mui拍照上传js_code

    2019-01-03 15:20:27
    Hbuilder mui 相册拍照图片上传,在做WebAPP项目中,需要从相册或是拍照,视频或录音,然后上传,比如修改用户头像或是上传项目图片等.
  • 直接以“file:///D:/”等开头会显示没有webcam对象,要使用xammp或者Apache等将文件放置服务器目录,经过服务器打开即可正常使用
  • 前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用<input type="file"/>这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现...
  • 兼容多浏览器,IE8,9,10,11,edge,chrome,ff等 兼容flash,html5,需要安装adobe flash player
  • 上传的图片进行压缩,须要借助于canvas API,调用其中的canvas.toDataURL(type,encoderOptions);将图片按照必定的压缩比进行压缩,获得base64编码。重点来了:压缩策略:先设置图片的最大宽度 or 最大高度,通常...
  • <!DOCTYPE html> <html lang="en"> <head>...js调用摄像头拍照上传图片</title> <meta charset="utf-8"> </head> <body> <button onclick="ope...
  • 只调用摄像头 ...拍照+图库 <input type="file" accept="image/*"> 录像+图库 <input type="file" accept="video/*"> 拍照或录像+图库 <input type="file" accept="audio/*"> ...
  • 手机拍照上传

    2014-11-18 15:23:03
    在移动端实现手机拍照上传。 利用upload.js将图像转换为base64数据,uploadImgCode.ashx接收base64字符串,最后转为jpg,压缩体积以便保存。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,651
精华内容 3,060
关键字:

js拍照上传