アップロードされている画像が受け入れられるファイルタイプ、ファイルサイズであるかどうかを検証し、ユーザーの指示に従って画像をトリミングし、特定の寸法に収まるようにサイズを変更してから、再アップロードするクライアント側のソリューションを探しています。サーバーへのサイズ変更および最適化された画像。
これを実装するのに役立つ有名なオープンソース ライブラリはありますか? (複数のファイルをアップロードする必要はありません)。私はこれを自分で実装したくありません。古い/サポートされていないブラウザーのフォールバックを備えたクロスブラウザー互換ソリューションを提供できるライブラリを探しています。
Plupload & agile uploader に遭遇しましたが、これらはユーザーの指示に従って画像をトリミングするのに役立ちません。
jQuery 1.7 を使用しています。必要に応じて、開いて他のライブラリも追加します。
兄弟に平安あれ
プロジェクトで必要なものを使用していますが、使用していません（画像のカスタムサイズを配置するときに写真のサイズを変更します）
i ( imgareaselect ) を使用して写真をトリミングする
しかし、私はそれのサイトを覚えていません.多分: http://odyniec.net/projects/imgareaselect/examples.html
そのサイトが正しい場合、私はこのコードを使用しています
var x1 = null, y1 = null, w = null, h = null, Signal = null, object=null;
function preview(img, selection) {
var img = {
url: jQuery("#image").attr("src"),
width: jQuery("#image").width(),
height: jQuery("#image").height()
}
var scaleX = 128 / selection.width; // 128 = my custom size ;)
var scaleY = 128 / selection.height;
$(".avatar-box img").replaceWith('<img id="thumbnail" src="'+img.url+'" class="preview" border="0"/>');
$('#thumbnail').css({
width: Math.round(scaleX * img.width) + 'px',
height: Math.round(scaleY * img.height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
x1 = selection.x1; y1 = selection.y1; w = selection.width; h = selection.height;
}
$(window).ready(function () {
$('#image').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
サイズとタイプを確認するには：このスクリプトも使用します
$("form").submit(function(){
var OrgFile = $(this).find("[type=file]"),
FileName = OrgFile.val(),
FileExtension = FileName.split('.').pop().toLowerCase();
if(FileName.indexOf(".")==-1 || FileExtension != "jpg" && FileExtension != "jpeg" && FileExtension != "png" && FileExtension != "gif" ){ // Curstom File Extension
alert("This isn't a Photo !");
return false;
}else
if((OrgFile[0].files[0].size/1024/1024) > (1)){ // Max Photo Size 1MB
alert("You Photo is too big !");
return false;
}else{
alert("every thing Fine :)");
return true;
}
});
次に、クライアントがトリミングされた画像を送信した場合
$('#create_thumbnail').submit(function() {
$.ajax({
type : "POST",
url : "resize.php",
data : {logged_code: logged_code,x1: x1,y1: y1,w: w,h: h},
success: function(data) {}
});
return false;
});
そして resize.php ファイル
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
case "image/gif":
$source=imagecreatefromgif($image);
break;
case "image/pjpeg":
case "image/jpeg":
case "image/jpg":
$source=imagecreatefromjpeg($image);
break;
case "image/png":
case "image/x-png":
imagealphablending($newImage, false);
imagesavealpha($newImage, true);
$source=imagecreatefrompng($image);
break;
}
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
switch($imageType) {
case "image/gif":
imagegif($newImage,$thumb_image_name);
break;
case "image/pjpeg":
case "image/jpeg":
case "image/jpg":
imagejpeg($newImage,$thumb_image_name,100);
break;
case "image/png":
case "image/x-png":
imagepng($newImage,$thumb_image_name);
break;
}
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}
私はあなたを助け、あなたの質問を理解することを願っています.
phpチャットルームに参加したいという私の答えを投票して、問題を解決してくれる人を見つけてください
下手な英語でごめんなさい、私はアラビア語を話しています
クライアント側の検証とアップロードにFineUploaderを使用してみてください。後で画像をトリミングするためにJCropを使用します。
Fine Uploaderは、クライアント側でサイズとファイルタイプ（ここを参照）を制限するのに最適です。ただし、サポートする必要のあるブラウザーによって異なります（IE7では、このようにクライアント側で検証することはできないと思います）。
JCropは、アスペクト比をサポートし、表示サイズと実際のサイズの間で画像を変換する、実装が簡単なトリミングツールです。
サイズ変更は、FileReader とキャンバスで行うことができます。必要なサイズのキャンバスを作成します。
画像を読み込みます。次に、canvas.toDataURL(fileType) を使用して、ファイルの内容を base64 として取得します。
jQuery Ajax コード
jQuery('document').ready(function(){
var input = document.getElementById("imagefile");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
//validation to check whether uploaded files are images
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
};
reader.readAsDataURL(file);
}
if (formdata) {
//send the ajax query to upload the file(s)
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (result) {
jQuery('div#response').html("Successfully uploaded").fadeOut();
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
HTML コード
<form enctype="multipart/form-data">
<input id="imagefile" type="file" name="image" accept="image/*"/ />
</form>
上記のコードが行うことは、ファイルをアップロードすると、最初に画像のタイプを検証し、ajax 経由でアップロードすることです。必要に応じて、複数のファイルをアップロードできます。何が何だろうと思ったらFormData、
この
FormDataオブジェクトを使用すると、一連のキーと値のペアをコンパイルして、XMLHttpRequest を使用して送信できます。主にフォーム データの送信に使用することを目的としていますが、キー付きデータを送信するためにフォームとは別に使用できます。送信されるデータは、フォームのエンコーディング タイプが「multipart/form-data」に設定されている場合に、フォームの submit() メソッドがデータの送信に使用するのと同じ形式です。
addEventListener があなたのために行うことは、
addEventListener() は、単一のターゲットに単一のイベント リスナーを登録します。イベント ターゲットは、ドキュメント内の 1 つの要素、ドキュメント自体、ウィンドウ、または XMLHttpRequest の場合があります。
を使用upload.phpして、サーバー レベルでファイルをアップロードできます。
プラグインにこの機能を持たせたい場合は、上記のコードでプラグインを拡張することができます。これは仕事を成し遂げる非常に単純なコード スニペットであるため、プラグインをブリックすることはありません。コードをプラグインに問題なく統合できました。
このリンクは、ファイル サイズを検証する方法を示します。JavaScript ファイルのアップロード サイズの検証
いくつかの特定の寸法に収まるように サイズを変更しますjavascript Image Resize
これらのリンクが役に立ちます。簡単に理解できるようにコードの単純さを維持するため、すべてを 1 つに統合するつもりはありません。
問題がある場合はお知らせください。
考えがある。このプラグインを使用してアップロードを試すことができます。
http://des.delestesoft.com:8080/?go=2
属性を定義するとき: post variables->
variables:{
sessionID:"abcdefg",
width:$("#myimage").width(),
height:$("#myimage").heigth()
},
サーバー側：ファイルを取得し、投稿変数に従ってサイズの画像を変更します。