Как мне удается сгенерировать PNG из холста, а затем загрузить изображение? - PullRequest
Новая
       1

Как мне удается сгенерировать PNG из холста, а затем загрузить изображение?

0 голосов
/ 13 марта 2020

Мне нужно преобразовать диаграмму в изображение и загрузить на сервер, но я просто не знаю, что я делаю неправильно ... Похоже, что в ajax есть конфликт при разборе данных изображения. Также пытался использовать base64 кодирование / декодирование, но, похоже, ничего не работает 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div class="chartjs-wrapper" style="display: block; width: 700px; height: 450px;">
    <canvas id="myChart"></canvas>
</div>


<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['A', 'B'],
        datasets: [{
            label: '#',
            data: [12, 19],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    }
});
</script>



<script>

$(window).load(function() {

    // CANVAS TAG TO IMAGE

    var canvas = document.getElementById('myChart');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    context.drawImage(imageObj, 0, 0, 700, 450);
    var pngUrl = canvas.toDataURL();
    var myFormData = new FormData();
    myFormData.append('image', pngUrl.files[0]);

    $.ajax({
        type: "POST",
        dataType : 'json',
        processData: false,
        contentType: false,
        url: "upload.php",
        data: myFormData
    }).done(function(response) {
        //alert(response);
    }).fail(function(jqXHR, textStatus ) {
        alert("Request failed: " + textStatus);
    })

});

</script>

</body>
</html>

Может быть, есть проблема с FormData?

Есть ли лучший подход для этого?

1 Ответ

0 голосов
/ 13 марта 2020

Я добавил новый код PHP для обработки загруженного изображения. Также изменился способ отправки изображения из JS. 

<?php 
if(!empty($_POST['image']) || !empty($_FILES['image'])) { 
    $fname = time().".png"; 
    move_uploaded_file($_FILES['image']['tmp_name'], $fname);

} else {
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div class="chartjs-wrapper" style="display: block; width: 700px; height: 450px;">
    <canvas id="myChart"></canvas>
</div>
<img src="" />


<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['A', 'B'],
        datasets: [{
            label: '#',
            data: [12, 19],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            enabled: false
        },
        animation: {
            onComplete: function(e) {
                takeSpanshot();
            }
        }
    }
});
</script>



<script>


function takeSpanshot() {
    var canvas = document.getElementById('myChart');

    // CANVAS TAG TO IMAGE
    var base64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
    fetch(base64)
    .then(res => {
      return res.blob();
    })
    .then(blob => {
      var formData = new FormData();
        formData.append('image', blob);

        $.ajax({
            url: "test.php", 
            type: "POST", 
            cache: false,
            contentType: false,
            processData: false,
            data: formData
        }).done(function(e){
                    alert('done!');
                });
    });
}

</script>

</body>
</html>

<?php 
}
?>

, в основном вы передавали base64 напрямую, и вам необходимо преобразовать его в blob

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...