Я показываю скриншот с html2canvas 0.4.0 и хочу сохранить его как изображение на моем веб-сервере.
Для этого я написал следующую функцию:
function screenShot(id) { html2canvas(id, { proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { $('body').append(canvas); // This works perfect... var img = canvas.toDataURL("image/png"); var output = img.replace(/^data:image\/(png|jpg);base64,/, ""); var Parameters = "image=" + output + "&filedir=" + cur_path; $.ajax({ type: "POST", url: "inc/saveJPG.php", data: Parameters, success : function(data) { console.log(data); } }).done(function() { }); } }); } <?php $image = $_POST['image']; $filedir = $_POST['filedir']; $name = time(); $decoded = base64_decode($image); file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX); echo $name; ?>
После визуализации холста я могу прекрасно добавить его в тело HTML, но сохранение его на моем сервере приводит к поврежденному (?) Файлу.
Я могу читать размеры в IrvanView, но изображение прозрачно / пусто? Файл имеет размер около 2,076 КБ. Так что это действительно не пусто.
Я также пробовал это с JPEG, и это приводит к повреждению файла, и IrfanView говорит что-то вроде «фиктивной длины маркера».
Снимок экрана имеет размеры 650×9633. Много ли данных для POST-метода?
Если кто-то столкнется с одной и той же проблемой, вот как я ее решил:
Проблема зависела от того факта, что + в URL-адресах интерпретируется как кодированное пространство (например, %20 ) для большинства серверов. Поэтому мне сначала нужно было сначала закодировать данные, а затем отправить их через POST для моей назначенной функции PHP.
Вот мой код:
function screenShot(id) { html2canvas(id, { proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { var img = canvas.toDataURL("image/png"); var output = encodeURIComponent(img); var Parameters = "image=" + output + "&filedir=" + cur_path; $.ajax({ type: "POST", url: "inc/savePNG.php", data: Parameters, success : function(data) { console.log("screenshot done"); } }).done(function() { //$('body').html(data); }); } }); }
<?php $image = $_POST['image']; $filedir = $_POST['filedir']; $name = time(); $image = str_replace('data:image/png;base64,', '', $image); $decoded = base64_decode($image); file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX); echo $image; ?>
Ура!