分享 用户自定义图片上传丶裁剪 Cropbox.js 爬坑小记 data:image/png;base64 数据流转换

lonely21475 · 2015年05月08日 · 最后由 sichuyoudang 回复于 2016年10月19日 · 11859 次阅读

最近在做一个小项目,添加一个用户自定义头像,经过几次尝试, 后来发现 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) }

您好 我也正在做这块 就是不知道裁剪后怎么上传图片 方便留一下你的 QQ 吗 请教一下你

同样,受这个问题的困扰,希望楼主能联系

同问,图片裁剪后不知如何上传图片,希望楼主能够解答

需要 登录 后方可回复, 如果你还没有账号请 注册新账号