1

ウェブカメラで写真を撮り、jcrop jquery ライブラリを使用してトリミングし、トリミングした写真をサーバーにアップロードしようとしています。サムネイルのサイズに関係なく、常に幅 300 ピクセル、高さ 150 ピクセルになります。

ウェブカメラの写真キャプチャには、jQuery ウェブカメラ プラグインを使用しています: http://www.xarg.org/project/jquery-webcam-plugin/。getusermedia https://github.com/MrSwitch/jquery.getUserMedia.jsを使用するものも試しました。

Web カメラのスナップショットだけをアップロードすると、正常に機能し、予想されるサイズになります。

私のJavaScript：

$('#canvas').Jcrop({
        boxWidth: 320,
        boxHeight: 240,
        onChange:   updatePreview,
        onSelect:   updatePreview,
        addClass: 'jcrop-dark',
        aspectRatio : 1},function(){
    jcrop_api = this;
 });

 function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * 320) + 'px',
        height: Math.round(ry * 240) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

function updatePreview(c) {
    if(parseInt(c.w) > 0) {
        // Show image preview
        var imageObj = $("#canvas")[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
};
$('#save').click(function(){
    var imgData = document.getElementById('canvas').toDataURL();
    var postStr = "img=" + encodeURIComponent(imgData);
    $.ajax({
        type: 'POST',
        url: '{{ path('photo_upload') }}',
        data: postStr,
        async: false,
        processData: false,
        error: function(){
            $('.hero-unit').prepend('<div class="alert alert-error">The photo could not be uploaded.<button type="button" class="close" data-dismiss="alert">×</button></div>');
        }
    });
});

簡単なテスト PHP

define('UPLOAD_DIR', 'photos/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR  . 'photo.png';
$fp = fopen($file, 'wb');
$success=fwrite($fp, $data);
fclose($fp);
print $success ? $file : 'Unable to save the file.';

私のHTML：

<div id="webcam"></div>
<a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>
<canvas id="canvas" height="240" width="320"></canvas>
<canvas id="preview" style="width:300px;height:300px;overflow:hidden;"></canvas>
<a class="btn btn-primary btn-large" id="save">Save Photo</a>
4

1 に答える 1

0

そのコードはまさにあなたが使おうとしているものですか?

私の推測では、まだデフォルト サイズ (たまたま 300x150) のままのキャンバスがあり、それがサーバーに送信されて保存される画像になっていると思います。

また、実際の幅と高さを設定するのではなく、スタイルの幅と高さをプレビューに表示するのはなぜですか?

于 2012-12-12T04:35:21.347 に答える