web-dev-qa-db-ja.com

画像の適切なプレビューを表示するために画像の向きを調整するにはどうすればよいですか？

enter image description hereenter image description hereenter image description here 私はlaravelユーザーがアップロードした画像を受け入れて表示する機能を持つWebアプリケーションを開発しました。携帯電話を使用してアップロードした写真が回転しているため、テスト中に問題が発生しました90反時計回りの角度で画像の介入を使用して問題を解決しました。ただし、JavaScriptを使用してアップロードした画像のプレビューをユーザーに表示しているため、画像は90度回転しますが、画像を保存すると適切になります。私のJavaScriptコードです

    function imagePreview(input,Elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(Elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_Elm");
    });

上記のコードを編集して、必要に応じて画像の向きを変更できるようにして、プレビュー画像の向きを正しく設定してください。

javascriptjquerylaravellaravel-5exif
8
Jeffrin Jose

CSSで画像を回転させるだけではどうですか？

reader.onload = function (e) {
    $(Elm).css({
        "background-image":"url('"+e.target.result+"')",
        "transform": "rotate(90deg)"
    });
}

編集：さて、EXIFデータの世界に少し飛び込んだ後、私はあなたのための解決策があるかもしれないと思います。 @Nickが示唆したように、ALiの getOrientation（） 関数を借りて、CSSで向きを次のように修正しました。

function correctOrientation(element, orientation){
    switch (orientation) {
      case 2: $(element).css("transform", "scaleX(-1)");
        break;
      case 3: $(element).css("transform", "rotate(180deg)");
        break;
      case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
        break;
      case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
        break;
      case 6: $(element).css("transform", "rotate(90deg)");
        break;
      case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
        break;
      case 8: $(element).css("transform", "rotate(-90deg)");
        break;
      default: break;
    }
}

フィドル

そして、それをテストするためにサンプルファイルが必要な場合は、- ここで取得 してください。

編集：アップロードされた画像を<img> divのbackground-imageの代わりに https://jsfiddle.net/ynzvtLe2/2/

4
thingEvery

これはうまくいくはずです。ここでは、画像ファイルの元の向きを取得し、適切な回転補正を使用してキャンバスを作成します。次に、正しく回転した画像をプレビューとして設定します。

function imagePreview(input,Elm) {
    // image file
    var file = input.files[0]; 

    if (!file.type.match('image/jpeg.*')) {
        // image is not a jpeg, do something?
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var exif = piexif.load(e.target.result);
        var image = new Image();
        image.onload = function () {
            //get original orientation of the uploaded image
            var orientation = exif["0th"][piexif.ImageIFD.Orientation];

            // Build a temperory canvas to manipulate image to required orientation
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            ctx.save();
            if (orientation == 2) {
                x = -canvas.width;
                ctx.scale(-1, 1);
            } else if (orientation == 3) {
                x = -canvas.width;
                y = -canvas.height;
                ctx.scale(-1, -1);
            } else if (orientation == 4) {
                y = -canvas.height;
                ctx.scale(1, -1);
            } else if (orientation == 5) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                y = -canvas.width;
                ctx.scale(1, -1);
            } else if (orientation == 6) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
            } else if (orientation == 7) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                ctx.scale(-1, 1);
            } else if (orientation == 8) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                y = -canvas.width;
                ctx.scale(-1, -1);
            }
            ctx.drawImage(image, x, y);
            ctx.restore();

            var dataURL = canvas.toDataURL("image/jpeg", 1.0);

            // set the preview image to your element
            $(Elm).css("background-image","url('"+dataURL+"')");
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}


$("#settings_img").on("change",function(){
    imagePreview(this,"#settings_img_Elm");
});

このライブラリを最初にインクルードしてください：https://github.com/hMatoba/piexifjs

私はドキュメントから助けを得ました：https://readthedocs.org/projects/piexif/downloads/pdf/latest/

2
Sapnesh Naik