web-dev-qa-db-ja.com

IOS6およびSafari写真のアップロード-ファイルAPI +キャンバス+ jQueryAjaxファイルの非同期アップロードとサイズ変更

IOS6がリリースされ、写真のアップロードをテストしています。

それはうまく機能しますが、3Gを超える大きな画像では、予想どおりに遅くなります。

File APIとCanvasのおかげで、JavaScriptを使用して画像のサイズを変更することができます。アップロードする前に画像のサイズを変更すると、アップロードが速くなり、ユーザーエクスペリエンスが高速になることを願っています。スマートフォンのプロセッサがネットワーク速度よりも飛躍的に向上しているため、このソリューションが勝者だと思います。

Nicolasは、画像のサイズ変更のための優れたソリューションを提供しています。

アップロード前の画像サイズ変更

しかし、私はjQueryのAjaxでそれを実装するのに最も苦労しています。このコードはIOS6以降のモバイルWebアプリケーション開発に非常に役立つ可能性があるため、アドバイスやヘルプをいただければ幸いです。

var fileType = file.type,
    reader = new FileReader();

reader.onloadend = function () {
    var image = new Image();
    image.src = reader.result;

    image.onload = function () {

        //Detect image size
        var maxWidth = 960,
            maxHeight = 960,
            imageWidth = image.width,
            imageHeight = image.height;
        if (imageWidth > imageHeight) {
            if (imageWidth > maxWidth) {
                imageHeight *= maxWidth / imageWidth;
                imageWidth = maxWidth;
            }
        } else {
            if (imageHeight > maxHeight) {
                imageWidth *= maxHeight / imageHeight;
                imageHeight = maxHeight;
            }
        }

        //Create canvas with new image
        var canvas = document.createElement('canvas');
        canvas.width = imageWidth;
        canvas.height = imageHeight;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

        // The resized file ready for upload
        var finalFile = canvas.toDataURL(fileType);

        if (formdata) {

            formdata.append("images[]", finalFile);

            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    //successful image upload
                }
            });

        }
    }
}
reader.readAsDataURL(file);
ajaxjqueryios6fileapi
13
TaylorMac

クライアント側canvasの画像サイズ変更用のjQueryプラグインを開発しました。また、orientationおよびiOS6押しつぶされた画像の問題も処理します。

あなたは試すことができます： http://gokercebeci.com/dev/canvasresize

使用法：

$.canvasResize(file, {
               width   : 300,
               height  : 0,
               crop    : false,
               quality : 80,
               callback: function(dataURL, width, height){

                         // your code

               }
});
32
goker.cebeci

IOS6の2番目のベータリリース以降、アップロード機能を使用しています。次のコードは私のために働きます：

これをHTMLページの先頭に配置します-

<script>window.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");

var fileSelect = document.getElementById("fileSelect"),
    input = document.getElementById("input");

    input.addEventListener("change", handleFiles);

    //hides ugly default file input button  
    fileSelect.addEventListener("click", function (e) {
        if (input) {
            input.click();
        }
        e.preventDefault();
    }, false);

function handleFiles(e) {
    var reader = new FileReader;
    reader.onload = function (event) {
        var img = new Image();
        img.src = reader.result;
        img.onload = function () {
            var maxWidth = 320,
                maxHeight = 350,
                imageWidth = img.width,
                imageHeight = img.height;

            if (imageWidth > imageHeight) {
                if (imageWidth > maxWidth) {
                    imageHeight *= maxWidth / imageWidth;
                    imageWidth = maxWidth;
                }
            } else {
                if (imageHeight > maxHeight) {
                    imageWidth *= maxHeight / imageHeight;
                    imageHeight = maxHeight;
                }
            }
            canvas.width = imageWidth;
            canvas.height = imageHeight;

            ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

            // The resized file ready for upload
            var finalFile = canvas.toDataURL("image/png");

            var postData = 'canvasData=' + finalFile;
            var ajax = new XMLHttpRequest();
            ajax.open('POST', 'save.php', true);
            ajax.setRequestHeader('Content-Type', 'canvas/upload');

            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4) {
                    //just to visually confirm it worked...
                    window.open(canvas.toDataURL("image/png"), "mywindow");
                }
            }
            ajax.send(postData);
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}
}
</script>

これがHTMLです-

 <div style="width:320px;position:absolute;z-index:9;top:387px;">
<button style="width:60px;" id="fileSelect">upload</button>
<input type="file" id="input" name="input" accept="image/*" style="display:none;"></div>

これがPHP-

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
   $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

   // Remove the headers (data:,) part.  
   // A real application should use them according to needs such as to check image type
   $filteredData=substr($imageData, strpos($imageData, ",")+1);

   // Need to decode before saving since the data we received is already base64 encoded
   $unencodedData=base64_decode($filteredData);

   // Save file.  This example uses a hard coded filename for testing, 
   // but a real application can specify filename in POST variable
   $fp = fopen( 'users/user_photo.png', 'wb' );
   fwrite( $fp, $unencodedData);
   fclose( $fp );
 }
 ?>

私が戦った唯一の問題は、90度回転せずにカメラから画像をロードすることです。

これがお役に立てば幸いです。コードに問題がある場合はお知らせください（これが私の最初の投稿です）。

7
rich

モバイルブラウザで大きな画像とメモリの問題を扱っていることを考えると、検出とサイズ変更のためだけに重複したキャンバスを作成したり、他の画像操作を実行したりすることを回避する軽量のソリューションが見つかるかどうかを確認したいと思いました。

Mobile Safariが大きすぎる画像を垂直方向に押しつぶす場合、それを行う量の比率は同じままであるようです。

そのため、キャンバスに画像をレンダリングする前に、非常に速い経験則を使用して、ブラウザがモバイルiDevice navigator.userAgent.match(/(iPod|iPhone|iPad)/) ...であり、画像の高さまたは幅が大きいかどうかを確認します。 2000 pixよりも大きい場合、押しつぶされることがわかります。その場合、canvasContext.drawImage()で、画像の高さを、特定の画像サイズ変更の目的で通常あるはずの高さの4倍に指定します。私が見たものに基づいて、MobileSafariは画像を4倍に押しつぶします。

次に、画像をレンダリングします。最初は歪みがなく、事前に引き伸ばされた画像を押しつぶして、通常のX：Yの比率に戻します。上記の100％ソリューションが使用する、追加のキャンバス要素やコンテキスト、テストレンダリング、またはピクセルの反復はありません。

いくつかのEdgeケースがあり、画像サイズの制限が正確ではない可能性があると確信していますが、私のアプリでは、高速なソリューションが必要でした。

1
SashaK