jQuery limitation de taille à l'aide après canvas.todataurl()

Question

Je suis en train de télécharger une image canvas.todataurl() (getUserMedia) au serveur en utilisant jQuery et PHP après pour gérer les données, mais je vais avoir quelques problèmes. Toutes les images que je télécharge finissent par être corrompues, la moitié de l'image est manquante. J'ai aussi une base de données MySQL où je stocke des données liées à l'image (titre, texte, date et autres). Il semble que plus j'ai les données liées, plus l'image est corrompue.

Par conséquent, je me demande est-ce une limitation du navigateur ou cela at-il quelque chose à voir avec le post jQuery. J'ai également vérifié le max_post_size de PHP et c'est 16mb, ainsi cela ne devrait pas être un problème. Je n'ai pas accès aux paramètres du serveur. Je suis assez perplexe avec cela, que puis-je faire? Est-il possible de diviser le canvas.todataurl() en plusieurs parties puis de poster?

JavaScript

window.addEventListener('DOMContentLoaded', function() { 

var video = document.getElementById('videoStream'); 
var canvas = document.getElementById('canvasImage'); 
var status = document.getElementById('status'); 
var button = document.getElementById('button'); 
//var others = document.getElementById('others'); 
var imageHolder; 
document.getElementById('form').style.display = 'none'; 
var image = null; // kuvan datauri joka lähtee php:lle 

window.URL || (window.URL = window.webkitURL || window.mozURL || window.msURL); 
navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia); 

// toString : function() {return "video,audio";} canarya varten 
if (navigator.getUserMedia) { 
    navigator.getUserMedia({video: true, audio: false, toString : function() {return "video,audio";}}, onSuccess, onError); 
} else { 
    status.innerText = "getUserMedia is not supported in your browser, sorry :("; 
} 

function onSuccess(stream) { 

    var source; 
    if (window.webkitURL) { 
     source = window.webkitURL.createObjectURL(stream); 
    } else { 
     source = stream; // Opera ja Firefox 
    } 

    video.width = 500; 
    video.height = 375; 
    video.autoplay = true; 
    video.src = source; 

} 

function onError() { 

    status.innerText = "Please allow access to your webcam."; 

} 

button.addEventListener('mousedown', function() { 

    // Poistetaan aikaisempi kuva jos sellaista on 
    //document.body.removeChild(imageHolder); 

    // luodaan kuva uudestaan 
    imageHolder = document.createElement('figure'); 
    imageHolder.id = 'imageHolder'; 
    document.body.appendChild(imageHolder); 
    img = document.createElement('img'); 
    imageHolder.appendChild(img); 

    // kuva on yhtäsuuri kuin video 
    canvas.width = video.width; 
    canvas.height = video.height; 
    img.width = 350; 
    img.height = 225; 

    // piirretään canvasille kuva videosta 
    var context = canvas.getContext('2d'); 
    context.drawImage(video, 0, 0, canvas.width, canvas.height); 

}, false); 

button.addEventListener('mouseup', function() {  
    // Canvasilta kuvaksi levylle tallentamista varten 
    canvas.style.display = 'none'; 
    video.style.display = 'none'; 
    button.style.display = 'none'; 
    others.style.display = 'none'; 
    document.getElementById('form').style.display = 'block'; 
    image = canvas.toDataURL('image/png'); 
    img.src = image; 
}, false); 

// jquery post 
$('#send').click(function(){ 
    var image2 = image.replace('data:image/png;base64,', ''); 
    $.post('upload.php', 
    { 
      title: $('#title').val(), 
      blog: $('#blog').val(), 
      category: $('#category').val(), 
      author: $('#author').val(), 
      imagename: image2 
    }); 
}); 


}, false); 

PHP upload.php

define('UPLOAD_DIR', 'images/'); 
$img = $_POST['imagename']; 
$img = str_replace(' ','+', $img); 
$data = base64_decode($img); 
$file = UPLOAD_DIR . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Tiedoston tallennus ei sitten onnistu millään...'; 
$imagename = $file; // this is the file name for the MySQL database 

Mon problème est (je pense) image = canvas.toDataURL ('image/png'); et le post jQuery. La chaîne canvas.toDataUrl() a une longueur d'environ 700 000 lettres.

Answer 1

Vous pourriez vouloir essayer:

<?php 
$decoded = ""; 
for ($i=0; $i < ceil(strlen($encoded)/256); $i++) 
    $decoded = $decoded . base64_decode(substr($encoded,$i*256,256)); 
?> 

Je suis d'ici: http://www.php.net/manual/en/function.base64-decode.php#92980

Le code tente essentiellement de partiellement décode la chaîne base64. Je n'ai pas testé cela cependant. Je n'ai jamais traité d'images de base 64 aussi grandes que celles avec lesquelles vous travaillez.

Answer 2

Diviser, utiliser deux, variables et fusionner en PHP, fonctionne très bien. ;-)

var resourcelength_all = resource.length; 
var resourcelength_split = resourcelength_all/2; 
var resource_part1 = resource.substr(0, resourcelength_split); 
var resource_part2 = resource.substr(resourcelength_split, resourcelength_all);