jQuery的郵政大小限制使用canvas.todataurl（）

我想上傳一個canvas.todataurl（）圖像（getUserMedia）到服務器使用jQuery後和PHP來處理數據，但我有一些問題。我上傳的所有圖像最終都已損壞，圖像的一半已丟失。我還有一個MySQL數據庫，用於存儲與圖像相關的數據（標題，文本，日期等）。看來，我擁有的相關數據越多，圖像就越容易被損壞。jQuery的郵政大小限制使用canvas.todataurl（）

因此，我想知道這是瀏覽器的限制還是這與jQuery post有關。我也檢查了PHP的max_post_size，它是16MB，所以這不應該是一個問題。我無法訪問服務器設置。我對此感到困惑，我該怎麼辦？是否有可能將canvas.todataurl（）分成多個部分然後發佈？

的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

我的問題是（我認爲）圖像= canvas.toDataURL（ '圖像/ PNG'）;和jQuery文章。 canvas.toDataUrl（）字符串長約700 000個字母。

來源

2012-11-05 user1791218

您要處理的結果canvas.toDataURL字符串需要多長時間？我讀過有關解碼大型base64字符串時出現問題的人。 –

它可以根據getUserMedia拍攝的圖像而有所不同，但我會說約700 000個字母。 – user1791218

在這裏有同樣的問題：http://stackoverflow.com/questions/26221750/html2canvas-400kb-max-size-cutting-off-image-at-same-byte-for-most –

你可能會想試試這個：

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

我從這裏得到它：http://www.php.net/manual/en/function.base64-decode.php#92980

的代碼基本上是試圖部分以base64字符串解碼。我還沒有測試過。我從來沒有處理過與你一起工作的base64圖像。

來源

2012-11-05 10:22:51

我已經試過，didn'沒有任何區別，仍然有一半圖像丟失。不管怎麼說，還是要謝謝你：） – user1791218

拆分它，使用兩個變量並在PHP中合併，工作正常。 ;-)

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);

來源

2016-04-20 06:14:40 Tobias

jQuery的郵政大小限制使用canvas.todataurl（）

回答

相關問題