分享 用户自定义图片上传丶裁剪 Cropbox.js 爬坑小记 data:image/png;base64 数据流转换
最近在做一个小项目，添加一个用户自定义头像，经过几次尝试， 后来发现 CropBox.js 在图片裁剪及数据展示上很不错， 功能流畅，在体验了几张自己上传的图片后， 一个新的问题出现了，我应该怎么把裁剪后的图片获取并保存， CropBox.js 会提供一个 crop.getDataUrl 数据流，格式为 "data:image/png;base64,iV..." 如果直接保存到数据库，会影响页面响应的速度，用户的头像实际只需要一个文件路径即可 不需要这样格式的问题，需要对这个数据流进行转换，还原回裁剪后的图片 转换方法：
data_url = 'data:image/png;base64,......'
png = Base64.decode64(data_url['data:image/png;base64,'.length .. -1])
File.open("test.png", 'wb') { |f| f.write(png) }
```
CropBox.js demo 飞机票 http://dwtedx.com/itshare_358.html
我爬过 IE 的坑，IE9 以下 不支持 HTML5 FileReader。 好吧，分而治之，IE9 下使用 DXImageTransform.Microsoft.AlphaImageLoader 来读取本地图片。 好的，新问题出现了，这种滤镜展示的图片 不能用来 裁剪。 然后又想到用 Flash 来做，好的，iOS 平台不支持 Flash, 难道又要分而治之？ 就一个简单的头像上传而已啊，前前后后花了我两天时间，气死了。 最后老老实实的做：先自动上传用户图片，然后裁剪服务器的图片，没有任何兼容问题，唯一不好的可能是上传文件过大时体验不好。
#1 楼 @winnie 最近开发自己的一个视频小站，图片使用七牛存储，用户头像截取的实现中， 先将图片流以字符串传到后端，后端讲字符串在转义为图片，将图片信息传给七牛服务器
data_url = params[:avatar]
png = Base64.decode64(data_url['data:image/png;base64,'.length .. -1])
dir_path = "#{Rails.root}/public/"
file_rename = "#{Time.now.to_s}.png"
File.open(dir_path+file_rename, 'wb') { |f| f.write(png) }
