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

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

日志

从代码修改到插件开发:头像编辑

热度 9已有 3891 次阅读2016-4-16 08:37 PM |个人分类:Discuz

从修改系统代码到开发插件:头像开发


不久前应网友aikato的要求把头像编辑功能由flash改成了html5 (链接)。当时没对这事有多大兴趣因为这不是个网民每次上网都要用到的功能,也许一个网民在一个网站就用一次。没想到贴出来后好几位网友表示不喜欢flash而偏好html5。网友carry0987向我介绍了他人写的头像插件和其它网站上对这个功能的修改,所以我也来尝试下将我的修改代码改成插件形式。

编码和解码

回想起来当时没有写成插件一是因为没有需要,二是由于当头像在flash编辑后上传到服务器后,服务器端的程序对上传上来的图片数据做了个解码,这说明flash程序里对图像数据做了某种编码。而html5则用了另一种称为base64的编码,所以在服务器端需要对数据做base64的解码。当时觉得如果不直接修改Discuz代码来支持这种解码而写插件的话,就要拷贝很多Discuz代码到插件里就有些无聊了。这次重新考虑了下,发现我们可以在客户端将html5生成的用base64编码的图片数据先解码,再按服务器端的flash解码方式在客户端先做对应的编码,这样上传的图片数据就和原来完全相同,因而就不用修改服务器端的代码了。

Discuz的解码程序在文件 uc_server/control/user.php 里: function flashdata_decode($s) { $r = ''; $l = strlen($s); for($i=0; $i<$l; $i=$i+2) { $k1 = ord($s[$i]) - 48; $k1 -= $k1 > 9 ? 7 : 0; $k2 = ord($s[$i+1]) - 48; $k2 -= $k2 > 9 ? 7 : 0; $r .= chr($k1 << 4 | $k2); } return $r; } 这个编码基于常用的16进制数表示:0到9的数字不变,而10到15分别用字母A到F来表示。用这种0到15这16个数字和0到9加上A到F共16个字符间的一一对换,每个8位数据都可以用两个0到9加上A到F的字符组合表示,而解码就是两个0到9加上A到F的字符组合转换成一个8位数据。

举例而言:200 = 12 * 16 + 8 => (12, 8) => (C, 8) => C8。理解了这一点,我们就不难在网页代码里重现原来flash里的编码程序(因为是javascript代码,用到的函数和原来的php代码有所不同,本质是一样的): function flashdata_encode(s) { var r = ''; var l = s.length; for (var i = 0; i < l; i++) { var k = s[i].charCodeAt(0); var k1 = k >> 4; var k2 = k - (k1 << 4); k1 += 48; if (k1 > 57) k1 += 7; k2 += 48; if (k2 > 57) k2 += 7; r += String.fromCharCode(k1, k2); } return r; }
一些改进:

1)头像图片的三种来源:原来的代码修改旨在替换原有的头像编辑功能,所以只支持上传用户自己机器上的图片做为头像。但为什么不能象日志里添加图片那里那样,也支持用相册图片和网络图片做为头像呢?所以在这个插件里我支持了上传图片,相册图片和网络图片三种图片来源:
界面的代码参照了文件 template/default/home/editor_image_menu.htm,而处理提交选择后的图片的代码参照了文件 uc_server/control/user.php。幸好裁剪图片的代码不管图片来自何方,所以并不需要为支持相册图片和网络图片而添加很多代码。

2)以flash 为后备(fallback):以html5替代flash固然好,但万一有用户用的是旧的浏览器不支持html5怎么办呢?为此我加了一段判断用户的浏览器是否支持html5的画布功能。如果支持就用我们的html5功能,不然还是显示原来的flash功能: if (isCanvasSupported()) { replaceAvatarSection(document.getElementById('avatardesigner')); ... } //http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-is-not-supported function isCanvasSupported() { var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); }
3)在javascript文件里使用语言包里的汉字:在插件中的javascript文件里要使用汉字比如提示框里要显示汉字怎么办?有此问题是在javascript文件里不象在php文件和html文件能调用语言包里定义的汉字。Discuz代码自身的做法是在有些javascript文件里直接把汉字写在里面,因此对于这些文件,Discuz的每个语言版本就提供了不同版本的文件(而不是象其它文件那样通用)。而且这种做法也不适合要支持多种语言版本的插件因为把插件放到Discuz应用中心时没法提供多个语言版本的同一javascript文件。看到Discuz网站上一个讨论(链接)给出了个很好的解决方法:在html文件里调用语言包里的汉字来定义javascript变量值,而在javascript文件里调用这些变量:
在模板文件 avatar.htm 里: <script type="text/javascript"> var upload_succeed = '{lang txgz_avatar:upload_succeed}'; var three_avatars = '{lang txgz_avatar:three_avatars}'; var upload_error = '{lang upload_error}'; </script> <script type="text/javascript" src="source/plugin/txgz_avatar/js/avatar.js?{VERHASH}"></script> 在 javascript 文件 avatar.js 里: ctx.fillText(upload_succeed, dwidth - 140, 180);

10/17/2016补充:写了一个不基于HTML5且支持动画图片的新版本 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1533
04/26/2017更新:网友e0759提醒本插件在Discuz2.5里不工作。检查发现由模版文件avatar.htm产生的脚本文件有语法错误。看来是因为Discuz2.5的block标签内不能插入eval标签 (链接),解决办法是将原来开始的两句 <!--{block avatardesigner}--> <!--{eval $albums = getalbums($_G['uid']); }--> 改成 {eval $albums = getalbums($_G['uid']); } <!--{block avatardesigner}--> 这样就适用于2.5以上的所有版本了。
11/27/2017更新:当选择本地图片时,没有必要把图片先上传到服务器上,可以直接显示在图片元素里。这是File API提供的功能,参见这里的讨论。注意网络图片仍有先拷贝到服务器的必要,不然在裁剪图片时会出现跨域安全错误。
11/28/2017更新:防止与其它版本的jQuery发生冲突。
11/29/2017更新:将属性里设置的load事件处理改为在代码里设置,以避免在使用Cloudflare的网站里被其更改而不工作。

插件下载: http://www.bian-wang.com/discuz/data/userupload/10005/txgz_avatar.zip (11/29/2017最后更新)

发表评论 评论 (161 个评论)

回复 噗呲 2017-12-1 03:08 AM
天香公主: 我又更新了 txgz_avatar,请再试试。这次我感觉应该可行了   
刚测试完毕,功能完全可以正常使用了~非常感谢~接下来是不是要研究一下手机版了呢
回复 天香公主 2017-11-29 09:44 PM
噗呲: 上传测试了一下发现,浏览器的极速模式下面还是无法跳转到成功提示页面,并且 http://域名/undefined 404 (Not Found)的错误依然出现呢。但是在兼容模式(iE浏览 ...
我又更新了 txgz_avatar,请再试试。这次我感觉应该可行了  
回复 噗呲 2017-11-29 02:16 AM
天香公主: 谢谢反馈。这个错误可能是多个jQuery版本文件冲突造成的。我又更新了txgz_avatar,加了对jQuery冲突的防范,还做了些细微的改动,请再试试。

如果还是有问题的 ...
上传测试了一下发现,浏览器的极速模式下面还是无法跳转到成功提示页面,并且 http://域名/undefined 404 (Not Found)的错误依然出现呢。但是在兼容模式(iE浏览器)下面可以完全正常使用。这个是不是也跟js有关呢。感觉给您添了好多麻烦呀~~真是非常抱歉了~
回复 天香公主 2017-11-29 12:07 AM
噗呲: 经过测试,头像可以编辑和上传了,但是新的问题出来了,上传成功后没有任何提示。页面仍然停留在编辑头像的页面。正常的话应该会出现提示上传成功并且会显示三种 ...
谢谢反馈。这个错误可能是多个jQuery版本文件冲突造成的。我又更新了txgz_avatar,加了对jQuery冲突的防范,还做了些细微的改动,请再试试。

如果还是有问题的话,最好你能建个测试网站,这样可以比较自由的开关Cloudflare和其它插件,便利于找出问题的原因和debug。
回复 噗呲 2017-11-28 11:45 AM
天香公主: 我刚改了下txgz_avatar,你可以试试在第一个tab上选择本地图片时效果是不是好点?
经过测试,头像可以编辑和上传了,但是新的问题出来了,上传成功后没有任何提示。页面仍然停留在编辑头像的页面。正常的话应该会出现提示上传成功并且会显示三种不同大小的头像图片。嗯~~会不会是引用的js与模板或者dz本身的js文件冲突了呢?因为我看到这个页面有个模板的js总是在不断提示404。如果是冲突的话,该具体怎么修改代码呢?
回复 噗呲 2017-11-28 11:10 AM
天香公主: 请问CloudFlare是怎么加到你的网站上去,我想试试
https://www.cloudflare.com/注册后添加你哒域名,然后修改下dns解析就可以了
回复 天香公主 2017-11-28 01:36 AM
噗呲: 今天把网站升级到了3.3,然后突然发现这个编辑头像的插件不能正常使用了,选择本地图片后不会进行上传。抱着试一试的想法又去下载上传了txgz_avatar2,这个虽然 ...
我刚改了下txgz_avatar,你可以试试在第一个tab上选择本地图片时效果是不是好点?
回复 天香公主 2017-11-27 04:09 PM
噗呲: 网站一个月内会被攻击好几次,所以才使用了CloudFlare,防御效果还是有的。倒不是很期待他的加速效果。
关于日志的问题,我发现在IE浏览器下没问题,只有谷歌浏 ...
请问CloudFlare是怎么加到你的网站上去,我想试试
回复 噗呲 2017-11-27 01:22 AM
天香公主: 你的网站用了CloudFlare吧?你能感觉得到它的加速效果吗?我猜测你日志分布页的问题就是它引起的,头像的问题也许也与它有关。建议关闭它后,试试这些问题是否依 ...
网站一个月内会被攻击好几次,所以才使用了CloudFlare,防御效果还是有的。倒不是很期待他的加速效果。
关于日志的问题,我发现在IE浏览器下没问题,只有谷歌浏览器、遨游浏览器(极速模式)等会出现问题。
回复 天香公主 2017-11-26 06:47 PM
噗呲: 在你的dz33测试了下,上传稍大一些的图片时,在裁剪编辑页会出现空白的现象,上传小图正常。可能是加载快慢的问题。然后我又回到自己的站里上传小图测试了下,一 ...
你的网站用了CloudFlare吧?你能感觉得到它的加速效果吗?我猜测你日志分布页的问题就是它引起的,头像的问题也许也与它有关。建议关闭它后,试试这些问题是否依然存在。
回复 噗呲 2017-11-26 02:34 PM
天香公主: 我试了试手机版,手机版上的确可以用插件,但是怎么加头像编辑功能呢?我还没想清楚,想听听你的意思。电脑版上有头像编辑网页,所以我可以用插件修改那个网页。 ...
刚去把隐藏的手机版编辑头像的页面显示出来了:浏览器的开发者模式在头像编辑页面的网址后面加上“&mobile=1”就可以看到了。打开后发现看不到插件了,可能是之前我是直接按照你的教程去修改的网页,而不是用的插件。看了下复制到手机版的头像编辑页面源码,也有插件的插入点,感觉插件的话应该是可以插入进去修改的呢。可以尝试一下。
回复 噗呲 2017-11-26 01:39 PM
天香公主: 去了你的网站没法注册,它是需要邀请码的吧?要不你帮我注个册,在消息里发给我?

你说的‘上传稍大一些的图片’时出现问题,能否给我一两个这样的图片的url, ...
不用邀请码也可以注册的,邀请码那里留空就可以。大图片就是指500kb以上的那种,这个是在你安装的那个站上测试出来的。我感觉我的站上传头像出问题可能是跟使用的模板js文件有冲突导致的,但自己没找到具体是哪个地方,对js代码不熟悉。
回复 天香公主 2017-11-26 01:19 PM
噗呲: 在你的dz33测试了下,上传稍大一些的图片时,在裁剪编辑页会出现空白的现象,上传小图正常。可能是加载快慢的问题。然后我又回到自己的站里上传小图测试了下,一 ...
去了你的网站没法注册,它是需要邀请码的吧?要不你帮我注个册,在消息里发给我?

你说的‘上传稍大一些的图片’时出现问题,能否给我一两个这样的图片的url,我来试试?另外我觉得这问题应该和dz版本无关,即如果你升级后有这问题,那我估计你在升级前用同一张图片的话也会有问题。
回复 噗呲 2017-11-26 01:10 PM
天香公主: 我试了试手机版,手机版上的确可以用插件,但是怎么加头像编辑功能呢?我还没想清楚,想听听你的意思。电脑版上有头像编辑网页,所以我可以用插件修改那个网页。 ...
默认的手机模板没有这个头像编辑页,我的那些手机版页面都是把电脑版的页面加到手机模板的目录下直接修改的,所以可以直接用电脑版的头像编辑页。将电脑版的头像编辑页放到手机版对应目录下修改一下css就可以用了。一些没有手机版页面的插件我也是这样去修改添加的手机版页面,都完全可以正常使用。我看有的付费手机修改头像插件,他们有的直接使用自己单独的页面去上传编辑。嗯~~大体思路就是可以直接给插件做个专门的编辑头像页面。也可以把电脑版的头像编辑页放在手机版对应目录下对它进行修改。不知道有没有看懂呢~对于我的站来说,已经有一个手机编辑头像页面了,就是把电脑版的页面放在手机版对应目录下生成的。你的插件也能在那个页面里正常显示,就是不工作而已。所以现在我一直隐藏着那个页面暂时没开放。
回复 天香公主 2017-11-26 12:41 PM
噗呲: 请问怎么修改才能将插件适配到手机版论坛呢?
我试了试手机版,手机版上的确可以用插件,但是怎么加头像编辑功能呢?我还没想清楚,想听听你的意思。电脑版上有头像编辑网页,所以我可以用插件修改那个网页。但是手机版上并没有这个网页,那这个头像编辑功能该放在哪呢?你是要用一个现有的网页如个人资料页,在它上面加个头像编辑功能吗?
回复 噗呲 2017-11-26 06:27 AM
天香公主: 我刚装了一个DZ33网站,两个插件都试了没问题。你去试试看? https://ngcorner.com/dz33171125/ (现在启用的是txgz_avatar)。能把有问题的网站的URL告诉我吗? ...
在你的dz33测试了下,上传稍大一些的图片时,在裁剪编辑页会出现空白的现象,上传小图正常。可能是加载快慢的问题。然后我又回到自己的站里上传小图测试了下,一开始可以正常上传,然后第二次上传就出问题了,卡在上传页面不动了。测试地址:http://www.lolihd.com/home.php?mod=spacecp&ac=avatar(对插件哒界面进行了小小的美化,希望不要太介意~)另外,如果在上传界面加一个“立即上传”的按钮和上传进度条会更友好一些。一些用户在上传比较大的头像的时候页面可能会长时间不动,没有任何提示的话还以为是卡住了然后直接刷新页面,那就又要重新上传了呢。(另外如果有时间的话帮忙看一下日志发表页吧,升级后编辑框不能输入了http://www.lolihd.com/home.php?mod=spacecp&ac=blog
回复 天香公主 2017-11-25 10:54 PM
噗呲: 今天把网站升级到了3.3,然后突然发现这个编辑头像的插件不能正常使用了,选择本地图片后不会进行上传。抱着试一试的想法又去下载上传了txgz_avatar2,这个虽然 ...
我刚装了一个DZ33网站,两个插件都试了没问题。你去试试看? https://ngcorner.com/dz33171125/ (现在启用的是txgz_avatar)。能把有问题的网站的URL告诉我吗?我去试试
回复 噗呲 2017-11-25 05:00 PM
天香公主: 欢迎新网友。是特指这个插件吧?感觉是可行的,等这个周末或下个周末我试试
今天把网站升级到了3.3,然后突然发现这个编辑头像的插件不能正常使用了,选择本地图片后不会进行上传。抱着试一试的想法又去下载上传了txgz_avatar2,这个虽然可以上传了,但是却无法进行保存,点击确定按钮后就没有反应了呢。好伤心~果然不该升级新版本么。
回复 噗呲 2017-11-22 03:40 AM
天香公主: 欢迎新网友。是特指这个插件吧?感觉是可行的,等这个周末或下个周末我试试
是哒,因为我的站(X3.2)用另一个的时候不工作,可能是跟模板里的js文件有冲突。用这个【TXGZ】头像编辑 1.0 (txgz_avatar)的就没问题。然后自己试着去弄手机版页面,发现只能把原有的头像删除了,并不能保存新头像,捣鼓了好久都没解决~很是郁闷~希望公主能指导一下~
回复 天香公主 2017-11-9 07:36 AM
噗呲: 请问怎么修改才能将插件适配到手机版论坛呢?
欢迎新网友。是特指这个插件吧?感觉是可行的,等这个周末或下个周末我试试

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

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

返回顶部