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

Posted 2023-02-22

【中文标题】画布图像的图像效果不使用 php 上传保存，但适用于下载相同的画布文件

【英文标题】：Image effects to canvas image not save with php upload but applies to download of same canvas file

【发布时间】：2015-07-15 23:26:53

【问题描述】：

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

我提供视频描述中涉及的所有代码的链接。

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

JS代码：

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();
);

【问题讨论】：

是 base64 的一部分 var url = canvas.toDataURL("image/png;base64;"); ;有效的图像类型参数？见developer.mozilla.org/en-US/docs/Web/API/htmlCanvasElement/…。没有“base64”试过吗？ png 是否具有类似于 gif 的动画能力？

@guest271314 它本身无效（仅第一个 mime 类型），但在这种情况下，最终结果是相同的，因为无法识别的图像 mime 将默认为 png。

@KenFyrstenberg 是的。不确定是否正确解释问题。试图过滤掉可能改变预期结果的可能项目。以前不确定png 的这种效果。也许知道png 类型的图像是否可以“动画”类似于gif 类型的图像？

@guest271314 有apng 但canvas 无法直接保存apng 或动画gif。

@KenFyrstenberg 让我进一步解释一下。当您单击过滤器时，它会运行将单击的过滤器应用于图像的过滤器代码。然后它运行 showDownload，它会为您提供下载应用了过滤器的图像的链接。发送到 showDownload 的 clone[0] 数据是过滤后的图像数据。因此，根据逻辑，如果您通过单击基于作为画布传递的克隆中的数据的按钮来下载该图像，那么将图像作为 base64 发送到 php 也应该应用过滤器，因为两者中的图像相同案例。

【参考方案1】：

这就是答案。

    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;

    

   

script.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();

模态hhtml

<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';

?>

【讨论】：

回答能解决问题吗？原js、php调整了哪些具体部分，达到预期效果？

是的，这是完全可以运行的代码。真正的答案是，而不是使用下载，如调用 .off 按下按钮，然后将图像提供给 php 文件。我不完全确定为什么，我在任何脚本中都找不到它，但这解决了问题