js可以实现修改用户头像功能吗

JavaScript035

js可以实现修改用户头像功能吗,第1张

在之前的笔记中,讲了如何实现圆形头像,这里接着上一次的笔记,讲一下怎么修改头像(通过图库和拍照方式)。

重点:

流程: 一般在APP中,修改头像是最基本的功能之一了。一般是两种方式的修改:从相册选择图片或者拍照。那么这里就来讲一下如何具体实现这个功能。

Step1:点击头像 ->手势(UITapGestureRecognizer)

首先,点击头像。因为头像是直接放在ImageView中的,默认情况下当我们点击头像的时候,头像是不会有任何反应的。因此,我们需要给头像的ImageView添加一个点击事件,方法如下:

Step2:弹出选择提示->提示框(UIAlertController)

通过添加UITapGestureRecognizer(手势),系统就知道了我点击了头像,接着,就可以添加具体的方法来进行操作了。在上一步,我为这个手势的action,selector(选择)了一个方法来执行,即alterHeadPortrait:(注意有冒号的),也就是当我们点击了头像之后,会执行alterHeadPortrait:这个方法:

通过UIAlertController(提示框)这个类,我们创建好了一个提示框,如下:

现在,当我们点击取消(或者点击按钮以外的区域)提示框就会被自动取消掉,并将提示框收起来。

Step3:从相册选择或者拍照选择头像->UIImagePickerController

好了,绕了这么久,终于开始进入主题了,即选择图片或者拍照了。那么现在该肿么办呢?好像毫无头绪的样子。。。

这里就需要通过UIImagePickerController,通过它,我们就可以让我们的APP轻松的实现访问相册或者拍照:

操作UIImagePickerController,需要实现两个协议:

进行相册图片选择或者相机拍照的实现代码如下:

运行效果如图:

Step4:替换头像->大功告成!

现在,我们已经能够打开相册,或者拍照(拍照功能模拟机无法拍照,会报错,只有用真机测试)。

可是问题来了,现在选择了新图片,确定之后,头像还是原来的头像,并没有更新。这是因为我们这里还没有对图片选择完全之后的代理方法进行实现:

大功告成:

首先这个是可以实现的,处理办法是将上传按钮FileUpload隐藏,用显示图片的对象的onclick事件触发FileUpload的onclick事件, 但是会存在以下问题:

由于安全问题你通过点击其它对象去选择的照片后台是获取不到图片的!

兼容性问题,有的浏览器是不兼容的

代码如下:

<script type="text/javascript">

    function PreviewImage() {

        var pic = document.getElementById("preview")

        file = document.getElementById("upLoadFile")

        var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase()

        // gif在IE浏览器暂时无法显示

        if (ext != 'png' &&ext != 'jpg' &&ext != 'jpeg') {

            alert("图片的格式必须为png或者jpg或者jpeg格式!")

            return

        }

var isIE = navigator.userAgent.match(/MSIE/) != null,

            isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null

if (isIE) {

            file.select()

            var reallocalpath = file.value

            // IE6浏览器设置img的src为本地路径可以直接显示图片

            if (isIE6) {

                pic.src = reallocalpath

            } else {

                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现

                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + reallocalpath + "\")"

                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

                pic.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='

                //alert(pic.offsetHeight)

                pic.style.width = "130px"

                pic.height = "156px"

            }

} else {

var file = file.files[0]

var reader = new FileReader()

reader.readAsDataURL(file)

reader.onload = function (e) {

var pic = document.getElementById("preview")

                pic.src = this.result

            }

        }

     

    }

</script>