http://haoqicat.com/edit-avatar 页面 bug

happypeter commented 10 years ago

how to reproduce

打开 http://haoqicat.com/edit-avatar
选择一张头像图片（长宽比不合适的）
在出现弹窗可以编辑的时候，点击关闭
那么这时这张长宽比不合适的图片会变成我的头像
所以头像是扁的

luckyyang commented 10 years ago

@happypeter 你应该点击裁剪并保存按钮才可以保存你裁剪的区域

luckyyang commented 10 years ago

不点击那个按钮默认你是不需要裁剪，所以就按你上传的头像保存了，这个逻辑还是很清楚的

happypeter commented 10 years ago

@luckyyang 不对。如果我不点击保存，证明我觉得我这张图片我不喜欢，或是上传错了，所以我才点击取消。那么这时正确的行为是还是使用我原来的 avatar。

可以参考 twitter. weibo 或者任意一个网站。

luckyyang commented 10 years ago

哦，这点我是同意的

luckyyang commented 10 years ago

视频上传也有同样的问题，应该需要最后用户确认一下才更新/上传，如果取消上传，就不更新/上传

luckyyang commented 10 years ago

裁剪需要获取图像的尺寸信息，目前是从服务器上获取的，而这样的话就需要把图片首先上传到服务器。

twitter的做法肯定不是把图片先上传到服务器，因为原始图片没有更新。

这种做法可能是：

通过jquery fileupload上传后，前端显示预览的图片。
如果可以获取到图片尺寸的话（不确定），用jcrop进行裁剪。如果取消编辑，原始图像不会受影响
把图片和裁剪获得的尺寸参数一同传会服务器，交给carrivewave处理
完成图像上传，前端显示新图像

luckyyang commented 10 years ago

good example: http://blueimp.github.io/JavaScript-Load-Image/

luckyyang commented 10 years ago

twitter的裁剪图片用的是image data url：

通过html5的file api实现起来还是挺容易的（http://codepen.io/luckyyang/pen/BghJD ），所以现在的步骤是：

通过html5的file api上传后，前端显示预览的图片。
用jcrop进行裁剪。如果取消编辑，原始图像不会受影响
把图片和裁剪获得的尺寸参数一同传会服务器，交给carrivewave处理
完成图像上传，前端显示新图像

1和2 已实现

happypeter commented 10 years ago

html5的file api 这个我原来试过，确实很好用，不过当时放弃了，因为跨平台支持太差了。好像只要是 IE 上都不能用，我记不清了，你 double check 一下吧。

twitter 如果用的话，当然咱们就一定能用了，不过可能也要看一下在不支持的平台上 twitter 是如何做 fall back 的。

luckyyang commented 10 years ago

http://dataurl.net/#about

Browser support

Data URIs are currently supported by the following web browsers:

Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine Safari, Chrome and other WebKit-based browsers Opera Konqueror Internet Explorer 8+ (with certain limitations)

我再看一下

luckyyang commented 10 years ago

上面是data url的支持，是都支持的。

我应该看的是file api的支持

luckyyang commented 10 years ago

file api和filereader api要 IE 10+ 才可以，我看看有什么其它的办法

happypeter commented 10 years ago

那看来我没有记错

luckyyang commented 10 years ago

google了一圈，基本的解决方案都是要用到html5的file api，包括jquery file upload里面的某些js库似乎也一样。twitter虽然看不到源码，但是表面来看，应该也是这么用的。

twitter在IE（我在IE9下测试。ie11没测试，分别在不同的虚拟机上安装vpn好麻烦）下是使用另外一套template，因为file api不能用：

咱们的头像文件上传在ie9下也是不成功的，在ie11上是没问题的。而且我也测了一下jquery file upload在ie9 和 ie11上的表现，使用的他们官方的例子:

ie 9 的预览是出不来的，因为jquery file upload使用canvas来显示预览
ie11下可以显示预览

所以，我的选择是：

选择使用html5的file api。至于对于ie10以下的支持，如果以后必要，像twitter一样单独做一个template给这些浏览器

@happypeter 有什么想法？

happypeter commented 10 years ago

对，twitter 的方案肯定是最完美的，咱们慢慢学过来就行了。对于 ie10 以下浏览器的 fallback 也可以暂时不弄。

luckyyang commented 10 years ago

其实咱们现在的jquery fileupload方案用的就是file api：

file = data.files[0];

luckyyang commented 10 years ago

twitter的base64（data url）转换成jpg是在服务器端实现的。rails method：

decode64(data)

Decodes a base 64 encoded string to its original representation.

ActiveSupport::Base64.decode64("T3JpZ2luYWwgdW5lbmNvZGVkIHN0cmluZw==")
# => "Original unencoded string"

from http://api.rubyonrails.org/v3.2.13/classes/Base64.html#method-c-decode64

luckyyang commented 10 years ago

done

happypeter / onestep