web-dev-qa-db-ja.com

アップロード前にブラウザで画像を切り抜く

Jcropのような私が見つけた多くのライブラリは、実際にはトリミングを行わず、画像のトリミングUIを作成するだけです。その後、実際のトリミングを行うサーバーに依存します。

サーバー側のコードを使用せずに、いくつかのHTML5機能を使用して、画像のトリミングクライアント側を作成するにはどうすればよいですか。

はいの場合、いくつかの例やヒントはありますか？

javascripthtml5html5-canvas
58
Lorraine Bernard

はい、できます。
アンカータグの新しいhtml5 "download"属性に基づいています。
フローは次のようになります。

  1. 画像を読み込む
  2. トリミング境界を指定して画像をキャンバスに描画します
  3. キャンバスから画像データを取得し、domのアンカータグのhref属性にします
  4. ダウンロード属性（download="desired-file-name"）をそのa要素に追加します。ユーザーがしなければならないことは、「ダウンロードリンク」をクリックするだけで、画像がPCにダウンロードされます。

機会があれば、デモで戻ってきます。

更新
ここに ライブデモ が約束しました。 jsfiddle logo を取り、各マージンの5pxを切り取ります。
コードは次のようになります。

var img = new Image();
img.onload = function(){
    var cropMarginWidth = 5,
        canvas = $('<canvas/>')
                    .attr({
                         width: img.width - 2 * cropMarginWidth,
                         height: img.height - 2 * cropMarginWidth
                     })
                    .hide()
                    .appendTo('body'),
        ctx = canvas.get(0).getContext('2d'),
        a = $('<a download="cropped-image" title="click to download the image" />'),
        cropCoords = {
            topLeft : {
                x : cropMarginWidth,
                y : cropMarginWidth 
            },
            bottomRight :{
                x : img.width - cropMarginWidth,
                y : img.height - cropMarginWidth
            }
        };

    ctx.drawImage(img, cropCoords.topLeft.x, cropCoords.topLeft.y, cropCoords.bottomRight.x, cropCoords.bottomRight.y, 0, 0, img.width, img.height);
    var base64ImageData = canvas.get(0).toDataURL();


    a
        .attr('href', base64ImageData)
        .text('cropped image')
        .appendTo('body');

    a
        .clone()
        .attr('href', img.src)
        .text('original image')
        .attr('download','original-image')
        .appendTo('body');

    canvas.remove();
}
img.src = 'some-image-src';

IIを更新
言及するのを忘れた：もちろん、欠点があります:(。
同じキャンバスポリシーが画像にも適用されるため、画像のデータにアクセスする場合（キャンバスメソッドtoDataUrlを使用）。
したがって、ドメインでホストされているかのように画像を提供するサーバー側プロキシが必要になります。

Update III（セキュリティ上の理由から）このためのライブデモを提供することはできませんが、same-Originポリシーを解決するphpサンプルコードを次に示します。 ：

ファイルproxy.php：

$imgData = getimagesize($_GET['img']);
header("Content-type: " . $imgData['mime']);
echo file_get_contents($_GET['img']);

これにより、外部画像をOriginから直接読み込む代わりに：

img.src = 'http://some-domain.com/imagefile.png';

プロキシ経由でロードできます：

img.src = 'proxy.php?img=' + encodeURIComponent('http://some-domain.com/imagefile.png');

そして、画像データ（base64）を実際の画像に保存するためのサンプルPHPコードは次のとおりです。

ファイルsave-image.php：

$data = preg_replace('/data:image\/(png|jpg|jpeg|gif|bmp);base64/','',$_POST['data']);
$data = base64_decode($data);
$img = imagecreatefromstring($data);

$path = 'path-to-saved-images/';
// generate random name
$name  = substr(md5(time()),10);
$ext = 'png';
$imageName = $path.$name.'.'.$ext;

// write the image to disk
imagepng($img,  $imageName);
imagedestroy($img);
// return the image path
echo $imageName;

あとは、このファイルに画像データを送信するだけで、画像がディスクに保存され、既存の画像ファイル名が返されます。

もちろん、これは少し複雑に感じるかもしれませんが、あなたが達成しようとしていることが可能であることを示したいと思いました。

43
gion_13

Pixastic ライブラリは 正確に欲しいもの を実行します。ただし、キャンバスをサポートしているブラウザでのみ機能します。これらの古いブラウザでは、次のいずれかが必要です。

  1. サーバー側のフォールバックを提供する、または
  2. 申し訳ありませんが、最新のブラウザを入手する必要があることをユーザーに伝えてください。

もちろん、オプション＃2はあまりユーザーフレンドリーではありません。ただし、純粋なクライアント専用ツールを提供することを目的としている場合、および/またはフォールバックバックエンドクロッパーをサポートできない場合（たとえば、ブラウザ拡張機能またはオフラインChrome）アプリを作成している、または画像操作ライブラリを提供する適切なホスティングプロバイダーを買う余裕がないかもしれません）、ユーザーベースを最新のブラウザーに制限するのはおそらく公平でしょう。

EDIT：Pixasticを学習したくない場合は、jsFiddleに非常に簡単なクロッパーを追加しました here 。 JcropでdrawCroppedImage関数を変更および統合して使用することが可能であるはずです。

7
apsillers

#change-avatar-fileはファイル入力#change-avatar-fileはimgタグ（jcropのターゲット）「キー」はFR.onloadendイベント https://developer.mozilla.org/en-US/docs/Web/API/FileReader

$('#change-avatar-file').change(function(){
        var currentImg;
        if ( this.files && this.files[0] ) {
            var FR= new FileReader();
            FR.onload = function(e) {
                $('#avatar-change-img').attr( "src", e.target.result );
                currentImg = e.target.result;
            };
            FR.readAsDataURL( this.files[0] );
            FR.onloadend = function(e){
                //console.log( $('#avatar-change-img').attr( "src"));
                var jcrop_api;

                $('#avatar-change-img').Jcrop({
                    bgFade:     true,
                    bgOpacity: .2,
                    setSelect: [ 60, 70, 540, 330 ]
                },function(){
                    jcrop_api = this;
                });
            }
        }
    });
3
user1925970