H5app拍摄图片并预览和网页上传图片文件并预览

本篇分别介绍，用Hbuilder打包的app拍摄图片并预览和网页上传图片并预览两种方式

如何上传图片到服务器

依赖：JQuery

• Hbuilder App 拍摄图片并预览

html模块：




js模块：
function captureImage() {
  
    // 扩展API加载完毕，现在可以正常调用扩展API
    function onPlusReady() {
        console.log("plusready");
    }

    // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);

    var cmr = plus.camera.getCamera(); // 获取手机摄像头使用权限
    // 分别获取手机允许的照片像素和清晰度
    var res = cmr.supportedImageResolutions[0];
    var fmt = cmr.supportedImageFormats[0];
    console.log("Resolution: " + res + ", Format: " + fmt);
    cmr.captureImage(function (path) {
    
            // 通过文件路由获取图片文件
            plus.io.resolveLocalFileSystemURL(path, function (entry) {
            
            	// 获取文件对象成功时执行的方法 
                entry.file(function (file) {
                    var fileReader = new plus.io.FileReader(); 
                    fileReader.readAsDataURL(file, 'utf-8'); // 把读取到的文件用url的形式进行编码，默认utf-8
                    // 图片读取完成后触发
                    fileReader.onloadend = function (evt) {
                        var img_base64 = evt.target.result
                        // 直接给img赋值base64，就能直接在网页上查看图片
                        // 只能用原生js获取对象
                        var photo = document.getElementById('photo')
                        photo.src = img_base64
                    }
                });
            }, function (e) {
            	// 获取文件对象失败执行
            });
        },
        function (error) {
            // 拍摄照片失败失败执行
        },
        {resolution: res, format: fmt} // 传入照片的清晰度和像素
    );

}

• 网页上传图片文件并预览

html模块




js模块

$("#file").change(function () {
        if (this.files && this.files[0]) {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            blobToDataURL(this.files[0], function (result) {
            });

            if (objUrl) {
                $("#photo").attr("src", objUrl);
                $("#file").click(function (e) {
                    $("#img").attr("src", objUrl);
                });
            } else {
                //IE下，使用滤镜
                this.select();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("uploadimg");
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
                } catch (e) {
                    this._error("filter error");
                    return;
                }
                this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
            }
        }
    });


    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

// blob转base64
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function (e) {
        callback(e.target.result);
    };
    a.readAsDataURL(blob);
}