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

This topic created in 2920 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

8 replies • 2018-06-16 05:47:44 +08:00

wolyshaw

Jun 15, 2018

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

iamsee

Jun 15, 2018

先 base64 转成文件流

iamsee

Jun 15, 2018

base64ToBlob

but0n

Jun 15, 2018 via iPhone

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

rateltalk

Jun 15, 2018 via iPhone

@but0n 啥意思，没懂

imlink

Jun 15, 2018 via Android

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

rain1024

Jun 15, 2018 via Android

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

des

Jun 16, 2018

@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)
})