मेरे पास एक HTML कैनवास रैपर में ब्राउज़र पर लोड की गई एक छवि है।

<canvas id="image1" class="" width="213" height="213" style="width: 213px; height: 213px;"></canvas>

जब मैं इसे AJAX के माध्यम से सर्वर पर सहेजने का प्रयास करता हूं, तो यह ठीक काम करता है लेकिन जब फ़ाइल एक जेपीईजी होती है, तो यह AJAX से रीडायरेक्ट नहीं होती है।

यहाँ मेरा अजाक्स है

var imageName = $('#image_name').val();
var canvas = document.getElementById('image1');

var dataURL = canvas.toDataURL();       
$.ajax({
    type: "POST",
    url: "script.php",
    data: { 
            imgBase64: dataURL                          
        }
    }).done(function(data) {
        alert(data);
       window.location.replace("http://****.co.uk/dither/step3.php?id="+data)
    });

यहाँ मेरा php . है

<?php
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
echo $file;
?>

अगर छवि एक पीएनजी फ़ाइल है, तो रीडायरेक्ट काम करता है, लेकिन अगर यह एक जेपीईजी है तो यह उसी पृष्ठ पर वापस आ जाता है।

अगर मैं AJAX कॉल से पहले 'dataURL' को अलर्ट करता हूं तो यह 'डेटा: छवि/पीएनजी; बेस 64' के रूप में पहले भाग के साथ एक सरणी देता है, इससे कोई फर्क नहीं पड़ता कि किस प्रकार का फ़ाइल एक्सटेंशन है।

मुझे यह पता लगाने के लिए बेस 64 सामान के बारे में पर्याप्त जानकारी नहीं है।

0
Barry Watts 11 सितंबर 2017, 21:10

2 जवाब

सबसे बढ़िया उत्तर

चूंकि जावास्क्रिप्ट एसिंक्रोनस है, इसलिए फ़ाइल अपलोड पूरा होने से पहले अजाक्स फायरिंग कर रहा था, इसलिए यह विफल हो रहा था।

0
Barry Watts 11 सितंबर 2017, 21:51

स्ट्रिंग से छवि बनाने के लिए कोड के इस नमूने का उपयोग करें, इससे समस्या ठीक हो जाएगी

imagecreatefromstring($n) then imagejpeg($r,$y) or imagepng($r,$y);

तथा

imagedestroy($r);
-1
Dharman 27 नवम्बर 2019, 01:04