立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

Discuz功能改进:用html5实现头像编辑

热度 13已有 4888 次阅读2016-1-4 06:13 PM |个人分类:Discuz

现有的Discuz系统的头像编辑功能基于陈旧的flash技术,网友 aikato 问及如何能用html5替代。本文就来讨论下这个问题。我们用了html5的画布(canvas)元素和jQuery UI里的拖动(draggable)部件和缩放(resizable)部件。在画布上能做各种图片编辑工作,如将图片拷贝上去,将图片放大或缩小,将图片变色,得到图片数据等等。jQuery UI提供的拖动和缩放部件能帮助用户选取图片中的一部分当头像,作法和我以前写的动漫设计工具雏形(链接)类似。

1. 现有流程
我们先来看看现有的头像编辑的流程,然后再讨论如何用html5做相应的替换。

1)头像编辑网页
头像编辑网页是由下面的请求得到的:

GET /home.php?mod=spacecp&ac=avatar

处理请求的脚本文件是 source/include/spacecp/spacecp_avatar.php, 而网页的格式定义在模板文件 template/default/home/spacecp_avatar.htm 里。该网页上包含了一个flash动画 uc_server/images/camera.swf,提供了头像编辑客户端的功能:

GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF...
2)上传头像照片
头像文件的选择和上传都是flash动画 camera.swf 提供的。它向服务器发送了下面的请求,其中包含了头像文件的内容:

POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF...

这个请求是由脚本文件 uc_server/control/user.php里的函数 onuploadavatar 处理的。它在服务器上保存了这个文件,并将该文件的路径发还给flash动画 camera.swf
3)裁剪头像
图片的缩放和裁剪功能是flash动画 camera.swf 提供的。当点击确定按钮后,flash动画向服务器发送了下面的请求:

POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF...

urlReaderTS=1451947309935&avatar1=FFD8FFE000104A4649460001...

请求中含有经裁剪后的大中小三种尺寸的头像。服务器上的脚本文件 uc_server/control/user.php 处理了这个请求,把上传上来的头像保存下来

4)显示头像
三种尺寸的头像的显示也是由flash动画 camera.swf 提供的

我们的目标是用html5和jQuery UI里的功能来完全替代flash动画 camera.swf ,而尽可能的保持服务器上的处理功能不受影响。

2. 文件改动
共改动了三个文件:
1)语言包文件 source/language/home/lang_template.php: 加入头像编辑界面上用的汉字 (原来的汉字是写在uc_server/images/locale.xml里的,没在语言包里定义)
'back_file_selection' => '返回重新选择', 'upload_succeed' => '上传成功!', 'three_avatars' => '以上是您头像的三种尺寸', 2)脚本文件 uc_server/control/user.php: 对文件user.php里的函数 onrectavatar 做了少许修改,因为从canvas得到的是用base64编码后的图片数据,所以在脚本文件里要做相应的解码
3)模板文件 template/default/home/spacecp_avatar.htm: 主要的改动都在定义头像编辑的网页模板文件里。舍弃了原来用的flash文件 camera.swf, 相应的功能都用html元素和javascript代码来实现,都定义在这个模板文件里了

3. 新流程
改动后的头像编辑流程变为:
1)头像编辑网页
头像编辑网页是由下面的请求得到的:

GET /home.php?mod=spacecp&ac=avatar

处理请求的脚本文件是 source/include/spacecp/spacecp_avatar.php, 而网页的格式定义在模板文件 template/default/home/spacecp_avatar.htm 里。该网页上包含了几个画布,提供了头像编辑客户端的功能:

GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF...
2)上传头像照片
头像文件的选择和上传都是由html里的file元素提供的提供的。它向服务器发送了下面的请求,其中包含了头像文件的内容:

POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF...

这个请求是由脚本文件 uc_server/control/user.php里的函数 onuploadavatar 处理的。它在服务器上保存了这个文件,并将该文件的路径发还给客户端
3)裁剪头像
图片的缩放和裁剪功能是由画布和jQuery UI里的拖拉和缩放部件共同完成的提供的。当点击确定按钮后,客户端向服务器发送了下面的请求:

POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF...

------WebKitFormBoundary7I7NlBxh4ycJkBD8 Content-Disposition: form-data; name="avatar1" /9j/4AAQSkZJRgABAQAAAQABAAD...

请求中含有经裁剪后的大中小三种尺寸的头像。服务器上的脚本文件 uc_server/control/user.php 处理了这个请求,把上传上来的头像保存下来

4)显示头像
三种尺寸的头像的显示也是由画布提供的

4. 功能示范
下面选取了新的裁剪头像功能里的主干部分镶嵌在本博文里做个示范:
文件下载http://www.bian-wang.com/upload/avatar_160104a.zip
(注意这里的语言包是供简体UTF-8版使用的,如果网站用的是其它版本,应在原来语言包文件里加入该系统用的相应汉字)

3/9/2016 注记: 网友carry0987告知这个修改在他的网站上不工作。和他一起排查了问题,发现把spacecp_avatar.htm里我原来用jQuery的地方都改成$后头像功能就能用了。(准确的说为了不影响Discuz使用$,我还将$赋给了另一个变量$1,然后又将$还给了Discuz)。为什么会出现这种情况呢?怀疑这和我在引入jquery文件前,在该网站上另一个版本的jquery文件已经被一个插件引用有关。谢谢网友carry0987的帮助!更新文件如下:
http://www.bian-wang.com/upload/avatar_160309.zip

10/12/2016 补充: 关于头像裁剪界面的一些细节:尽可能的重现原来的规则
  1. 选择框位置:
    • 最初显示在显示框中央,长宽各150px,但不超出图片显示的范围
    • 在任何时刻,选择框不超出显示框的范围
    • 除非是在选择过程中,选择框不超出图片显示的范围
  2. 图片显示尺寸:
    • 保持图片原来的长宽比例不变
    • 当缩放条的选择位置在最左端时,图片显示长和宽小的一方是48px
    • 当缩放条的选择位置在中间时,图片显示为图片尺寸和显示框尺寸的较小值,但不小于48px
    • 当缩放条的选择位置在最右端时,图片显示为图片尺寸和显示框尺寸的较大值
    • 当缩放条的选择位置在其它位置时,图片显示尺寸由上述三尺寸线性插值所得
  3. 图片显示位置:
    • 在任何时刻,图片显示范围与显示框左右端的距离比例和选择框与显示框左右端的距离比例相同,图片显示范围与显示框上下端的距离比例和选择框与显示框上下端的距离比例相同
  4. 头像保存:
    • 大号头像:按选择框的范围截取头像,如果长宽分别不超过200px和250px,按原样保存。不然,按比例缩小至长宽分别不超过200px和250px
    • 中号头像:按选择框的范围截取头像,如果长宽均不超过120px,按原样保存。不然,按比例缩小至长宽均不超过120px
    • 小号头像:在选择框的范围以选择框的中心为中心截取最大的正方形区域,缩放成48px的正方形保存


发表评论 评论 (75 个评论)

回复 carry0987 2017-8-26 05:01 AM
天香公主: 我怎么觉得现在注册时填写用户名后就会自动检查的?也许是用个hidden iframe实现的?和用ajax的效果应该是一样的
呃....我只會使用粗淺的ajax,hidden frame還沒試過..
回复 天香公主 2017-8-25 03:57 PM
carry0987: 對了,這是我根據這段時間所了解的php,寫的一個簡易留言板
https://github.com/carry0987/MessageBoard

P.s. 有使用一個小小的ajax功能,就是在註冊頁面實時檢 ...
我怎么觉得现在注册时填写用户名后就会自动检查的?也许是用个hidden iframe实现的?和用ajax的效果应该是一样的
回复 carry0987 2017-8-25 01:46 PM
對了,這是我根據這段時間所了解的php,寫的一個簡易留言板
https://github.com/carry0987/MessageBoard

P.s. 有使用一個小小的ajax功能,就是在註冊頁面實時檢查用戶名是否已被使用
回复 carry0987 2017-8-25 01:42 PM
天香公主: 谢谢carry。好象那里没我想象的那么热闹,没几个pull request
因為之前發生的一些事...
某些能力相當的工程師,他們努力的找Bug、優化,但是就如你看到的,如html5頭像,官方並沒有合併,還有https的問題,以及編輯器等等的大坑,官方感覺並沒有特別想要修復...

目前官方提出x3.4,旨在清除雲平台等等的已停用的功能
回复 天香公主 2017-8-25 12:34 PM
carry0987: 哇靠!我忘記了...
抱歉!我去補上!!!
https://git.oschina.net/ComsenzDiscuz/DiscuzX/pulls/97#note_711858
谢谢carry。好象那里没我想象的那么热闹,没几个pull request
回复 carry0987 2017-8-25 10:27 AM
天香公主: 谢谢网友告知。好象是没写代码的出处?carry0987是这里的网友,估计是无意中的疏忽吧
哇靠!我忘記了...
抱歉!我去補上!!!
https://git.oschina.net/ComsenzDiscuz/DiscuzX/pulls/97#note_711858
回复 天香公主 2017-8-25 07:05 AM
Gxxxxd: 大佬,你的教程被人偷了。
https://git.oschina.net/ComsenzDiscuz/DiscuzX/pulls/97
谢谢网友告知。好象是没写代码的出处?carry0987是这里的网友,估计是无意中的疏忽吧
回复 Gxxxxd 2017-8-24 11:43 PM
大佬,你的教程被人偷了。
https://git.oschina.net/ComsenzDiscuz/DiscuzX/pulls/97
回复 天香公主 2017-7-31 05:52 PM
sco85: 你好, 任何人都有一个教程来整合这个脚本并替换Flash上传头像? 脚本是开源的,免费的:(shearphoto2.3_HTML5正式版_HTML5截图,下载)
演示:http://www.shea ...
欢迎行家加入我们的讨论,和大家分享心得
回复 sco85 2017-7-31 03:47 PM
你好, 任何人都有一个教程来整合这个脚本并替换Flash上传头像? 脚本是开源的,免费的:(shearphoto2.3_HTML5正式版_HTML5截图,下载)
演示:http://www.shearphoto.com/
http://www.shearphoto.com/bbs/forum.php?mod=viewthread&tid=3
对不起,我使用谷歌翻译语言
回复 天香公主 2017-7-21 06:38 AM
大吃一惊: 天香公主你好,我这里用了avatar_160309.zip  问题是图片添加失败,查看返回是failure,user.php里面上传文件的时候出现了问题,猜测是:
                      ...
欢迎新网友
1)在用它之前是可以上传图片的吗?
2)如果你有公开的网站的话,我去那试试看
回复 大吃一惊 2017-7-21 05:29 AM
天香公主你好,我这里用了avatar_160309.zip  问题是图片添加失败,查看返回是failure,user.php里面上传文件的时候出现了问题,猜测是:
                                      $biginfo = @getimagesize($bigavatarfile);   
                                      $middleinfo = @getimagesize($middleavatarfile);       
                                      $smallinfo = @getimagesize($smallavatarfile);
这里的问题但是不知道怎么解决,方便的话能帮我下吗
回复 天香公主 2017-6-14 09:41 PM
loveyou520tw: 感谢天香公主这边一直帮忙给予解决及分析方式,可惜前阵子公司全面更新Flash顿时不知道该如何提供...
只能等遇到的时候再贴给您了 ...
谢谢你。等你有合适机会检查了再告诉我好了。
回复 loveyou520tw 2017-6-14 09:34 PM
天香公主: 1) A:确定有camera.swf
是在Firefox里吧,能否save page,然后把那个保存的html文件发给我看看(可以用本站的文件上传功能),不需要给我附件
2)A:我这边刚 ...
感谢天香公主这边一直帮忙给予解决及分析方式,可惜前阵子公司全面更新Flash顿时不知道该如何提供...
只能等遇到的时候再贴给您了
回复 天香公主 2017-6-11 10:59 PM
loveyou520tw: 1)右键选择View Page Source, 然后搜索一下是否有camera.swf
A:确定有camera.swf
2)   在浏览器右上角点击Open Menu, 然后选取 Developer->Network, 然后选择图 ...
1) A:确定有camera.swf
是在Firefox里吧,能否save page,然后把那个保存的html文件发给我看看(可以用本站的文件上传功能),不需要给我附件
2)A:我这边刚才测试的浏览器是chrome没有反应
能否点击右上角的三个点,选择More tools->Developer tools, 点击Network,然后选择图片,看是否向服务器发送了请求
3)在选择图片前后看看浏览器左下角是否有警示标记说有script错误?
谢谢了
回复 loveyou520tw 2017-6-11 10:36 PM
天香公主: 谢谢。我一时也看不出问题了。等你有空时,不知能否在那台电脑的Firefox里进入修改头像页,然后
1)右键选择View Page Source, 然后搜索一下是否有camera.swf
2) ...
1)右键选择View Page Source, 然后搜索一下是否有camera.swf
A:确定有camera.swf
2)   在浏览器右上角点击Open Menu, 然后选取 Developer->Network, 然后选择图片,看选完图片后是浏览器根本没给服务器发请求, 还是服务器收到请求并回复了。如果是回复了,看看回复的内容
A:我这边刚才测试的浏览器是chrome没有反应,最新安装的firefox却可以上传。
回复 天香公主 2017-6-11 09:46 PM
loveyou520tw: 这边刚好有一台电脑有这问题。
http://imgur.com/a/88Waw
连结是图片网址。
选完图片后就不会有任何反应or上传等。
谢谢。我一时也看不出问题了。等你有空时,不知能否在那台电脑的Firefox里进入修改头像页,然后
1)右键选择View Page Source, 然后搜索一下是否有camera.swf
2)   在浏览器右上角点击Open Menu, 然后选取 Developer->Network, 然后选择图片,看选完图片后是浏览器根本没给服务器发请求, 还是服务器收到请求并回复了。如果是回复了,看看回复的内容
回复 loveyou520tw 2017-6-11 09:24 PM
天香公主: 不知你是否还记得在你发现不能自动上传时,看到的选择图片的网页是象我文中1)现有流程里的图1那样的,还是象3)新流程里图1那样?我猜是前者,这样的话就说明你 ...
这边刚好有一台电脑有这问题。
http://imgur.com/a/88Waw
连结是图片网址。
选完图片后就不会有任何反应or上传等。
回复 loveyou520tw 2017-6-11 09:12 PM
天香公主: 不知你是否还记得在你发现不能自动上传时,看到的选择图片的网页是象我文中1)现有流程里的图1那样的,还是象3)新流程里图1那样?我猜是前者,这样的话就说明你 ...
感谢天香公主耐心持续性的解答!真的是好版主。
这边是新流程图里的图1那样,修正之后我有更新缓存。
所以关于这点我也觉得很疑惑,组件都换成HTML5了怎么还会受到Flash影响
我这边在试试看其他电脑!
回复 天香公主 2017-6-8 10:50 PM
loveyou520tw: 可能文字上说明不太清楚,确实我是更改成html5,但确实没更新flash不会自动更新上传,我这边比较不方便开外网碍于公司内部还在测试。
所以关于这点我自己也觉得 ...
不知你是否还记得在你发现不能自动上传时,看到的选择图片的网页是象我文中1)现有流程里的图1那样的,还是象3)新流程里图1那样?我猜是前者,这样的话就说明你改了spacecp_avatar.htm后没有更新缓存,所以网页用的还是Flash。
1234下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-12-15 04:02 AM , Processed in 0.067286 second(s), 21 queries.

返回顶部