请教个 Canvas 前端裁剪图像上传到后端的问题？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2355 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用的一个开源的前端图像裁切库，这个： https://fengyuanchen.github.io/jquery-cropper/

按照说明文档我用 cropper.getCroppedCanvas()获取裁切后的图像 blob，然后

cropper.getCroppedCanvas().toBlob(function(blob){
	回调获取 blob
})

问题也就是在这里，这个 blob 类型我该怎么在后端处理并且保存成图片呢？各位大佬给出点意见、

我使用的是 php 语言，二开 wordpress。

8 条回复 • 2018-06-16 05:47:44 +08:00

wolyshaw

2018-06-15 16:20:16 +08:00

用 formData: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

iamsee

2018-06-15 18:23:41 +08:00

先 base64 转成文件流

iamsee

2018-06-15 18:24:27 +08:00

base64ToBlob

but0n

2018-06-15 20:03:56 +08:00 via iPhone

new File([blob], name, {type: "image/png"})

s609926202

2018-06-15 20:20:31 +08:00 via iPhone

@but0n 啥意思，没懂

imlink

2018-06-15 21:08:17 +08:00 via Android

@s609926202 blob 是二进制的，php 获取 request 的 body 应该可以直接 put_in_content

rain1024

2018-06-15 23:17:06 +08:00 via Android

这个项目和你的需求一模一样，前端代码里 base64 都写好了你用 PHP 在后台直接接收 post 请求就可以 http://git.oschina.net/liyingming/faceRecognition

des

2018-06-16 05:47:44 +08:00

@s609926202

c.toBlob(function(blob){
　 form = new FormData()
　 form.set('file', new File([blob], 'xxx.png', {type: "image/png"}))
　 xhr = new XMLHttpRequest()
　 xhr.open('POST', '/post')
　 xhr.send(form)
})