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

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

日志

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

热度 8已有 1744 次阅读2016-10-17 09:57 AM |个人分类:Discuz| 开发

在前文(链接)中我们讨论了基于HTML5的插件来替代Discuz原来的基于Flash的头像编辑功能。和Flash一样,HTML5里的画布(canvas)也能在客户端提供生成头像,以及在裁剪头像界面上按选择框和伸缩度的变化实时变动头像显示的作用。但后来我们发现画布也有个缺陷:动画图片经裁剪保存下来后成了静态图片,也就是说裁剪保存的只是动画图片中的第一幅。详见这里的讨论(链接)。另外画布还带有一定的安全隐患(链接)。所以本文讨论一种替代方案。头像的生成在服务器端完成,而裁剪头像界面则用普通的HTML元素来实现。这种新方法支持动画图片作为头像。

1) 生成头像
Discuz里的图片处理函数并不支持裁剪动画图片,而PHP里常用的GD函数库里的函数也不直接支持裁剪动画图片。所以我们使用了基于GD的函数库 ImageWorkshop (参见 这里 的介绍)。

在Discuz里储存头像是用户中心处理的,那么是不是必须将生成头像的代码加到那去,使之先生成再储存呢?这样做法虽然可行,但改动了Discuz的源代码,这样这个改动就不是一个可以散发的插件了。我们的做法是将生成头像的代码放在插件里。当用户点击提交头像的按钮后,先调用插件提供的PHP代码来生成头像,并将头像数据存在客户端的隐藏元素里,提交给服务器端,这样一来用户中心还是和原来一样储存头像。所以新方法还是插件形式的修改。

2) 头像裁剪界面
用画布来实现裁剪界面非常方便,因为画布提供了在它上面画图的功能。而用HTML元素来实现则费劲些。需要用上四个元素。最底层是用一个image元素来显示头像图片。在它上面是个以灰色为底色的半透明的div元素。在它上面是除边框外全透明的div元素作为选择框。在它上面又是一个image元素,它不透明,它将头像图片作为背景图片来达到只显示头像部分的效果。


这个做法的本身没用到HTML5的任何功能,但一些旧版的浏览器不支持它用到的一些HTML元素的风格设置如半透明。所以和原来的插件一样,在不支持HTML的浏览器里我们将这个插件退化成原来的Flash功能。

更新记录:
11/28/2017更新:防止与其它版本的jQuery发生冲突。
12/01/2017更新:将属性里设置的load事件处理改为在代码里设置,以避免在使用Cloudflare的网站里被其更改而不工作。

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

发表评论 评论 (40 个评论)

回复 痕迹 2017-9-28 10:00 AM
天香公主: 欢迎新网友。行,我试后会把3.3和3.4加上去。但我估计你遇到的问题与版本无关,你"本地环境测试"用的Port是80吗?我记得这个插件只支持80,好象原来D的功能就 ...
本地环境Port是80,php 5.6 , mysql 5.5 , nginx 1.12

再次感谢作者大大~
回复 天香公主 2017-9-28 09:33 AM
痕迹: 能不能求作者大大把这个头像上传的插件更新到X3.4,我在本地环境测试的时候是可以上传,但是保存失败,不晓得哪里的问题。

先感谢作者大大   ...
欢迎新网友。行,我试后会把3.3和3.4加上去。但我估计你遇到的问题与版本无关,你"本地环境测试"用的Port是80吗?我记得这个插件只支持80,好象原来D的功能就有此局限。
回复 痕迹 2017-9-28 02:07 AM
能不能求作者大大把这个头像上传的插件更新到X3.4,我在本地环境测试的时候是可以上传,但是保存失败,不晓得哪里的问题。

先感谢作者大大
回复 JYDLQ 2017-5-28 10:15 PM
天香公主: 谢谢。是个"使用静态地址调用头像"情况下才出现的路经问题,已经更新了本文末的插件下载(更正了其中的avatar.js文件),请下载插件再试。

站长->UCenter设 ...
有劳了~
回复 天香公主 2017-5-28 03:11 PM
JYDLQ: 上传成功后,三个大小的预览不显示,目前就发现这个问题
谢谢。是个"使用静态地址调用头像"情况下才出现的路经问题,已经更新了本文末的插件下载(更正了其中的avatar.js文件),请下载插件再试。

站长->UCenter设置->头像调用方式:
     使用动态地址调用头像
     使用静态地址调用头像
回复 JYDLQ 2017-5-28 03:45 AM
天香公主: 我试着注册了,但没收到邮件。有点怀疑提交是否成功了,因为填写了邮箱地址后,接着要填认证码时,邮箱地址框里的内容就消失了,而且样子有很大变化,在FF和GC里 ...
差点忘记了,我那个模板还是个半成品,哈哈,见笑了,我这就私信给你
回复 天香公主 2017-5-28 12:05 AM
JYDLQ: www.zaacg.com
欢迎
我试着注册了,但没收到邮件。有点怀疑提交是否成功了,因为填写了邮箱地址后,接着要填认证码时,邮箱地址框里的内容就消失了,而且样子有很大变化,在FF和GC里都这样。http://www.bian-wang.com/discuz/data/attachment/album/201705/28/000435lzmhf53vvh5cadmm.png 如果你要试的话,把txgz999@yahoo.com 填上去看看。
要不你帮我注册个用户,把用户名和密码用私信发给我吧,谢谢。
回复 JYDLQ 2017-5-27 11:24 PM
天香公主:    把你网站的url告诉我,让我去注册试试?
www.zaacg.com
欢迎
回复 天香公主 2017-5-27 11:20 PM
JYDLQ: 上传成功后,三个大小的预览不显示,目前就发现这个问题
   把你网站的url告诉我,让我去注册试试?
回复 JYDLQ 2017-5-27 11:08 PM
上传成功后,三个大小的预览不显示,目前就发现这个问题
回复 东风 2016-10-31 04:18 PM
ludi99: 没有啦。其实我这人既爱偷懒又比较笨。觉得你们几个高手好厉害,所以来向你们请教。
大家一起研讨~ 新周快乐
回复 ludi99 2016-10-30 02:31 PM
东风: 我来试着回答你:第一,支持多数据库。第二,具备和第三方系统环境对接的API接口; 这两个在Discuz都没有问题, 北美生活网就是一个主站支持3个站点数据库; 第 ...
我给UCenter数据库话题另开了一篇日志 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10364&do=blog&quickforward=1&id=1535

有空时来给提点建议。
回复 ludi99 2016-10-30 02:26 PM
东风: 向你学习!!
没有啦。其实我这人既爱偷懒又比较笨。觉得你们几个高手好厉害,所以来向你们请教。
回复 东风 2016-10-30 07:30 AM
发现问题所在了,上传的mp3是假的mp3格式,实际是mpeg编码,却用了mp3后缀。需要vlc-player来转码~
回复 东风 2016-10-30 07:24 AM
天香公主: 北美商城用的是品牌空间吗?那你用的三个数据库是不是就是下面这三个?
1)ucenter安装的数据库
2)discuz安装的数据库
3)品牌空间安装的数据库 ...
天香,向你求救来了:http://www.beimeilife.com/home.php?mod=space&uid=1469&do=blog&id=11992&_dsign=082910a7 上传的音乐在IE上可以播放,但是chrome 和firefox就不可以,甚至不能播放了。不知道怎么回事。
回复 东风 2016-10-30 07:19 AM
天香公主: 北美商城用的是品牌空间吗?那你用的三个数据库是不是就是下面这三个?
1)ucenter安装的数据库
2)discuz安装的数据库
3)品牌空间安装的数据库 ...
是的,三个不同的前缀。
回复 东风 2016-10-30 07:17 AM
ludi99: 惭愧惭愧,不幸被卷入到一些争端中。让大家见笑了。

是的,我同意你说的Discuz已经具备了支持多数据库的功能。目前UCenter只能做在一个数据库上,虽然一个UCent ...
向你学习!!
回复 天香公主 2016-10-29 06:58 PM
东风: 我来试着回答你:第一,支持多数据库。第二,具备和第三方系统环境对接的API接口; 这两个在Discuz都没有问题, 北美生活网就是一个主站支持3个站点数据库; 第 ...
北美商城用的是品牌空间吗?那你用的三个数据库是不是就是下面这三个?
1)ucenter安装的数据库
2)discuz安装的数据库
3)品牌空间安装的数据库
回复 ludi99 2016-10-29 03:21 PM
东风: 我来试着回答你:第一,支持多数据库。第二,具备和第三方系统环境对接的API接口; 这两个在Discuz都没有问题, 北美生活网就是一个主站支持3个站点数据库; 第 ...
惭愧惭愧,不幸被卷入到一些争端中。让大家见笑了。

是的,我同意你说的Discuz已经具备了支持多数据库的功能。目前UCenter只能做在一个数据库上,虽然一个UCenter可以支持多个站点,但UCenter只能有一个。我想把UCenter的功能再进一步加以扩展。希望能够做到在一个站点(或多个站点)上支持多个UCenter(每个UCenter可有独自的数据库和库表)。

从架构上来说,我觉得Discuz已经把UCenter和论坛内容剥离开了。也就是把用户管理和用户操作(发表文章)分离开了。估计可行性还是比较大的。
回复 ludi99 2016-10-29 03:08 PM
天香公主:    好象没写过吧?
也许我记错了。或是你在哪篇日志里做过一些说明,我一时也想不起来。

我有权限写日志了,简单地写几个字先挂出来。收集一些资料,慢慢再补充细化。
12下一页

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-12-14 10:31 PM , Processed in 0.062931 second(s), 21 queries.

返回顶部