总结今天项目上传头像中遇到的问题

由于公司需要，在做项目的时候，涉及到上传头像的部分，在php中，上传图片是一种很简单的事情。
但是需要实现仿QQ，新浪需要对图片截取图片，就不那么容易，我采取的是canvas获取getDataURL，然后将数据通过ajax发送到后台服务器并保存到数据库中
再通过img的src属性进行读取数据库中的数据，在展现出来，但是因为项目中有留言板，这里会出现一个问题，就是图片保存为base64数据虽然可以减小一次http请求
但是重要的事情说三遍，只对于小图片可以，将大图片的getDataURL存取在数据库中，会导致加载过慢
所以不得不对此进行优化，即如何将base64编码在服务器端保存为图片
1.首先要用正则去掉开头的"data:image/png;base64,"
2.使用base64_decode函数进行解码

3使用file_put_contents将它保存为一张图片

4.数据库中存取img的路径

时间： 2024-07-31 13:48:39

总结今天项目上传头像中遇到的问题的相关文章

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

刚完成的一个上传头像模块，望指点（含详细代码）

file API,直接读取本地文件.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" name="file" onchange="showPic();"/> <img id="avatar" src="" style="width:200px"> 2.fileAPI预览图

Discuz!NT Flash无法上传头像，点击上传后无任何反应

最近在对一个Discuz!NT论坛的老项目进行维护和二次开发,遇到了论坛无法上传头像的问题.在网上找了相当多的资料,发现解决的方法基本是无效的.虽然有的状况一样,但是没有解决方法,后来自己研究了下也总算是解决了这个问题. 首先说明下出现无法上传头像的具体症状,大概的症状有下面这几点: 使用Flash头像上传时,点击上传图片,然后显示“图片载入中,请稍后的提示信息”和上传进度的百分比,最后却是没有任何的反应. 网上有部分网友说到进度到10%就没有任何反应,其实只是部分情况,如果传大图片的话会显示其

Jcrop+uploadify+php实现上传头像预览裁剪

最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁切点的坐标进行裁剪. 首先看一下uploadify上传插件的API: uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf.script :   后台处理程序的相对路径 .默认值:

Flask blog实战---上传头像功能

第一步:数据库的表单中新增用户头像这一字段models.py中 第二步:在编辑资料的表单中增加头像上传, avatar = FileField('头像') 第三步:在编辑资料的路由界面,添加用户提交头像的功能,参考博客 http://ncitycode.com/python/flask/2016/6/18/ UPLOAD_FOLDER = current_app.config['UPLOAD_FOLDER'] 这里我在config.py中设置的文件上传路径为 将数据库中头像存储的路径修改为 到这

Android 仿qq上传头像(一)

       转载请注明出处http://blog.csdn.net/u014163726/article/details/44994197        这么长时间没写博客感觉手都要生了啊,最近因为工作的关系来到了上海,目前还算稳定,所以抓紧时间写篇博客压压惊.      标题早已经看穿一切,这次我们来模仿一下qq上传头像的功能,先上一个未完成版的效果图,银魂第四季重开放上一张萌萌哒的图片.          这还是要用到我们自定义View的知识,首先从相册中获取图片的部分我就不详细介绍了.

上传头像裁剪功能

我之前做项目的时候有需求是需要实现上传头像裁剪再上传到服务器,所以上网看了一下别人写的案例.方法.文章,浪费了1天的时间,最后才跌跌碰碰的终于写了出来. 现在给大家分享一下吧. 所用到的js文件 cropper.min.js, canvas-to-blob.js(这个是IE上需要用到的,不然会不支持转blob) jquery.min.js, bootstrap.min.js ajaxfileupload.js css文件 cropper.min.css,bootstrap.min.css htm

在window把自己的项目上传到github

原文地址:http://blog.csdn.net/qq_31852701/article/details/52944312 作为一个开发者,写博客,上传项目到github好像是不可不会的技能,很多有经验的老司机都会这么建议你.本宝宝第一次要把项目传到github的时候,确实有点蒙蔽,什么鬼,传个东西有必要这么难吗? git 是有gui的,但是网上一搜,一大堆,这里宝宝介绍一个比较好用也是使用人数比较多的gui,叫做Source Tree,大家自己去网上下载下很快的,今天宝宝要说的是用命令行上传

如何将本地项目上传到github

首先需要一个github账户,可去github的官方网址:https://github.com   注册一个: 需要用到的管理工具git,下载地址:https://git-scm.com/  :安装 准备工作做好了,开始吧 1.1   创建一个本地项目 我的本地项目是通过vue-cli脚手架搭建的,有兴趣的可以点击 这里 看一下: 进到自己的本地项目文件下,右键-选择git bash here(如下图) 1.2  建立本地仓库 如上点击git bash here之后即可打开git客户端黑窗口,