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

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

日志

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

热度 6已有 2147 次阅读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的正方形保存


发表评论 评论 (30 个评论)

回复 aikato 2016-4-16 09:39 PM
天香公主: 指前者,在iPad上可以。手机上我没试过。

你来得正好,我刚把这个修改写成了插件,等今晚发上来请你指教。
喔呵呵,自從3月份就一直忙到都沒空上網了,天天在趕論文,忙死了欸
回复 天香公主 2016-4-16 02:01 PM
aikato: 話說沒看懂喔 0.0

你意思是說在 spacecp_avatar.htm 嵌入 script 碼就能令手機支援到拖拽功能,還是說加入 script 後再看 stack overflow 的教學說明喔? ...
指前者,在iPad上可以。手机上我没试过。

你来得正好,我刚把这个修改写成了插件,等今晚发上来请你指教。
回复 aikato 2016-4-16 01:59 PM
天香公主: 改spacecp_avatar.htm吧,如果你是在那里引入jqueryui的。就象我那样在引入jqueryui文件后,引入这个文件。
話說沒看懂喔 0.0

你意思是說在 spacecp_avatar.htm 嵌入 script 碼就能令手機支援到拖拽功能,還是說加入 script 後再看 stack overflow 的教學說明喔?
回复 carry0987 2016-4-10 11:53 AM
天香公主: 改spacecp_avatar.htm吧,如果你是在那里引入jqueryui的。就象我那样在引入jqueryui文件后,引入这个文件。
啊,我忘記我的插件還沒跟你的html5上傳頭像結合...
回复 carry0987 2016-4-10 11:45 AM
天香公主: 改spacecp_avatar.htm吧,如果你是在那里引入jqueryui的。就象我那样在引入jqueryui文件后,引入这个文件。
沒問題!
回复 天香公主 2016-4-10 11:34 AM
carry0987: 下載到網站裡了,那要修改哪些文件呢?
改spacecp_avatar.htm吧,如果你是在那里引入jqueryui的。就象我那样在引入jqueryui文件后,引入这个文件。
回复 carry0987 2016-4-10 11:14 AM
天香公主: 对,我博文里只能用cdn里的文件。你改头像编辑的话,把这个文件下载到网站好了。
下載到網站裡了,那要修改哪些文件呢?
回复 天香公主 2016-4-10 11:03 AM
carry0987: 你....看得懂英文.....
我看不懂啊....那個網站我知道,有相當多的js可以引用,但是我看不懂介紹...
是说stackoverflow吧。对,好象那里各种编程问题的讨论最多。
回复 天香公主 2016-4-10 11:00 AM
对,我博文里只能用cdn里的文件。你改头像编辑的话,把这个文件下载到网站好了。
回复 carry0987 2016-4-10 10:54 AM
天香公主: 我刚在我文中的那个例子里用的
    <script src=&quot;https://code.jquery.com/ui/1.11.4/jquery-ui.min.js&quot;></script>
后加了一句:
    <script src=&qu ...
我去試試,在後面加上
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 對吧?
回复 carry0987 2016-4-10 10:51 AM
你....看得懂英文.....
我看不懂啊....那個網站我知道,有相當多的js可以引用,但是我看不懂介紹...
回复 天香公主 2016-4-10 10:35 AM
carry0987: 天香,你看看這個網站的html5頭像上傳,它支援手機上調整圖片大小。
http://www.wnacg.org (可惜是紳士網站...不過技術人員厲害)
圖片:
[img]https://41.media ...
我刚在我文中的那个例子里用的
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
后加了一句:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
现在我这个例子里的选择框在iPad上也能移动和伸缩了。所以估计把这句加到头像编辑里也能有同样效果。
回复 天香公主 2016-4-10 08:43 AM
carry0987: 天香,你看看這個網站的html5頭像上傳,它支援手機上調整圖片大小。
http://www.wnacg.org (可惜是紳士網站...不過技術人員厲害)
圖片:
[img]https://41.media ...
哦,我们说的成人网站在你们那叫绅士网站啊。你可以在他们页面上查查他们用了什么javascript library。我估计用支持touchscreen的jqueryui变体就能做到,看这里的讨论 http://stackoverflow.com/questions/3026915/how-can-i-make-a-jquery-ui-draggable-div-draggable-for-touchscreen
回复 carry0987 2016-4-10 02:49 AM
天香,你看看這個網站的html5頭像上傳,它支援手機上調整圖片大小。
http://www.wnacg.org (可惜是紳士網站...不過技術人員厲害)
圖片:



回复 carry0987 2016-3-10 10:15 AM
天香公主: 谢谢你帮助解决这个问题!我更新了下载文件:http://www.bian-wang.com/upload/avatar_160309.zip
我更感謝您幫我解決這個問題!!(我研究一下要怎麼與我的頭像上傳插件結合)
回复 天香公主 2016-3-10 01:11 AM
carry0987: 那個模板沒有home資料夾
谢谢你帮助解决这个问题!我更新了下载文件:http://www.bian-wang.com/upload/avatar_160309.zip
回复 carry0987 2016-3-7 12:10 PM
那個模板沒有home資料夾
回复 天香公主 2016-3-7 12:05 PM
carry0987: 我的網站是使用yeei dream1的模板..我把文件發給你看看
哦,还有两个问题:
1)你把我的文件拷贝到你网站后更新过缓存吗?
2)在template/你用的风格模板名/home文件夹里有没有spacecp_avatar.htm?
回复 carry0987 2016-3-7 11:54 AM
我的網站是使用yeei dream1的模板..我把文件發給你看看
回复 天香公主 2016-3-6 11:31 PM
carry0987: 替換文件後上傳頭像時出現unexpected error

系統版本:Discuz X3.2 UTF-8 繁體
    我刚试了试用那个UC_Avatar.zip里的文件覆盖了一个新装的Discuz X3.2 UTF-8 繁体网站,没问题啊,你可以去那里注册试试:http://distst.website/discuz_x3.2_tc_utf8

有几个问题和建议:
1)你的网站在用这些新文件前可以编辑头像吗?
2)是在多种浏览器里都出错,还是就是在IE里出错?
3)你的网站用的是默认风格模板吗?
4)能不能用个工具比较下确认你网站里的下面三个文件和UC_Avatar.zip的对应文件完全相同?
source/language/home/lang_template.php
template/default/home/spacecp_avatar.htm
uc_center/control/user.php
或者在你的网站里把这三个文件找出来发给我看看
12下一页

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-2-26 05:12 PM , Processed in 0.065444 second(s), 21 queries.

返回顶部