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

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

日志

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

热度 8已有 1955 次阅读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);

插件下载: http://www.bian-wang.com/upload/txgz_avatar_160421.zip

10/17/2016补充:写了一个不基于HTML5且支持动画图片的新版本 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1533

发表评论 评论 (119 个评论)

回复 天香公主 2017-1-16 09:42 PM
東里山人: 首先感谢楼主的插件,很有用,解决了我的问题。然后再报告使用过程中发现的问题,我将两个DZ论坛共同一个UC(安装在其中一个论坛目录下),发现楼主的两个插件和 ...
谢谢你的反馈,我确实只测试了Discuz和UCenter同时安装的情形,等周末我将UCenter和Discuz分开装试试。有点我不明白你的描述,你的UCenter是和两个Discuz分开安装的,还是是作为第一个Discuz的一部分安装的?如果是后者的话,那在第一个Discuz里用我写的插件应该不会有问题吧?
回复 東里山人 2017-1-16 06:07 PM
首先感谢楼主的插件,很有用,解决了我的问题。然后再报告使用过程中发现的问题,我将两个DZ论坛共同一个UC(安装在其中一个论坛目录下),发现楼主的两个插件和直接修改源代码的HTML代码,都会无法上传头像,而采用DZ自带的FLASH则完倒没问题。如果不搞两个DZ共同一个UC,则插件正常。
回复 东风 2016-10-27 10:43 PM
天香公主: 谢谢!你有不能用的动画图片链接给我,让我试试。这还是预料之中的,因为它用的是GD库。据说用imagick库效果会好些。也许会把这个插件改成按网站的设置决定使用 ...
谢谢天香,我还是沿用第一个吧。
回复 天香公主 2016-10-18 07:09 PM
东风: 测试上传动画头像,对文件大小有要求,小的可以。 普通图片没问题
谢谢!你有不能用的动画图片链接给我,让我试试。这还是预料之中的,因为它用的是GD库。据说用imagick库效果会好些。也许会把这个插件改成按网站的设置决定使用哪种图片处理库。
回复 东风 2016-10-18 06:26 PM
测试上传动画头像,对文件大小有要求,小的可以。 普通图片没问题
回复 东风 2016-10-18 05:19 PM
天香公主: 写了个不基于HTML5且支持动画图片的新版本 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_avatar2.zip,欢迎试用
   太谢谢您了, You are the hero of all of us!!!
回复 天香公主 2016-10-17 01:59 PM
一定: 用上了,谢谢
欢迎新网友来一起讨论
回复 天香公主 2016-10-17 01:58 PM
写了个不基于HTML5且支持动画图片的新版本 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_avatar2.zip,欢迎试用
回复 天香公主 2016-10-17 01:57 PM
东风: 才发现,北美网改了后,动画头像不能上了gif图片,会自动变成jpg的了
写了个不基于HTML5且支持动画图片的新版本 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_avatar2.zip,欢迎试用
回复 一定 2016-10-5 02:09 AM
用上了,谢谢
回复 东风 2016-10-2 09:54 PM
天香公主:    对,以前就有网友发现过,这是我用的在客户端生成裁剪图片的方式(html5里的画布功能)造成的限制。等哪天有空时改成在服务器端生成裁剪图片的话就没有 ...
不要紧,不是关键,我们予以忽略
回复 天香公主 2016-9-28 06:04 PM
东风: 才发现,北美网改了后,动画头像不能上了gif图片,会自动变成jpg的了
对,以前就有网友发现过,这是我用的在客户端生成裁剪图片的方式(html5里的画布功能)造成的限制。等哪天有空时改成在服务器端生成裁剪图片的话就没有这个限制了。
回复 东风 2016-9-28 05:57 PM
才发现,北美网改了后,动画头像不能上了gif图片,会自动变成jpg的了
回复 e0759 2016-9-24 12:34 AM
天香公主: 我刚装了个PHP5.3的网站,测试了这个插件,没发现问题啊。不知你在哪个环节遇到问题。我测试网站的有关设置见 http://www.distst.website/dz091716/info.php,你 ...
天香,在avatar.htm中 <!--{eval $albums = getalbums($_G['uid']); }--> 这个语句导致了500错误。
回复 e0759 2016-9-21 08:23 AM
天香公主: 我刚装了个PHP5.3的网站,测试了这个插件,没发现问题啊。不知你在哪个环节遇到问题。我测试网站的有关设置见 http://www.distst.website/dz091716/info.php,你 ...
那就奇怪了,晚点我试试。
回复 天香公主 2016-9-17 10:05 AM
e0759: php7 测试通过,不兼容 php5.3
我刚装了个PHP5.3的网站,测试了这个插件,没发现问题啊。不知你在哪个环节遇到问题。我测试网站的有关设置见 http://www.distst.website/dz091716/info.php,你也可以在那里试试这个功能。

如果这个插件在你的PHP5.3网站还是不能用,建议你关闭这个插件,然后试试系统带来的头像编辑功能是否可用。如果也不可用说明是网站设置或安装的问题。
回复 天香公主 2016-9-15 07:11 AM
e0759: 已经用上。感谢天香您的分享。祝您中秋节快乐呀!    
谢谢,也祝你中秋快乐!

你前面是说这个插件在PHP5.3里不工作?不知具体在哪个步骤上有问题?等周末我装下试试。也许有哪句语句用了高版本才支持的语法。
回复 e0759 2016-9-15 12:28 AM
已经用上。感谢天香您的分享。祝您中秋节快乐呀!   
回复 e0759 2016-9-12 11:33 AM
php7 测试通过,不兼容 php5.3
回复 天香公主 2016-7-3 08:57 AM
carry0987: 我使用的是plesk管理介面,不知道要怎麼改...
估计imagick在你的系统里已经设置为可用,试试在管理中心里选择imagemagick后看图片上传能否成功便知

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-2-23 09:17 PM , Processed in 0.064143 second(s), 19 queries.

返回顶部