2

jQuery postとphpを使用してデータを処理するためにcanvas.todataurl（）画像（getUserMedia）をサーバーにアップロードしようとしていますが、いくつか問題があります。アップロードしているすべての画像が破損し、画像の半分が欠落しています。また、画像に関連するデータ（タイトル、テキスト、日付など）を保存しているMySQLデータベースもあります。関連データが多ければ多いほど、画像が破損するようです。

したがって、これはブラウザの制限なのか、それともjQueryの投稿と関係があるのでしょうか。PHPのmax_post_sizeも確認しましたが、16 MBなので、問題はありません。サーバー設定にアクセスできません。私はこれにかなり戸惑っています、私は何ができますか？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

私の問題は（私が思うに）image = canvas.toDataURL（'image / png'）;です。とjQueryの投稿。canvas.toDataUrl（）文字列の長さは約700000文字です。

4

2 に答える 2

0

あなたはこれを試してみたいかもしれません：

<?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-05T10:22:51.180 に答える
0

それを分割し、2 つの変数を使用して、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-20T06:14:40.260 に答える