Web端で画像を切り取る方法
13990 ワード
Web側ではJavaScriptはローカルファイルを直接処理できないため、バックグラウンドで画像を切り取ったり、html 5のcanvasを利用して処理したりすることができます.
方法1:バックグラウンドカットに転送
ステップ1:画像をバックグラウンドにアップロードし、フロントエンドに画像URLを返す
Inputラベルを使用して、バックグラウンドにファイルを送信します.
jQueryのajaxFileUploadメソッドを使用できます
ステップ2:切り取りを行い、画像の座標と長さと幅の等値を取得し、バックグラウンドに戻す
ここでは一般的に1つの移動divを利用してカットのアニメーション効果を取得し、現在は多くのjqueryプラグインが使用でき、本稿ではJcropプラグインを使用しており、比較的簡単で便利である.
上記の手順によれば、取得した剪断横長座標およびアスペクトデータをバックグラウンドに送信することができる.
手順3:バックグラウンドで画像を切り取る
Javaコードを例に
方法2:Html 5のcanvas技術
これは、ブラウザが以下の点をサポートする必要があり、互換性はまだテストされていません. File API Blob canvas
手順1:ファイルの読み込み
方法1のように、inputタグでfileを取得する必要があるが、JavaScriptはファイルを直接操作できないため、File APIで処理する必要がある.
手順2:切り取り座標の取得
参照方法1の手順2
手順3:canvasで画像を再描画する
まず、カット後のピクチャサイズが等しいcanvasを設定します.
手順4:画像の保存
canvasの画像の情報を取得するには、toDataURLで上記のDataURLに変換する必要があります.その後、base 64の情報を取り出し、windowを使用する.atobはバイナリ文字列に変換されます.でもwindowatob変換後の結果は文字列のままで、Blobに直接渡すとエラーが発生します.だからまたUint 8 A rrayで変換します.
ステップ5:blobデータをバックグラウンドに送信
バックグラウンドではBlob形式のデータをimageに変換して保存できます.
方法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技術
これは、ブラウザが以下の点をサポートする必要があり、互換性はまだテストされていません.
手順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に変換して保存できます.