日志
从代码修改到插件开发：头像编辑（续）
热度 11 ||
在前文（链接）中我们讨论了基于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最后更新）
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最后更新）
全部作者的其他最新日志
发表评论 评论 (37 个评论)
- 回复 天香公主
- 欢迎新网友。行，我试后会把3.3和3.4加上去。但我估计你遇到的问题与版本无关，你＂本地环境测试＂用的Port是80吗？我记得这个插件只支持80，好象原来D的功能就有此局限。
痕迹: 能不能求作者大大把这个头像上传的插件更新到X3.4，我在本地环境测试的时候是可以上传，但是保存失败，不晓得哪里的问题。
先感谢作者大大
...
- 回复 天香公主
- 谢谢。是个＂使用静态地址调用头像＂情况下才出现的路经问题，已经更新了本文末的插件下载（更正了其中的avatar.js文件），请下载插件再试。
JYDLQ: 上传成功后，三个大小的预览不显示，目前就发现这个问题
站长-＞UCenter设置-＞头像调用方式:
使用动态地址调用头像
使用静态地址调用头像
- 回复 天香公主
- 我试着注册了，但没收到邮件。有点怀疑提交是否成功了，因为填写了邮箱地址后，接着要填认证码时，邮箱地址框里的内容就消失了，而且样子有很大变化，在FF和GC里都这样。http://www.bian-wang.com/discuz/data/attachment/album/201705/28/000435lzmhf53vvh5cadmm.png 如果你要试的话，把txgz999@yahoo.com 填上去看看。
JYDLQ: www.zaacg.com
欢迎
要不你帮我注册个用户，把用户名和密码用私信发给我吧，谢谢。
- 回复 ludi99
- 我给UCenter数据库话题另开了一篇日志 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10364&do=blog&quickforward=1&id=1535
东风: 我来试着回答你：第一，支持多数据库。第二，具备和第三方系统环境对接的API接口； 这两个在Discuz都没有问题， 北美生活网就是一个主站支持3个站点数据库； 第 ...
有空时来给提点建议。
- 回复 东风
- 天香，向你求救来了：http://www.beimeilife.com/home.php?mod=space&uid=1469&do=blog&id=11992&_dsign=082910a7 上传的音乐在IE上可以播放，但是chrome 和firefox就不可以，甚至不能播放了。不知道怎么回事。
天香公主: 北美商城用的是品牌空间吗？那你用的三个数据库是不是就是下面这三个？
1）ucenter安装的数据库
2）discuz安装的数据库
3）品牌空间安装的数据库 ...
- 回复 东风
- 是的，三个不同的前缀。
天香公主: 北美商城用的是品牌空间吗？那你用的三个数据库是不是就是下面这三个？
1）ucenter安装的数据库
2）discuz安装的数据库
3）品牌空间安装的数据库 ...
- 回复 东风
- 向你学习！！
ludi99: 惭愧惭愧，不幸被卷入到一些争端中。让大家见笑了。
是的，我同意你说的Discuz已经具备了支持多数据库的功能。目前UCenter只能做在一个数据库上，虽然一个UCent ...
- 回复 天香公主
- 北美商城用的是品牌空间吗？那你用的三个数据库是不是就是下面这三个？
东风: 我来试着回答你：第一，支持多数据库。第二，具备和第三方系统环境对接的API接口； 这两个在Discuz都没有问题， 北美生活网就是一个主站支持3个站点数据库； 第 ...
1）ucenter安装的数据库
2）discuz安装的数据库
3）品牌空间安装的数据库
- 回复 ludi99
- 惭愧惭愧，不幸被卷入到一些争端中。让大家见笑了。
东风: 我来试着回答你：第一，支持多数据库。第二，具备和第三方系统环境对接的API接口； 这两个在Discuz都没有问题， 北美生活网就是一个主站支持3个站点数据库； 第 ...
是的，我同意你说的Discuz已经具备了支持多数据库的功能。目前UCenter只能做在一个数据库上，虽然一个UCenter可以支持多个站点，但UCenter只能有一个。我想把UCenter的功能再进一步加以扩展。希望能够做到在一个站点（或多个站点）上支持多个UCenter（每个UCenter可有独自的数据库和库表）。
从架构上来说，我觉得Discuz已经把UCenter和论坛内容剥离开了。也就是把用户管理和用户操作（发表文章）分离开了。估计可行性还是比较大的。
好象没写过吧？- 回复 carry0987
- 感謝相助!我把這個問題記錄下來
天香公主: 似乎明白了问题所在。你的web server要求向它发送的request的header里含有User-Agent，详见https://bugs.php.net/bug.php?id=22937#c64196里最后pollita的话。我 ...
- 回复 东风
- 我来试着回答你：第一，支持多数据库。第二，具备和第三方系统环境对接的API接口； 这两个在Discuz都没有问题， 北美生活网就是一个主站支持3个站点数据库； 第三方“北美商城” --http://www.beimeilife.com/bmmall/与主站共享UCenter一个数据库登陆.但是添加视频认证等限制。
ludi99: 不好意思，占用了有关头像编辑的话题空间。
我想象的“一个站点使用多个数据库”的情形比较符合你说的（3），同样的数表，不同的内容。但估计可能要有个master ...
老是看到各种文章里提到“检测”“检测”， 如今如雷贯耳的感觉
