Einfache Implementierung des Zuschneidens und Speicherns von Bildern mithilfe von Javascript

Dieser Artikel stellt hauptsächlich die einfache Implementierung von Javascript zum Zuschneiden und Speichern von Bildern vor. Jetzt kann ich ihn mit Ihnen teilen.

Bilder zuschneiden Ich bin in letzter Zeit bei der Arbeit wieder auf dieses Bedürfnis gestoßen, daher dachte ich, ich würde es einfach klären. Die Methode kann bei Bedarf von jedem und mir selbst verwendet werden Zur Implementierung nutze 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, die heutige 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 ein paar Gedanken. Klicken Sie zur Erinnerung:

Erstens: Vergessen Sie nicht, das Plug-in am Kopf der Seite vorzustellen:

　　<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: Wenn Sie ein scharfes Auge haben, haben Sie vielleicht bemerkt, dass es in JS ein Timing gibt, und gleichzeitig sind Sie verwirrt ? 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 Backend-PHP-Verarbeitung, Version 3.1.3

Fügen Sie den Code ein:

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

}

Hier finden Sie eine Reihe von Methoden zum Erstellen von Bildern in der GD-Bibliothek. Das Wichtigste ist

, das das Originalbild entsprechend der angegebenen Zuschneideposition und Zuschneidegröße kopiert Wenn der Seitenbenutzer das Bild zuschneidet

imagecopy() , bearbeitet das Frontend das Bild nicht wirklich, sondern ruft beim Zuschneiden die Koordinatenposition und die Zuschneidegröße ab und übermittelt sie dann an PHP Betrieb! !

Verwandte Empfehlungen:

So verwenden Sie JavaScript, um zufällig eine bestimmte Anzahl von Passwörtern zu generieren

So verwenden Sie JavaScripts % Interlacing durchführen. Farbwechsel

Das obige ist der detaillierte Inhalt vonEinfache Implementierung des Zuschneidens und Speicherns von Bildern mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!