V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
s609926202
V2EX  ›  问与答

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

  •  
  •   s609926202 · 2018-06-15 15:40:44 +08:00 · 2151 次点击
    这是一个创建于 2344 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我用的一个开源的前端图像裁切库,这个: 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
        1
    wolyshaw  
       2018-06-15 16:20:16 +08:00
    iamsee
        2
    iamsee  
       2018-06-15 18:23:41 +08:00
    先 base64 转成文件流
    iamsee
        3
    iamsee  
       2018-06-15 18:24:27 +08:00
    base64ToBlob
    but0n
        4
    but0n  
       2018-06-15 20:03:56 +08:00 via iPhone   ❤️ 1
    new File([blob], name, {type: "image/png"})
    s609926202
        5
    s609926202  
    OP
       2018-06-15 20:20:31 +08:00 via iPhone
    @but0n 啥意思,没懂
    imlink
        6
    imlink  
       2018-06-15 21:08:17 +08:00 via Android
    @s609926202 blob 是二进制的,php 获取 request 的 body 应该可以直接 put_in_content
    rain1024
        7
    rain1024  
       2018-06-15 23:17:06 +08:00 via Android
    这个项目和你的需求一模一样,前端代码里 base64 都写好了 你用 PHP 在后台直接接收 post 请求就可以 http://git.oschina.net/liyingming/faceRecognition
    des
        8
    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)
    })
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1312 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:54 · PVG 01:54 · LAX 09:54 · JFK 12:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.