Einfacher Beispielcode zum Zuschneiden und Speichern von Bildern mit Javascript

Das Zuschneiden von Bildern ist uns in letzter Zeit sehr vertraut. Ich bin bei der Arbeit wieder auf dieses Bedürfnis gestoßen, also dachte ich, ich würde es einfach in Ordnung bringen. Die Methode kann bei Bedarf von jedem und mir selbst nachgelesen werden, daher stellt dieser Artikel sie hauptsächlich vor. Um eine einfache Implementierung mit Javascript zum Zuschneiden und Speichern von Bildern zu erreichen, verwende ich das THINKPHP-Framework für die Back-End-PHP-Verarbeitung. Freunde in Not können darauf zurückgreifen.

Vorwort

Meiner Meinung nach gibt es nicht viele Teile der Seite, die flexibler in der Gestaltung sind, wie zum Beispiel das Schieben Bestätigungscodes und Bildzuschnitt. Warten auf ein besseres Interaktionsdesign.

Als ich anfing zu arbeiten, wollte ich diese Dinge verstehen, aber ich hatte nie das Bedürfnis, meine freie Zeit zu nutzen und sie den ganzen Nachmittag lang zu studieren , und ich habe mich darauf vorbereitet, gefoltert zu werden. Mein

ist immer noch relativ schwach.

Erzielen Sie den Effekt:

Nachdem der Benutzer zum Hochladen des Bildes geklickt hat, werden auf der Seite das hochgeladene Bild sowie ein Zuschneidefeld und zwei angezeigt Vorschaubereiche werden angezeigt. Klicken Sie abschließend auf die Schaltfläche „Zuschneiden“, um das zugeschnittene Bild auf dem Server zu speichern.

Der Effekt ist sehr einfach. Es gibt zwei Schwierigkeiten, auf die ich im gesamten Prozess gestoßen bin. Der erste ist der JS-Effekt des Zuschneidens und der zweite ist die Verarbeitung von Bilddaten.

Für die erste Frage habe ich ein Plug-in im Internet zitiert. Die Benutzerzufriedenheit mit dem Zuschneidevorgang kann meines Erachtens nur als durchschnittlich angesehen werden, da dies nur der Fall ist Obwohl es acht Zieheinstellungen am Rand gibt, skaliert der Rahmen beim Ziehen des Rahmens immer noch entsprechend dem Quadrat, was für mich nicht sehr zufriedenstellend ist.

Die Implementierungsmethode ist wie folgt:

Das Folgende ist ein einfaches Seitendesign:

<p style="float:left;"><img id="target"></p>
<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></p>
<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></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>

Das Folgende ist der JS-Code:

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);

}

Hier sind zwei Erinnerungen:

Eins : Vergessen Sie nicht, am Kopf der Seite ein Plug-in einzuführen:

　　<script src="/plug/js/jquery.min.js" 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" />

Zweitens: Einige Leute mit scharfen Augen haben möglicherweise ein Timing in JS gesehen und sind gleichzeitig verwirrt. Ist das nicht etwas unnötig? Eigentlich nein, es dauert einige Zeit, das Bild auf JS hochzuladen und auf die Seite zu laden. Die Bedeutung dieses Timings besteht darin, zu warten, bis das Bild auf der Seite geladen wird, bevor der Zuschneideeffekt geladen wird. Dies wird auch nach wiederholten Experimenten erreicht Praktiken.

Ich verwende das THINKPHP-Framework für die Back-End-PHP-Verarbeitung. Die Version ist 3.1.3

Fügen Sie den Code ein:

Hier ist der Aufruf Es gibt eine Reihe von Methoden zum Erstellen von Bildern in der GD-Bibliothek. Die wichtigste ist

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);
　　}

}

, die das Originalbild entsprechend der angegebenen Zuschneideposition und Zuschneidegröße kopiert . Der Seitenbenutzer schneidet das Bild zu. Tatsächlich bearbeitet das Frontend das Bild nicht, sondern erhält beim Zuschneiden die Koordinatenposition und die Zuschneidegröße und übermittelt es dann zur Bearbeitung an PHP! !

imagecopy()

Zusammenfassung

Das obige ist der detaillierte Inhalt vonEinfacher Beispielcode zum Zuschneiden und Speichern von Bildern mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!