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

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

日志

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

热度 10已有 2933 次阅读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: 加入头像编辑界面上用的汉字 (原来的汉字是写在flash里的,没在语言包里定义)
'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的正方形保存


发表评论 评论 (50 个评论)

回复 loveyou520tw 2017-5-21 10:50 PM
天香公主您好:
顶一下,真的很棒,感谢您的分享改成html5
这边回报一下目前遇到的问题…
版本:avatar_160309
dz版本:3.2 utf8

这版本有点问题,某些特定浏览器会无反应(不会上传头像)
firefox会自动上传 可chrome选完图像后就没反应 ie也是
回复 天香公主 2017-5-20 07:42 PM
天香公主粉丝: 起初还以为搞定了,但上架之后发现报错,然后突然发现一个秘密,他这个上传按钮文字是根据浏览器系统语言来判断显示的,比如我是中文系统,它就显示中文上传界面 ...
我试了试加label的办法:
<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
在IE11,FF和GC里都能用,但IE8不行。也许你可以加个判断条件,类似于

<!--[if lte IE 8]>
    <input type="file" name="bannernew" id="bannernew" class="pf" size="25" />
<![endif]-->
<!--[if gt IE 8]>
    <label for="bannernew" class="btn">Select Image</label>
    <input type="file" name="bannernew" id="bannernew" class="pf" size="25" style="visibility:hidden;" />
<![endif]-->
回复 天香公主粉丝 2017-5-20 07:05 PM
天香公主: 用了哪种做法?我猜在IE8里不工作吧?
起初还以为搞定了,但上架之后发现报错,然后突然发现一个秘密,他这个上传按钮文字是根据浏览器系统语言来判断显示的,比如我是中文系统,它就显示中文上传界面,英文系统就显示英文,所以就没有修改,嘿嘿。
回复 天香公主 2017-5-19 09:42 AM
天香公主粉丝: 太棒了!用其中一个JQ搞定了,谢谢你呀
用了哪种做法?我猜在IE8里不工作吧?
回复 天香公主粉丝 2017-5-18 08:04 AM
天香公主: 这就是个普通的html file元素,代码在template/default/group/group_manage.htm里
<input type=&quot;file&quot; name=&quot;bannernew&quot; id=&quot;bannerne ...
太棒了!用其中一个JQ搞定了,谢谢你呀
回复 天香公主 2017-5-14 08:37 AM
天香公主粉丝: 公主,还有一个上传按钮问题
就是群组设置里面,上传图标的按钮

=> 选择文件 未选择任何文件

这句在哪里可以改呢?请教! ...
这就是个普通的html file元素,代码在template/default/group/group_manage.htm里
<input type="file" name="bannernew" id="bannernew" class="pf" size="25" />
<input type="file" id="iconnew" class="pf vm" size="25" name="iconnew" />
印象中没有普适的方法。你可以试试下面提到的各种办法
http://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file
http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file
回复 天香公主粉丝 2017-5-14 01:28 AM
天香公主: 不客气啦。我原来以为这些文字都记在camera.swf里,所以在写插件时把它们重新定义了一遍。现在才知道都记在这个文件里,其实插件也可以直接用它。 ...
公主,还有一个上传按钮问题
就是群组设置里面,上传图标的按钮

=> 选择文件 未选择任何文件

这句在哪里可以改呢?请教!
回复 天香公主 2017-5-13 10:06 PM
天香公主粉丝: 哇哦,原来如此,终于明白修改思路了,真是太感谢了!好人!
不客气啦。我原来以为这些文字都记在camera.swf里,所以在写插件时把它们重新定义了一遍。现在才知道都记在这个文件里,其实插件也可以直接用它。
回复 天香公主粉丝 2017-5-13 04:21 AM
天香公主: 你的问题就是如何找到某个汉字的unicode表示,有多个网站都提供在线转换。如 http://pages.ucsd.edu/~dkjordan/resources/unicodemaker.html
作为例子看看'选择 ...
哇哦,原来如此,终于明白修改思路了,真是太感谢了!好人!
回复 天香公主 2017-5-8 09:00 PM
天香公主粉丝: 哇,这都能找出来,厉害哦
可是如何修改成别的文字呢,请赐教
你的问题就是如何找到某个汉字的unicode表示,有多个网站都提供在线转换。如 http://pages.ucsd.edu/~dkjordan/resources/unicodemaker.html
作为例子看看'选择图片'这四个汉字的unicode表示,在那里的New Input Box栏里填入 选择图片 ,点击 Process后, 在Hex Value(s)栏里就会出现 9009 62E9 56FE 7247,看出它和button_browse的值的对应关系了吧?
回复 天香公主粉丝 2017-5-8 08:35 PM
天香公主: 它们在 uc_server/images/locale.xml 里定义

<item key=&quot;button_browse&quot; value=&quot;\u9009\u62E9\u56FE\u7247&quot; />
<item key=&quot;button_ca ...
哇,这都能找出来,厉害哦
可是如何修改成别的文字呢,请赐教
回复 天香公主 2017-5-7 02:09 PM
天香公主粉丝: 公主,请问头像上传按钮的文字有没有办法修改呢?
《选择图片》
《拍摄照片》
改成别的
它们在 uc_server/images/locale.xml 里定义

<item key="button_browse" value="\u9009\u62E9\u56FE\u7247" />
<item key="button_camera_screen" value="\u62CD\u6444\u7167\u7247" />
回复 天香公主粉丝 2017-5-7 02:29 AM
天香公主:   
公主,请问头像上传按钮的文字有没有办法修改呢?
《选择图片》
《拍摄照片》
改成别的
回复 天香公主 2017-4-27 12:54 PM
e0759: 非常感谢天香开发的插件,很好用,点赞
  
回复 e0759 2017-4-27 11:59 AM
天香公主: 嗯,在2.5里的确有问题。发现我的模版文件里有一句只在3.0以上版本才能用。现在改写了一下能用于所有版本里。详见我在 http://www.bian-wang.com/discuz/home.ph ...
非常感谢天香开发的插件,很好用,点赞
回复 天香公主 2017-4-26 11:07 PM
e0759: 我测试的也是20150609 gbk版本。
http://download.comsenz.com/DiscuzX/2.5/Discuz_X2.5_SC_GBK.zip

我试了下天香您开发的插件版本 txgz_avatar2 和 txgz_avata ...
嗯,在2.5里的确有问题。发现我的模版文件里有一句只在3.0以上版本才能用。现在改写了一下能用于所有版本里。详见我在 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1240 文末的补充。两个插件下载文件都更新过了。谢谢!
回复 e0759 2017-4-26 10:04 AM
天香公主: 抱歉,我原想装个2.5GBK试试,但只找到20150609版的,安装后没法登录,说我填写的内容含不良信息,只好放弃。如果你有较早的版本,方便的话请给我一份。

不过我 ...
我测试的也是20150609 gbk版本。
http://download.comsenz.com/DiscuzX/2.5/Discuz_X2.5_SC_GBK.zip

我试了下天香您开发的插件版本 txgz_avatar2 和 txgz_avatar 两个版本,还是报了500错误。
discuz 3.0 以上倒是没问题。
回复 天香公主 2017-4-24 11:31 PM
e0759: discuz x2.5 gbk 安装了 报500错误。貌似不兼容
抱歉,我原想装个2.5GBK试试,但只找到20150609版的,安装后没法登录,说我填写的内容含不良信息,只好放弃。如果你有较早的版本,方便的话请给我一份。

不过我建议你不如试试我写的插件版,装卸都方便,http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1533,文后的插件下载支持GBK。
回复 e0759 2017-4-24 11:03 AM
discuz x2.5 gbk 安装了 报500错误。貌似不兼容
回复 天香公主 2017-3-24 08:16 AM
crlang:      谢谢,这很有意义,很喜欢这么有条理的文章
    谢谢美言,欢迎您来一起分享心得
123下一页

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-5-24 01:44 PM , Processed in 0.067954 second(s), 21 queries.

返回顶部