Dekodowanie obszaru roboczego todataURL

Question

Mam problemy z używaniem danych utworzonych za pomocą metody todataurl() canvas. Obecnie mój kod wysyła uzyskane dane do mojego serwera php, który wykorzystuje metodę file_put_contents() do utworzenia pliku do przechowywania tych danych. Teraz, jeśli wycinam wynikowy bełkot z pliku do src tagu graficznego, działa on poprawnie i wyświetla się poprawnie, więc zakładam, że do tej pory wszystko jest brzoskwiniowe.

Ale wciąż napotykam na problemy, gdy próbuję użyć kodu w JS. Próbowałem już metody base64_decode php, ale ciągle dostaję się uciążliwe pliki. Znalazłem ten kod:

<?php 
    $encodedData = str_replace(' ','+',$encodedData); 
    $decocedData = base64_decode($encodedData); 

i wciąż mam pliki currupted. Idealnie chciałbym utworzyć z nim plik .png, ale zdecydowałbym się na ponowne przetwarzanie pliku danych w JS. Każda pomoc bardzo doceniona.

Answer 1

Wygląda na to, że musisz pozbyć się nagłówka dodanego do danych obrazu za pomocą funkcji toDataURL(). Po stronie klienta można zdejmować nagłówek tak:

.. 
var data=canvas.toDataURL(); 
var output=data.replace(/^data:image\/(png|jpg);base64,/, ""); 
// now send "output" to the server 
.. 

Na użycia po stronie serwera to:

<?php 
    $decocedData = base64_decode($encodedData); 
?> 

Answer 2

w Java Script wysłać wynik z canvas.toDataURL() na tych przeglądarek niż obsługuje tę metodę z domyślnym typem "image/png".

var imageInfo = canvas.toDataURL(); 
// now send "imageInfo" to the server 

bezpośredni sposób do utworzenia pliku png:

<?php 
$imageInfo = imageInfoFromBrowser(); // Your method to get the data 
$image = fopen($imageInfo, 'r'); 
file_put_contents("fileName.png", $image); 
fclose($image); 
?> 

mam ten pracujący w PHP 5.3/Windows, dla pozostałych wersji, proszę sprawdzić.

Próbka danych obrazu do testowania w PHP.

$imageInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAAC0CAYAAADPcVOXAAAHx0lEQVR4Xu2dPY5dRRBGsUSI+Umdk2KQQwfMsAHERtgDrABYgCMvADJHYIeOLDZBhgjJgG6JKz2PZ+bVu7f6666qM1LLI03frqpTfd79mfF7D97jCwIQeIfAA5hAAALvEkAMdgUEbiGAGGwLCCAGewACNgKcMWycmFWMAGIUazjl2gggho0Ts4oRQIxiDadcGwHEsHFiVjECiFGs4ZRrI4AYNk7MKkYAMYo1nHJtBBDDxolZxQggRrGGU66NAGLYODGrGAHEKNZwyrURQAwbJ2YVI4AYxRpOuTYCiGHjxKxiBBCjWMMp10YAMWycmFWMAGIUazjl2gggho0Ts4oRQIxiDadcGwHEsHFiVjECiFGs4ZRrI4AYNk7MKkYAMYo1nHJtBBDDxolZxQggRrGGU66NAGLYODGrGAHEKNZwyrURQAwbJ2bdTeBZ+9HjNp5kgoQYmbo5p5YXLezDNp7OCT8mKmKM4Vpp1V9bsX0fXWcqGjEydXNOLYgxhztRFyeAGIs3yJJeyhtFS+ED5yDGQLiqpVPeKKrg3REHMSY3wCN8yiZ6gDmwRkqm1W6+UzbxwKb2ODQlU8Tw2Bq110CMBP1P2cTJfUnJlDPG5F2VIDxi0MQEBPxLQAx/pvIVUzZRTvHtgCmZcik1eVclCI8YNDEBAf8SEMOfqXzFlE2UU+RSajJy//CIAVMTAe4xTJiYdA+BlC82iMGeP0oAMY4SXOD4lE2czDUlU84Yk3dVgvCIQRMTEPAvATH8mcpXTNlEOUUe105G7h8eMWBqIsA9hgkTk3hcm3sPcMbw729Kppwx/DdKtRURI0HHUzZxcl9SMuWMMXlXJQiPGDQxAQH/EhDDn6l8xZRNlFPk9xiTkfuHRwyYmghwj2HCxCR+j5F7D3DG8O9vSqacMfw3SrUVESNBx1M2cXJfUjLljDF5VxF+TQKIsWZfyGoygWpiTMZN+CgEECNKp8hTSgAxpLgJFoUAYkTpFHlKCSCGFDfBohBAjCidIk8pAcSQ4iZYFAKIEaVT5CklgBhS3ASLQgAxonSKPKUEEEOKm2BRCCBGlE6Rp5QAYkhxEywKAcSI0inylBJADClugkUhgBhROkWeUgKIIcVNsCgEECNKp8hTSgAxpLgJFoUAYkTpFHlKCSCGFDfBohBAjCidIk8pAcSQ4iZYFAKIEaVT5CklgBhS3ASLQgAxonSKPKUEEEOKm2BRCOwV43kr8FEbX0UplDwhcAmBvWK8bkE+beP3Nq4vCchcCEQgsFeMrbZ/2zdH14jAiRzXJfBtS+0n7/Q8NjVyeHeF9awE/vr/hflj6wHWeR5i9FjIYSXOPC8CXYqXbXzjteDpOl5iIMeI7rDmXQT65dP3bbifKbaAnmIgBxtZRWD4FYq3GMih2hp14wyXoqMdIQZy1N20Iyvvnw7bfzUwas++lfvIIBKzR3aCtZch0KX4oo1PVBmNFIMzh6qL+ePIP0t8tBjygvLvkZIVyvcRYpTcZ+GKTifG8OfN4VpMwnsIpBOjQ+i/ofyujR/2EOEYCDQCKcWQF8VWSkdAvodG32NsHeLRbbq9Ki0orRg8upXuo3TB5C+sqjNG75Tc+nTbo2ZBcik6ZqUYPKGqubGPVD1FCrUYPKE6skXqHTtNihlicDlVb4PvqXiqFIixp2UcM4JAf8HcvmR/QXtfIcp7jO0GvP+V5Js2eOudEVss3prbX872d5zpX1crlKAWo9f8so3P2uCtd1bYAfNzWPLyeoYY25mjx+Y9qeZvzFkZbJdPn6/4IokYs7ZF7bj95vrVCYIlLp9OWzJTjO1eo+fD/UYdUaY/cbKgniXGdq/R/+V+w9KpuHOWe+JkQTlTjC2/JW++LPCYc5bAkk+czmbdJqwixull1c28ucyydHLNOWFf9FYQ4/Sy6rb2frmIwGtuvXWyOr1k2rJa8omTBdkqYpzLNcQN27kikv68/3Hoj22cPmU6LfUqYt1RxOhsuxy/RYScOOd+Cdz30LD3kJ3FLpIY5y65ZjGsHPfnVnzK/8sfTYzKm5DahQQQQwibUHEIIEacXpGpkABiCGETKg4BxIjTKzIVEkAMIWxCxSGAGHF6RaZCAoghhE2oOAQQI06vyFRIADGEsAkVhwBixOkVmQoJIIYQNqHiEECMOL0iUyEBxBDCJlQcAogRp1dkKiSAGELYhIpDADHi9IpMhQQQQwibUHEIIEacXpGpkABiCGETKg4BxIjTKzIVEkAMIWxCxSGAGHF6RaZCAoghhE2oOAQQY51ePWupPG7jyTop1c0EMdbp/YuWysM2nq6TUt1MEGOd3od9y/x1EPplghh+LI+uhBhHCToejxiOMA8uhRgHAXoejhieNI+thRjH+LkejRiuOA8thhiH8PkejBi+PI+s9kc7+IM2Pmzj6zZ+ObIYxx4jgBjH+Hke/Wdb7P02PvJclLX2EUCMfdxGHPVPW/RVG9cjFmfNywggxmW8Rs3ePl+w9wMxRlG+YF3EuADW4Knbh8W/uSUOn3U+GP7N5RFDDPwk3PP2/aMb4funoN72dVMWRBncN8QYDPie5V+3n/29M/zVzuM4zEgAMYygmFaLAGLU6jfVGgkghhEU02oRQIxa/aZaIwHEMIJiWi0CiFGr31RrJIAYRlBMq0UAMWr1m2qNBP4DoE6utZfjM60AAAAASUVORK5CYII=" 

Answer 3

Inną ważną nutą jest to, że musisz zamienić spacje na plusy. Jeśli tego nie robią, dekodowany danych jest uszkodzony:

$encodedData = str_replace(' ','+',$encodedData); 
$decocedData = base64_decode($encodedData); 

można przeczytać więcej na http://www.php.net/manual/en/function.base64-decode.php

Answer 4

Inne rozwiązania nie działa dla mnie.

to działa:

//image sample 
$baseFromJavascript = "data:image/png;base64,BBBFBfj42Pj4"; 

// remove the part that we don't need from the provided image and decode it 
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));