Web端で画像を切り取る方法

13990 ワード

Web側ではJavaScriptはローカルファイルを直接処理できないため、バックグラウンドで画像を切り取ったり、html 5のcanvasを利用して処理したりすることができます.
方法1:バックグラウンドカットに転送
ステップ1:画像をバックグラウンドにアップロードし、フロントエンドに画像URLを返す
Inputラベルを使用して、バックグラウンドにファイルを送信します.
    <input id="image" type="file" name="image" />

jQueryのajaxFileUploadメソッドを使用できます
     $.ajaxFileUpload(
        {
            url: 'live/apply/uploadImage', //               
            type:'post',
            secureuri: false, //     false
            fileElementId: image, //       id   
            dataType: 'json', //           json
            data:data, //             
            success: function (data, status)  //           
                {
                    //       
                },
            error: function (data, status, e)//           
                 {
                    //      
                 }

ステップ2:切り取りを行い、画像の座標と長さと幅の等値を取得し、バックグラウンドに戻す
ここでは一般的に1つの移動divを利用してカットのアニメーション効果を取得し、現在は多くのjqueryプラグインが使用でき、本稿ではJcropプラグインを使用しており、比較的簡単で便利である.
    $("#myPhoto").Jcrop({
        onChange:showPreview,
        onSelect:showPreview,
        aspectRatio:1
    }); 
    function showPreview(coords){
        if(parseInt(coords.w){
        //             ,           (   )      (   )    
            var rx = $("#preview_box").width() / coords.w; 
            var ry = $("#preview_box").height() / coords.h;
            //               
            $("#crop_preview").css({
                width:Math.round(rx * $("#myPhoto").width()) + "px",    //                     
                height:Math.round(rx * $("#myPhoto").height()) + "px",  //                     
                marginLeft:"-" + Math.round(rx * coords.x) + "px",
                marginTop:"-" + Math.round(ry * coords.y) + "px"
            });
            
            $("#X1").val(coords.x);
            $("#Y1").val(coords.y);
            $("#X2").val(coords.x2);
            $("#Y2").val(coords.y2);
            $("#W").val(coords.w);
            $("#H").val(coords.h);
        }
    }
});

上記の手順によれば、取得した剪断横長座標およびアスペクトデータをバックグラウンドに送信することができる.
手順3:バックグラウンドで画像を切り取る
Javaコードを例に
    /*
 *         
 * src:    ,dest:      
 *        ,  src == dest  
 */
    public static void cutImage(String src,String dest,int x,int y,int w,int h) throws IOException{ 
        
           File srcImg =new File(src);
           //     
           String suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);
           //              
           Iterator iterator = ImageIO.getImageReadersBySuffix(suffix); 
           ImageReader reader = (ImageReader)iterator.next(); 
           
           InputStream in=new FileInputStream(src);
           ImageInputStream iis = ImageIO.createImageInputStream(in); 
           
           reader.setInput(iis, true); 
           ImageReadParam param = reader.getDefaultReadParam(); 
          
           //      
           Rectangle rect = new Rectangle(x, y, w,h);  
           param.setSourceRegion(rect); 
           
           //        
           BufferedImage bi = reader.read(0,param);   
           ImageIO.write(bi, suffix, new File(dest));       
    } 

方法2:Html 5のcanvas技術
これは、ブラウザが以下の点をサポートする必要があり、互換性はまだテストされていません.
  • File API
  • Blob
  • canvas

  • 手順1:ファイルの読み込み
    方法1のように、inputタグでfileを取得する必要があるが、JavaScriptはファイルを直接操作できないため、File APIで処理する必要がある.
    $('input[type=file]').change(function(){
        var file=this.files[0];
        var reader=new FileReader();
        
        reader.onload=function(){
            //    reader.result        DataURL
            var url=reader.result;
            setImageURL(url);
        };
        
        reader.readAsDataURL(file);
    });
    
    var image=new Image();
    function setImageURL(url){
        image.src=url;
    }

    手順2:切り取り座標の取得
    参照方法1の手順2
    手順3:canvasで画像を再描画する
    まず、カット後のピクチャサイズが等しいcanvasを設定します.
    //          2  
    var x,  y, width, height;
    
    var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],
    ctx=canvas.getContext('2d');
    
    ctx.drawImage(image,x,y,width,height,0,0,width,height);//  
    $(document.body).append(canvas);//            

    手順4:画像の保存
    canvasの画像の情報を取得するには、toDataURLで上記のDataURLに変換する必要があります.その後、base 64の情報を取り出し、windowを使用する.atobはバイナリ文字列に変換されます.でもwindowatob変換後の結果は文字列のままで、Blobに直接渡すとエラーが発生します.だからまたUint 8 A rrayで変換します.
    var data=canvas.toDataURL();
    
    // dataURL      “data:image/png;base64,****”,              ,             
    data=data.split(',')[1];
    data=window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
    };
    
    // canvas.toDataURL           image/png
    var blob=new Blob([ia], {type:"image/png"});

    ステップ5:blobデータをバックグラウンドに送信
    バックグラウンドではBlob形式のデータをimageに変換して保存できます.