帶領大家一起做一個ThinkPHP整合jcrop圖檔上傳裁切預覽的例子

下載下傳完成後，裡面有js，demo，css等檔案夾.demo裡是例子,建議大家先看一下源代碼.剩下的,跟我一起來做這個例子:

1.下載下傳ThinkPHP,然後建立項目,生成項目目錄

2.在Tpl中建立Index/index.html

代碼如下

<code>"http://www.w3.org/TR/html4/loose.dtd"></code>

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code><code>></code>

<code><</code><code>title</code><code>>上傳圖檔</</code><code>title</code><code>></code>

<code> </code><code><</code><code>script</code><code>></code>

<code> </code><code>function setFile(f1){</code>

<code> </code><code>document.frm.logoImg.value=f1;</code>

<code> </code><code></</code><code>script</code><code>></code>

<code><</code><code>table</code> <code>border</code><code>=</code><code>"0"</code> <code>align</code><code>=</code><code>"center"</code> <code>cellpadding</code><code>=</code><code>"0"</code> <code>cellspacing</code><code>=</code><code>"0"</code><code>></code>

<code> </code><code><</code><code>td</code> <code>height</code><code>=</code><code>"45"</code> <code>align</code><code>=</code><code>"center"</code> <code>valign</code><code>=</code><code>"middle"</code><code>></code>

<code> </code><code><</code><code>form</code> <code>action</code><code>=</code><code>"#"</code> <code>method</code><code>=</code><code>"post"</code> <code>name</code><code>=</code><code>"frm"</code><code>> 請選擇上傳的圖檔</code>

<code> </code><code><</code><code>input</code> <code>name</code><code>=</code><code>"logoImg"</code> <code>id</code><code>=</code><code>"logoImg"</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"30"</code><code>/></code>

<code> </code><code><</code><code>label</code> <code>style</code><code>=</code><code>"cursor:hand"</code> <code>onClick</code><code>=</code><code>"window.open('__URL__/upimg','上傳圖檔','height=600,width=800,top=200,left=200')"</code><code>>上傳圖檔</</code><code>label</code><code>><</code><code>br</code><code>/></code>

<code></</code><code>table</code><code>></code>

這是一個上傳，在點選上傳圖檔以後，會彈出一個視窗，專門用來上傳圖檔裁切。在Tpl/Index/下建立upimg.html

代碼如下:

<code><!DOCTYPE HTML PUBLIC </code><code>"-//W3C//DTD HTML 4.01 Transitional//EN"</code>

<code>"http://www.w3.org/TR/html4/loose.dtd"</code><code>></code>

<code><meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code><code>></code>

<code><script language=</code><code>"javascript"</code><code>></code>

<code> </code><code>function</code> <code>$(id){</code>

<code> </code><code>return</code> <code>document.getElementById(id);</code>

<code> </code><code>function</code> <code>ok(){</code>

<code> </code><code>$(</code><code>"logoimg"</code><code>).src = $(</code><code>"filename"</code><code>).value;</code>

<code><table border=</code><code>"0"</code> <code>align=</code><code>"center"</code> <code>cellpadding=</code><code>"0"</code> <code>cellspacing=</code><code>"0"</code><code>></code>

<code> </code><code><td height=</code><code>"45"</code> <code>align=</code><code>"center"</code> <code>valign=</code><code>"middle"</code><code>></code>

<code> </code><code><form action=</code><code>"__URL__/uploadf?submit=1"</code> <code>method=</code><code>"post"</code> <code>enctype=</code><code>"multipart/form-data"</code> <code>name=</code><code>"form1"</code><code>> 請選擇上傳的圖檔</code>

<code> </code><code><input type=</code><code>"file"</code> <code>name=</code><code>"filename"</code> <code>id=</code><code>"filename"</code> <code>onchange=</code><code>"ok()"</code><code>></code>

<code> </code><code><input type=</code><code>"hidden"</code> <code>name=</code><code>"MAX_FILE_SIZE"</code> <code>value=</code><code>"30000"</code> <code>/></code>

<code> </code><code><input type=</code><code>"submit"</code> <code>name=</code><code>"Submit"</code> <code>value=</code><code>"上傳"</code><code>></code>

我沒有用TP自帶的檔案上傳類，如果大家需要，可以改下，以上主要就是彈出一個上傳檔案的視窗，在這個視窗中會完成檔案上傳，裁切等操作。點選送出到Index/uploadf

Index/uploadf代碼如下：

<code>$path</code> <code>= </code><code>"uploadfiles/"</code><code>; </code><code>//圖檔上傳位址</code>

<code> </code><code>if</code> <code>(! </code><code>file_exists</code> <code>( </code><code>$path</code> <code>)) {</code>

<code> </code><code>mkdir</code> <code>( </code><code>"$path"</code><code>, 0700 );</code>

<code> </code><code>$tp</code> <code>= </code><code>array</code> <code>(</code>

<code> </code><code>"image/gif"</code><code>,</code>

<code> </code><code>"image/jpeg"</code><code>,</code>

<code> </code><code>"image/png"</code><code>,</code>

<code> </code><code>"image/jpg"</code>

<code> </code><code>if</code> <code>(! in_array ( </code><code>$_FILES</code> <code>[</code><code>"filename"</code><code>] [</code><code>"type"</code><code>], </code><code>$tp</code> <code>)) {</code>

<code> </code><code>if</code> <code>(</code><code>$_FILES</code> <code>[</code><code>"filename"</code><code>] [</code><code>"name"</code><code>]) {</code>

<code> </code><code>$file1</code> <code>= </code><code>$_FILES</code> <code>[</code><code>"filename"</code><code>] [</code><code>"name"</code><code>];</code>

<code> </code><code>$result</code> <code>= move_uploaded_file ( </code><code>$_FILES</code> <code>[</code><code>"filename"</code><code>] [</code><code>"tmp_name"</code><code>], </code><code>$file2</code> <code>);</code>

<code> </code><code>if</code> <code>(</code><code>$result</code><code>) {</code>

<code> </code><code>$this</code><code>->assign(</code><code>'filename'</code><code>,</code><code>$file2</code><code>);</code>

<code> </code><code>$this</code><code>->display();</code>

上傳完成以後會直接跳轉到uploadf.html

100

101

102

103

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>></code>

<code><</code><code>title</code><code>>Insert title here</</code><code>title</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"__STYLE__/js/jquery.min.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"__STYLE__/js/jquery.Jcrop.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"__STYLE__/css/main.css"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"__STYLE__/css/demos.css"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"__STYLE__/css/jquery.Jcrop.css"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>script</code> <code>language</code><code>=</code><code>'javascript'</code><code>></code>

<code> </code><code>jQuery(function($) {</code>

<code> </code><code>var jcrop_api, boundx, boundy,</code>

<code> </code><code>$preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'),</code>

<code> </code><code>xsize = $pcnt.width(), ysize = $pcnt.height();</code>

<code> </code><code>console.log('init', [ xsize, ysize ]);</code>

<code> </code><code>$('#target').Jcrop({</code>

<code> </code><code>onChange : updatePreview,</code>

<code> </code><code>onSelect : updatePreview,</code>

<code> </code><code>aspectRatio : xsize / ysize</code>

<code> </code><code>}, function() {</code>

<code> </code><code>var bounds = this.getBounds();</code>

<code> </code><code>boundx = bounds[0];</code>

<code> </code><code>boundy = bounds[1];</code>

<code> </code><code>jcrop_api = this;</code>

<code> </code><code>$preview.appendTo(jcrop_api.ui.holder);</code>

<code> </code><code>function updatePreview(c) {</code>

<code> </code><code>if (parseInt(c.w) > 0) {</code>

<code> </code><code>var rx = xsize / c.w;</code>

<code> </code><code>var ry = ysize / c.h;</code>

<code> </code><code>width : Math.round(rx * boundx) + 'px',</code>

<code> </code><code>height : Math.round(ry * boundy) + 'px',</code>

<code> </code><code>marginLeft : '-' + Math.round(rx * c.x) + 'px',</code>

<code> </code><code>marginTop : '-' + Math.round(ry * c.y) + 'px'</code>

<code> </code><code>function updateCoords(c){</code>

<code></</code><code>script</code><code>></code>

<code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code>.jcrop-holder #preview-pane {</code>

<code> </code><code>display: block;</code>

<code> </code><code>position: absolute;</code>

<code> </code><code>z-index: 2000;</code>

<code> </code><code>right: -240px;</code>

<code> </code><code>padding: 6px;</code>

<code> </code><code>border: 1px rgba(0, 0, 0, .4) solid;</code>

<code> </code><code>background-color: white;</code>

<code> </code><code>-webkit-border-radius: 6px;</code>

<code> </code><code>-moz-border-radius: 6px;</code>

<code> </code><code>border-radius: 6px;</code>

<code> </code><code>-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code> </code><code>-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code> </code><code>box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code>#preview-pane .preview-container {</code>

<code> </code><code>width: 170px;</code>

<code> </code><code>height: 250px;</code>

<code> </code><code>overflow: hidden;</code>

<code></</code><code>style</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"row"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"span12"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"jc-demo-box"</code><code>></code>

<code> </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"__ROOT__/{$filename}"</code> <code>id</code><code>=</code><code>"target"</code> <code>alt</code><code>=</code><code>"[Jcrop Example]"</code> <code>/></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"preview-pane"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"preview-container"</code><code>></code>

<code> </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"__ROOT__/{$filename}"</code> <code>class</code><code>=</code><code>"jcrop-preview"</code>

<code> </code><code>alt</code><code>=</code><code>"Preview"</code> <code>/></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"clearfix"</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>form</code> <code>action</code><code>=</code><code>"__URL__/uploadf?submit=cut"</code> <code>method</code><code>=</code><code>"post"</code> <code>onsubmit</code><code>=</code><code>"return checkCoords();"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>id</code><code>=</code><code>"x"</code> <code>name</code><code>=</code><code>"x"</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>id</code><code>=</code><code>"y"</code> <code>name</code><code>=</code><code>"y"</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>id</code><code>=</code><code>"w"</code> <code>name</code><code>=</code><code>"w"</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>id</code><code>=</code><code>"h"</code> <code>name</code><code>=</code><code>"h"</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>name</code><code>=</code><code>"filename"</code> <code>value</code><code>=</code><code>"{$filename}"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value</code><code>=</code><code>"Crop Image"</code> <code>/></code>

這裡的代碼比較長，慢慢解釋吧，我直接複制的jcrop demo裡的tutorial3.html，加載他自己需要的js，css。其中

這部分CSS會影響到出來的裁切框的比例。以及預覽處的大小。

<code>$(</code><code>'#target'</code><code>).Jcrop({</code>

<code> </code><code>}, </code><code>function</code><code>() {</code>

<code> </code><code>var</code> <code>bounds = </code><code>this</code><code>.getBounds();</code>

<code> </code><code>jcrop_api = </code><code>this</code><code>;</code>

onChange和onSelect處的意思是裁切的時候要執行的js代碼，說實話，我js和jq的水準很垃圾。是以不管了。

<code>function</code> <code>updatePreview(c) {</code>

<code> </code><code>if</code> <code>(parseInt(c.w) > 0) {</code>

<code> </code><code>var</code> <code>rx = xsize / c.w;</code>

<code> </code><code>var</code> <code>ry = ysize / c.h;</code>

<code> </code><code>width : Math.round(rx * boundx) + </code><code>'px'</code><code>,</code>

<code> </code><code>height : Math.round(ry * boundy) + </code><code>'px'</code><code>,</code>

<code> </code><code>marginLeft : </code><code>'-'</code> <code>+ Math.round(rx * c.x) + </code><code>'px'</code><code>,</code>

<code> </code><code>marginTop : </code><code>'-'</code> <code>+ Math.round(ry * c.y) + </code><code>'px'</code>

這個後面我自己加了一個指派，指派給form表單中。然後在送出到php完成裁切工作

點選送出到uploadf中，可以自己先寫一個圖檔裁切的類:

104

105

106

107

108

109

110

111

112

113

114

115

116

<code>class</code> <code>Imgshot {</code>

<code> </code><code>private</code> <code>$filename</code><code>;</code>

<code> </code><code>private</code> <code>$ext</code><code>;</code>

<code> </code><code>private</code> <code>$x</code><code>;</code>

<code> </code><code>private</code> <code>$y</code><code>;</code>

<code> </code><code>private</code> <code>$x1</code><code>;</code>

<code> </code><code>private</code> <code>$y1</code><code>;</code>

<code> </code><code>private</code> <code>$width</code> <code>= 170;</code>

<code> </code><code>private</code> <code>$height</code> <code>= 250;</code>

<code> </code><code>private</code> <code>$jpeg_quality</code> <code>= 90;</code>

<code> </code><code>public</code> <code>function</code> <code>__construct() {</code>

<code>// log_message ( 'debug', "Img_shot Class Initialized" );</code>

<code> </code><code>* 初始化截圖對象</code>

<code> </code><code>* @param</code>

<code> </code><code>* filename 源檔案路徑全明</code>

<code> </code><code>* width 截圖的寬</code>

<code> </code><code>* height 截圖的高</code>

<code> </code><code>public</code> <code>function</code> <code>initialize(</code><code>$filename</code><code>, </code><code>$x</code><code>, </code><code>$y</code><code>, </code><code>$x1</code><code>, </code><code>$y1</code><code>) {</code>

<code> </code><code>if</code> <code>(</code><code>file_exists</code> <code>( </code><code>$filename</code> <code>)) {</code>

<code> </code><code>$this</code><code>->filename = </code><code>$filename</code><code>;</code>

<code> </code><code>$pathinfo</code> <code>= </code><code>pathinfo</code> <code>( </code><code>$filename</code> <code>);</code>

<code> </code><code>$this</code><code>->ext = </code><code>$pathinfo</code> <code>[</code><code>'extension'</code><code>];</code>

<code> </code><code>$e</code> <code>= </code><code>new</code> <code>Exception ( </code><code>'the file is not exists!'</code><code>, 1050 );</code>

<code> </code><code>throw</code> <code>$e</code><code>;</code>

<code> </code><code>* 根據圖檔的格式，生成不同的截圖</code>

<code> </code><code>public</code> <code>function</code> <code>generate_shot() {</code>

<code> </code><code>switch</code> <code>(</code><code>$this</code><code>->ext) {</code>

<code> </code><code>return</code> <code>$this</code><code>->generate_jpg ();</code>

<code> </code><code>break</code><code>;</code>

<code> </code><code>return</code> <code>$this</code><code>->generate_png ();</code>

<code> </code><code>return</code> <code>$this</code><code>->generate_gif ();</code>

<code> </code><code>default</code> <code>:</code>

<code> </code><code>return</code> <code>false;</code>

<code> </code><code>* 得到生成的截圖的檔案名</code>

<code> </code><code>private</code> <code>function</code> <code>get_shot_name() {</code>

<code> </code><code>$pathinfo</code> <code>= </code><code>pathinfo</code> <code>( </code><code>$this</code><code>->filename );</code>

<code> </code><code>$fileinfo</code> <code>= </code><code>explode</code> <code>( </code><code>'.'</code><code>, </code><code>$pathinfo</code> <code>[</code><code>'basename'</code><code>] );</code>

<code> </code><code>$filename</code> <code>= </code><code>$fileinfo</code> <code>[0] . </code><code>'_small.'</code> <code>. </code><code>$this</code><code>->ext;</code>

<code> </code><code>return</code> <code>'uploadfiles/'</code><code>.</code><code>$filename</code><code>;</code>

<code> </code><code>* 生成jpg格式的圖檔</code>

<code> </code><code>private</code> <code>function</code> <code>generate_jpg() {</code>

<code> </code><code>$img_r</code> <code>= imagecreatefromjpeg ( </code><code>$this</code><code>->filename );</code>

<code> </code><code>$dst_r</code> <code>= ImageCreateTrueColor ( </code><code>$this</code><code>->width, </code><code>$this</code><code>->height );</code>

<code> </code><code>imagecopyresampled ( </code><code>$dst_r</code><code>, </code><code>$img_r</code><code>, 0, 0, </code><code>$this</code><code>->x, </code><code>$this</code><code>->y, </code><code>$this</code><code>->width, </code><code>$this</code><code>->height, </code><code>$this</code><code>->x1, </code><code>$this</code><code>->y1 );</code>

<code> </code><code>imagejpeg ( </code><code>$dst_r</code><code>, </code><code>$shot_name</code><code>, </code><code>$this</code><code>->jpeg_quality );</code>

<code> </code><code>return</code> <code>$shot_name</code><code>;</code>

<code> </code><code>* 生成gif格式的圖檔</code>

<code> </code><code>private</code> <code>function</code> <code>generate_gif() {</code>

<code> </code><code>$img_r</code> <code>= imagecreatefromgif ( </code><code>$this</code><code>->filename );</code>

<code> </code><code>imagegif ( </code><code>$dst_r</code><code>, </code><code>$shot_name</code> <code>);</code>

<code> </code><code>* 生成png格式的圖檔</code>

<code> </code><code>private</code> <code>function</code> <code>generate_png() {</code>

<code> </code><code>$img_r</code> <code>= imagecreatefrompng ( </code><code>$this</code><code>->filename );</code>

<code> </code><code>imagepng ( </code><code>$dst_r</code><code>, </code><code>$shot_name</code> <code>);</code>

這個是我在網上down的.~沒自己寫,自己可以根據需求擴充一下.

裁切操作:

<code> </code><code>$filename</code><code>=</code><code>$this</code><code>->cut();</code>

<code> </code><code>echo</code> <code>"alert(\"上傳成功！\");"</code><code>;</code>

<code> </code><code>echo</code> <code>(</code><code>"<input type=\"button\" name=\"Submit\" value=\"确定\" onClick=\"window.opener.setFile('"</code> <code>.</code><code>$filename</code><code>. </code><code>"');window.close();\">"</code><code>);</code>

<code> </code><code>echo</code> <code>'<img src="'</code><code>.__ROOT__.</code><code>'/'</code><code>.</code><code>$filename</code><code>.</code><code>'" alt="" />'</code><code>;</code>

<code>//裁切的方法</code>

<code> </code><code>function</code> <code>cut(){</code>

<code> </code><code>import(</code><code>'ORG.Net.Imgshot'</code><code>);</code>

<code> </code><code>$imgshot</code><code>=</code><code>new</code> <code>Imgshot();</code>

<code> </code><code>$imgshot</code><code>->initialize(SITE_PATH.</code><code>'/'</code><code>.</code><code>$_REQUEST</code><code>[</code><code>'filename'</code><code>], </code><code>$_REQUEST</code><code>[</code><code>'x'</code><code>], </code><code>$_REQUEST</code><code>[</code><code>'y'</code><code>], </code><code>$_REQUEST</code><code>[</code><code>'x'</code><code>]+</code><code>$_REQUEST</code><code>[</code><code>'w'</code><code>], </code><code>$_REQUEST</code><code>[</code><code>'y'</code><code>]+</code><code>$_REQUEST</code><code>[</code><code>'h'</code><code>]);</code>

<code> </code><code>$filename</code><code>=</code><code>$imgshot</code><code>->generate_shot();</code>

<code> </code><code>return</code> <code>$filename</code><code>;</code>

完成以後會直接echo出最後裁切的圖檔，并且還有一個确定按鈕，點選确定以後，則會把裁切後圖像的位址傳回到最一開始的input[type="text"]。整個例子我還沒有完善，大家可以根據需要自己去了解和完善。好了，如果不會的朋友可以加群:252799167問我。整個例子我已經釋出到ThinkPHP的官網，大家可以下載下傳。

http://www.thinkphp.cn/topic/9154.html

本文轉自 3147972 51CTO部落格，原文連結：http://blog.51cto.com/a3147972/1336561，如需轉載請自行聯系原作者

帶領大家一起做一個ThinkPHP整合jcrop圖檔上傳裁切預覽的例子

繼續閱讀

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

Cloud Studio初體驗

NOSQL安全攻擊

JS生成uuid的四種方法

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印

layui多任務上傳添加進度條