画布图像的图像效果不通过 php 上传保存，但适用于下载同一画布文件

这是显示该问题的 YouTube 视频：https://www.youtube.com/watch?v=znzLQSYlsKM https://www.youtube.com/watch?v=znzLQSYlsKM.

我给出了视频描述中涉及的所有代码的链接。

我正在使用 js 库对图像应用影响。然后，我触发一个事件，为用户提供下载链接，并使用图像的 base64 动态创建一个表单元素。然后我将其传递给 php 文件并将其保存到文件夹中。您可以下载的图像应用了效果，但保存的图像则没有应用效果。问题是它们都是同一个文件。

JS Code:

function showDownload(canvas){
    //this is how i send it to my main page and use ajax script to upload to the php file.

    var url = canvas.toDataURL("image/png;base64;");
    $('<input/>').attr({
         type: 'hidden', id: 'fileroast', name: 'fileroast', value: url
    }).appendTo('#output');

    // this is how i link the download file
    downloadImage.off('click').click(function(){
        var url = canvas.toDataURL("image/png;base64;");
        downloadImage.attr('href', url);
    }).fadeIn();

}

过滤器代码：

filters.click(function(e){
    e.preventDefault();
    var f = $(this);
    if(f.is('.active')){
        // Apply filters only once
        return false;
    }
    filters.removeClass('active');
    f.addClass('active');
    // Clone the canvas
    var clone = originalCanvas.clone();
    // Clone the image stored in the canvas as well
    clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
    // Add the clone to the page and trigger
    // the Caman library on it
    photo.find('canvas').remove().end().append(clone);
    var effect = $.trim(f[0].id);
    Caman(clone[0], function () {
        // If such an effect exists, use it:
        if( effect in this){
            this[effect]();
            this.render();
            showDownload(clone[0]);
        }
        else{
            hideDownload();
        }
    });
});
// Use the mousewheel plugin to scroll
// scroll the div more intuitively
filterContainer.find('ul').on('mousewheel',function(e, delta){
    this.scrollLeft -= (delta * 50);
    e.preventDefault();
});

这就是答案。

    function submitForm() {

      var fd = '';



      if(get_user != logged_username){



        }else{

        var d = new Date();

        var time = d.getTime();

        var fd = new FormData(document.getElementById("fileinfo"));



        $.ajax({

          url: "upload_photo.php",

          type: "POST",

          data: fd,

          enctype: 'multipart/form-data',

          processData: false,  // tell jQuery not to process the data

          contentType: false   // tell jQuery not to set contentType



        }).done(function( data ) {



            if (data.indexOf("Invalid") >= 0) { 

                alert('invalid file type, must be jpeg, jpg, or png.');

            }else{

              console.log(data);

              var post = {"pic_location":data, "time":time, "username": logged_username};

              var json_data = post;

              Cynergi.insert('http://thewaywardjourney.com:3000/profile_pictures', json_data);

              $( "#fileroast" ).remove();

            //this is where we save the photos location to the db for retrieveal.

            }

        });

        return false;

    }

   }

脚本.js

var apply = $('#apply');



function showDownload(canvas){

    apply.off('click').click(function(){

        var url = canvas.toDataURL("image/png;base64;");

        $('<input/>').attr({type: 'hidden', id: 'fileroast', name: 'fileroast', value: url}).appendTo('#output');

        console.log(url);   

        console.log('apply');

    }).fadeIn();

}



function hideDownload(){

    downloadImage.fadeOut();

}

模态 HTML

<div id="uploadPic" class="modal fade" >

  <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header" style="background:#f3f3f3;">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" style="color:black;">Choose picture to upload as profile pic.</h4>



            </div>

            <div class="modal-body">



              <div id="photo">





              </div>



              <div id="filterContainer" style='width:400px;'>

                <ul id="filters" style='width:400px;'>

                  <li> <a href="#" id="normal">Normal</a> </li>

                  <li> <a href="#" id="vintage">Vintage</a> </li>

                  <li> <a href="#" id="lomo">Lomo</a> </li>

                  <li> <a href="#" id="clarity">Clarity</a> </li>

                  <li> <a href="#" id="sinCity">Sin City</a> </li>

                  <li> <a href="#" id="sunrise">Sunrise</a> </li> 

                  <li> <a href="#" id="crossProcess">Cross Process</a> </li>

                  <li> <a href="#" id="orangePeel">Orange Peel</a> </li>

                  <li> <a href="#" id="love">Love</a> </li>

                  <li> <a href="#" id="grungy">Grungy</a> </li>

                  <li> <a href="#" id="jarques">Jarques</a> </li>

                  <li> <a href="#" id="pinhole">Pinhole</a> </li>

                  <li> <a href="#" id="oldBoot">Old Boot</a> </li>

                  <li> <a href="#" id="glowingSun">Glowing Sun</a> </li>

                  <li> <a href="#" id="hazyDays">Hazy Days</a> </li>

                  <li> <a href="#" id="herMajesty">Her Majesty</a> </li>

                  <li> <a href="#" id="nostalgia">Nostalgia</a> </li>

                  <li> <a href="#" id="hemingway">Hemingway</a> </li>

                  <li> <a href="#" id="concentrate">Concentrate</a> </li>

                </ul>

              </div>

              <div id='output_file'></div>

              <div id="output"></div>



            </div>

            <div class="modal-footer">

              <button id='apply' class="btn btn-info">Upload</button>

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>



            </div>

        </div>

    </div>

  </form>

</div>    

php

<?php

    // requires php5

    define('UPLOAD_DIR', 'images/profile_images/');

    $img = $_POST['fileroast'];

    $img = str_replace('data:image/png;base64,', '', $img);

    $img = str_replace(' ', '+', $img);

    $data = base64_decode($img);

    $files = UPLOAD_DIR . uniqid() . '.png';

    $success = file_put_contents($files, $data);

    print $files;

    //print $file ? 'default':'images/profile_images/default.png';

?>