本地选择图片并设置成头像,避开fakepath问题

最近工程中一个需求就是从本地选择图片设置成用户头像,但是用<input type = "file">在onchange事件中得到的路径中包含fakepath。这个问题一直没有找到好的解决办法,无意间发现下面的方法,但是通过打印 event.target.result这个变量,发现不是路径,而是一串很长的base64编码,也没弄明白是怎么回事,刚初学,总之能完成功能,希望大神多指点。在onchange事件中关联以下函数:

function setIcon(){
  var input = document.getElementById("file");
  var fReader = new FileReader();
  fReader.readAsDataURL(input.files[0]);
  fReader.onloadend = function(event){
    var img = document.getElementById("icon");
    img.src = event.target.result;
  }
}

本地选择图片并设置成头像,避开fakepath问题

时间: 2024-10-14 00:53:35

本地选择图片并设置成头像,避开fakepath问题的相关文章

Android入门--实现选择并编辑图片设置成头像

在很多时候需要更换头像或者选择图片,所以这里总结下实现选择并编辑图片然后设置成头像的方法,下面开始: 整体结构如下:  创建项目,命名为ChooseImage_test 创建完成,在drawable-hdip文件夹中添加一张默认头像图片,用于在用户选择头像之前显示或者当用户未选择头像时做默认头像:  创建布局文件 这里为了贴合实际,整个页面就只有一个ImageView,当然现在是矩形的ImageView显示头像,后面会结合设置圆形头像的功能实现圆形头像选择功能 <RelativeLayout x

Android中通过访问本地相册或者相机设置用户头像

目前几乎所有的APP在用户注册时都会有设置头像的需求,大致分为三种情况: (1)通过获取本地相册的图片,经过裁剪后作为头像. (2)通过启动手机相机,现拍图片然后裁剪作为头像. (3)在APP中添加一些自带的头像资源,供用户选择(不够人性化,目前很少使用). 这次我们简单介绍下通过获取本地相册以及相机拍摄的方法设置头像,实现思路如下: (1)通过startActivityForResult方法,分别传递调用系统相册的Intent和调用相机拍照的Intent来做选择 (2)调用Android系统中

type=&quot;file&quot;实现兼容IE8本地选择图片预览

一.HTML代码 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImagePage.aspx.cs" Inherits="Webs.pages.BookingNote.UploadImagePage" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.

iOS 动态设置启动图的图片(设置成从服务器请求下来的图片)

公司做一个项目,一开始的启动图是两张,既一张启动图和一张类似于广告图,费力半天劲搞出来了,项目上线之后,客户要求改成一张启动图,但是要是那种从服务器动态获取的图片,我一听傻眼了,还能这么弄吗,启动图不都是固定的吗?怎么设置?我就去百度,去各个技术交流群里咨询.有一位技术大牛告诉我了一个方法,现在分享给大家. 首先,启动图是不能动态获取,要想实现那种效果,只能做出一种假象来,让人家感觉你的启动图就是动态获取的. (1)先把启动图空白或者部分空白(这里如果让启动图空白的话,会十分的难看,所以建议还是

通过拍照或选择本地图片并剪裁图片设置成头像,并保存裁剪后图片与本地方便注册头像上传

1 import java.io.File; 2 3 import android.app.AlertDialog; 4 import android.content.Context; 5 import android.content.DialogInterface; 6 import android.content.Intent; 7 import android.graphics.Bitmap; 8 import android.graphics.drawable.BitmapDrawabl

本地选择图片文件进行预览

思路:对于支持 window.url 的浏览器 使用 url= window.url.createObjectURL(file); img.src = url; 不支持window.url 的ie 使用:div.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+完整文件名+"')" 栗子: fileInput.onchange =

微信小程序---选择图片和调用微信拍照

1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, avatarUrl:null }, //事件处理函数 bindViewTap: function() { var that = this // 选择图片和拍照 wx.chooseImage({ count: 1, // 默认9 sizeType: ['o

JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

Cocos2d-x 3.x 头像选择,本地相册图片+图片编辑(Android、IOS双平台)

大连游戏产业不是很发达,最后,选择一个应用程序外包公司.积累的工作和学习过程中的一点业余生活微信体验,我想分享的游戏小朋友的爱. 在应用开发过程中会经常实用户上传头像的功能,在网上找了N多资料发现没有人详细介绍过该用cocos2d-x实现.这篇文章就来介绍一下怎样在Android和IOS平台上实现该功能. 先传一张完毕后的图片一饱眼福:= = 怎么不好用呢~ 直接上代码: 头文件 ImagePicker.h /*******************************************