Base64(canvas) 到 blob，blob 到 php答案

【问题标题】：Base64(canvas) to blob, blob to phpBase64(canvas) 到 blob，blob 到 php
【发布时间】：2018-06-11 10:34:33
【问题描述】：

我在使用 AJAX POST 请求将 base64 图像从画布发送到 PHP 时遇到问题。在我对谷歌先生进行了一些研究之后，我发现人们建议在 php.ini 等 memory_limit 上增加 PHP 服务器的替代方案。可能是因为 base64 长度太长而 post 方法不起作用。

然后，我使用第二种选择是使用 BLOB。我按照其他stackoverflow作者的指示添加函数dataURItoBlob（）。看起来正在工作。但是，问题是，我想如何在 PHP 中从 blob 文件中提取到 base64 ？我尝试了几种方法，但没有显示任何结果。

phpinfo.php

post_max_size = 999M;
memory_limit = 128M;
upload_max_filesize = 999M;

HTML

<button class="btn btn-secondary btn-done" title="Save Image" type="button" id="saveimg" data="<?php echo $product_id; ?>"><i class="fa fa-shopping-cart"></i></button>

JAVASCRIPT

$(document).delegate('#saveimg','click', function(event) {
   var outputType = '<?php echo $type ?>';
   var product = $(this).attr('data');

   myCanvas.deactivateAll().renderAll();

   var dataURL = myCanvas.toDataURL({
        format: 'jpg',
        quality:1,
        multiplier: canvas_multiply
   });

   var blob = dataURItoBlob(dataURL);
   var fi = new FormData();
   fi.append('imgBase64_0', blob, 'test.jpg');

   $.ajax({
      url: 'index.php?load=product/storeimg&p_id=' + product,
      type: 'post',
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      data: fi,
      success: function (json){
          // SOME CODE HERE //
      },
   });
});

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  var blob = new Blob([ab], {type: mimeString});
  return blob;
}

来自 print_r ($_FILES) 的 BLOB 数组

[files] => Array(
   [imgBase64_0] => Array
       (
           [name] => test.jpg
           [type] => image/jpeg
           [tmp_name] => /tmp/phpDpBZ0F
           [error] => 0
           [size] => 667026
        )
 )

PHP

if (isset($_FILES)) {
    foreach ($_FILES as $name => $value) {
         ${$name} = array(
              'name' => $value['name'],
              'type' => $value['type'],
              'tmp_name' => $value['tmp_name'],
              'error' => $value['error'],
              'size' => $value['size']
         );
    }

    if (is_dir($_FILES[$name]['tmp_name']) && is_writable($_FILES[$name]['tmp_name'])) {
        $log = 'Writable and exist.'."\n";
    } else {
        $log = 'Not writable, or does not exist.'."\n";
    }

    if (move_uploaded_file($_FILES[$name]['tmp_name'], DIR_IMAGE)) {
        $txt .= "Successfully move.\n";
    } else {
        $txt .= "Fail to move.\n";
    }
}

感谢您的帮助。

【问题讨论】：

那么问题是在PHP内部存储文件吗？ DIR_IMAGE 是什么？
画布最初是如何生成的，使用什么数据？
@RamRaider 对不起，我的错误没有提到。 DIR_IMAGE 是图片目录
@RamRaider Canvas 是从使用 myCanvas 变量的图像编辑器生成的。一旦用户单击 id saveimg，myCanvas 就已经捕获数据图像。希望我回答你的问题。对不起，如果我没有
我希望我下面的回答能帮助回答你上面的问题

标签： javascript php ajax canvas blob

【解决方案1】：

通过 ajax 保存 canvas 生成的图像非常简单，希望我能正确理解您的问题。在不知道如何在您的代码中生成画布或图像大小的情况下，很难说简单地增加 PHP 中的文件上传限制是否可以解决问题，但是如果您查看下面的代码（保存并运行作为示例并进行少量编辑保存位置）您应该会发现您的解决方案非常简单 - 希望！

对于demo，使用的图片如下图所示，并保存在本地，避免使用url本身导致警告

无法在“HTMLCanvasElement”上执行“toDataURL”：受污染的画布可能无法导出。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['image'],$_POST['filename'] ) ){

        $image=$_POST['image'];
        $filename=$_POST['filename'];

        /* edit to suit own environment */
        $savepath='c:/temp/fileuploads/1/';

        $target=$savepath . $filename;
        $result=file_put_contents( $target, base64_decode( $image ) );


        header('HTTP/1.1 200 OK',true,200);
        header('Content-Type: text/plain');
        exit( $result ? sprintf( 'File uploaded & saved as %s', $target ) : sprintf( 'Unable to save %s',$filename ) );
    }
?>
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>HTML Canvas Image to PHP</title>
        <script>
        (function(options){
            document.addEventListener('DOMContentLoaded',function(e){
                /*
                    generate a canvas with some sort of image - 
                    in this example a promo picture from the classic 
                    B-Horror film "The Blob"
                */
                var canvas=document.getElementById('canvas');
                var ctx=canvas.getContext('2d');
                var img=new Image();
                    img.src='/images/tmp/TheBlob.jpg';
                    img.onload=function(){
                        canvas.width=img.width;
                        canvas.height=img.height;
                        ctx.drawImage( img, 0, 0, canvas.width, canvas.height );
                    }


                /* 
                    Button click event handler
                    create FormData Object and read the canvas data
                    then send via ajax to a PHP script ( in this case the same page )
                    to process the uploaded image.
                */
                function bindEvents(event){

                    var fd=new FormData();
                        fd.append('action','save');
                        fd.append('image', canvas.toDataURL('image/jpg').replace( /^data:image\/(png|jpg);base64,/, '' ) );
                        fd.append('filename',img.src.split('/').pop() )

                    var ajax=function(url,data,callback){
                        var xhr=new XMLHttpRequest();
                        xhr.onreadystatechange=function(){
                            if( this.readyState==4 && this.status==200 )callback.call( this, this.response );
                        };
                        xhr.open( 'POST', url, true );
                        xhr.send( data );
                    };

                    var callback=function(r){
                        alert(r)
                    }

                    ajax.call( this, location.href, fd, callback );
                }


                document.getElementById('bttn').addEventListener( 'click', bindEvents, options );

            }, options );
        })({ passive:true, capture:false, once:false });
        </script>
    </head>
    <body>
        <canvas id='canvas'></canvas>
        <input type='button' id='bttn' value='Upload & Save Image' />
    </body>
</html>

【讨论】：

var ajax=function(url,data,callback).. 数据来自哪里？是base64图片吗？
data 参数是fd ~ FormData
"是 base64 图像吗？" - 是的，看看developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/… 并注意，在 php 中，base64_decode( $image )