JavaScriptを使用して画像をトリミングして保存する簡単な実装

この記事では、JavaScript を使用して画像を切り取って保存する簡単な実装を主に紹介します。必要な場合は、それを参照してください。 , 最近仕事でこのニーズに再び遭遇したので、それを簡単に整理し、必要なときにみんなと自分自身が参照できるように方法を学びたいと思いました。 したがって、この記事では主に、JavaScript を使用して画像をトリミングする簡単な実装を紹介します。それらを保存し、バックエンドの PHP 処理には THINKPHP フレームワークを使用しています。必要な友人はそれを参照できます。

前書き 私の知る限り、スライド検証コード、画像のトリミング、その他の比較的優れたインタラクティブなデザインなど、デザインにおいてより柔軟なページの部分はそれほど多くありません。

私は働き始めてから、これらのことを理解したいと思っていましたが、残念ながら、今日の自由時間を利用して、午後中ずっとそれを勉強しました。実際、私は拷問を受けてきました。それは私の

がまだ比較的弱いという問題を反映しています。

成果効果: ユーザーがクリックして画像をアップロードすると、ページにアップロードされた画像が表示され、トリミング ボックスと 2 つのプレビュー領域が表示されます。最後に、トリミング ボタンをクリックして、トリミングされた画像を保存します。サーバ。

このエフェクトは非常にシンプルで、プロセス全体で 2 つの困難に遭遇しました。1 つはトリミングの JS エフェクトで、2 つ目は画像データの処理です。 最初の質問では、インターネット上のプラグインを引用しましたが、私の感じる限り、トリミング処理におけるユーザーの満足度は平均的としか考えられません。境界線の設定を 8 回引っ張りますが、ボックスを引っ張っても正方形に応じて拡大縮小され、私にとってはあまり満足のいくものではありません。

実装方法は以下の通りです:

以下は簡単なページデザインです:

<p style="float:left;"><img  src="/static/imghwm/default1.png"  data-src="/plug/js/jquery.min.js"  class="lazy"  id="target" alt="JavaScriptを使用して画像をトリミングして保存する簡単な実装" ></p>
<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img  src="/static/imghwm/default1.png"  data-src="/plug/js/jquery.min.js"  class="lazy"    style="max-width:90%" id="preview"  alt="JavaScriptを使用して画像をトリミングして保存する簡単な実装" ></p>
<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img  src="/static/imghwm/default1.png"  data-src="/plug/js/jquery.min.js"  class="lazy"    style="max-width:90%" id="preview2"  alt="JavaScriptを使用して画像をトリミングして保存する簡単な実装" ></p>
<form action="{:U(&#39;/test/crop_deal&#39;)}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="裁剪"/>
</form>

以下はJSコードです:

function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);

var jcrop_api, boundx, boundy;

setTimeout(function(){


$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});

function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览p的大小
var ry = 48 / c.h;

$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览p的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};


function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

},500);

}

ここに 2 つの注意点があります : 1 つ目: ページの先頭でプラグインを導入することを忘れないでください:

　　<script  type="text/javascript"></script>
　　<script src="/plug/js/jquery.Jcrop.min.js" type="text/javascript"></script>
　　<link rel="stylesheet" href="/plug/css/Jcrop.css" rel="external nofollow" type="text/css" />

2 つ目: 目の鋭い人の中には JS のタイミングを見たことがあるかもしれません。同時に、これは少し必要ではないかと混乱します。実際には、画像を JS にアップロードしてページにロードするのに時間がかかります。このタイミングの意味は、トリミング効果をロードする前に、画像がページにロードされるまで待つことです。実験を繰り返した。

バックエンド PHP 処理には THINKPHP フレームワーク、バージョン 3.1.3 を使用します

コードを貼り付けます:

function crop_deal(){
　　ob_clean();
　　import ( 'ORG.Net.UploadFile' );
　　$upload = new UploadFile ();
　　$upload->maxSize = 2000000;
　　$upload->allowExts = array (
　　　　'jpg',
　　　　'gif',
　　　　'png',
　　　　'jpeg'
　　);
　　$upload->savePath = './upload/test/';
　　$upload->autoSub = true;
　　$upload->subType = 'date';
　　$upload->dateFormat = 'Ymd';
　　if ($upload->upload () ) {
　　　　$info = $upload->getUploadFileInfo();
　　　　$new_path = "./upload/test/thumb".date('Ymd');
　　　　$file_store = $new_path."/".date('YmdHis').".jpg";
　　　　if(!file_exists($new_path)){
　　　　　　mkdir($new_path,0777,true);
　　　　}
　　　　$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
　　　　$img_size = getimagesize($source_path);
　　　　$width = $img_size[0];
　　　　$height = $img_size[1];　　
　　　　$mime = $img_size['mime'];
　　　　$srcImg = imagecreatefromstring(file_get_contents($source_path));
　　　　$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
　　　　//缩放
　　　　// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
　　　　//裁剪
　　　　imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
　　　　header("Content-Type:image/jpeg");
　　　　imagejpeg($cropped_img,$file_store);
　　　　imagedestroy($srcImg);
　　　　imagedestroy($cropped_img);
　　}

}

ここでは、GD ライブラリでイメージを作成するための一連の方法を示します。これは最も重要です。つまり、指定されたトリミング位置とトリミング サイズに従って、元の画像が新しい画像にコピーされます。これは、ページ ユーザーが画像をトリミングするとき、フロントエンドが実際には画像を操作しないことを示しています。ただし、座標位置が切り取られ、サイズが切り取られてから、操作のために PHP に送信されます。 ！

関連する推奨事項:

imagecopy()

JavaScriptを使用して特定の数のパスワードをランダムに生成する方法

JavaScriptの%を使用して線と色を変更する方法

以上がJavaScriptを使用して画像をトリミングして保存する簡単な実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。