{"id":28908,"date":"2021-05-30T18:51:00","date_gmt":"2021-05-30T15:51:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28908"},"modified":"2021-10-17T04:30:57","modified_gmt":"2021-10-17T01:30:57","slug":"hur-man-laddar-upp-beskar-och-andrar-storlek-pa-bild-med-jquery-och-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-laddar-upp-beskar-och-andrar-storlek-pa-bild-med-jquery-och-php\/","title":{"rendered":"Hur man laddar upp, besk\u00e4r och \u00e4ndrar storlek p\u00e5 bild med jQuery och PHP"},"content":{"rendered":"

Om du driver en webbplats kanske du vill besk\u00e4ra bilden i vissa scenarier. L\u00e5t oss s\u00e4ga att du vill till\u00e5ta anv\u00e4ndaren att besk\u00e4ra sina profilbilder innan de laddas upp. I den h\u00e4r artikeln studerar vi hur du laddar upp, besk\u00e4ra och \u00e4ndra storlek p\u00e5 bilden med imgAreaSelect och PHP.<\/p>\n

Vi kan s\u00e4ga att n\u00e4r vi besk\u00e4r bilden \u00e4ndrar vi faktiskt storleken p\u00e5 den genom att justera med de angivna koordinaterna f\u00f6r den beskurna delen.<\/p>\n

imgAreaSelect<\/a> \u00e4r ett jQuery-plugin som ger en funktion f\u00f6r att besk\u00e4ra bilderna. Det \u00e4r ett l\u00e4tt plugin och l\u00e4tt att anv\u00e4nda.<\/p>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du anv\u00e4nda imgAreaSelect plugin och Intervention Image<\/a> Library. Med imgAreaSelect v\u00e4ljer vi det bildomr\u00e5de som beh\u00f6ver besk\u00e4ras och Internention Image-biblioteket hj\u00e4lper oss att lagra den ursprungliga och kopierade versionen av en bild p\u00e5 servern.<\/p>\n

Med detta sagt, l\u00e5t oss ta en titt p\u00e5 hur du laddar upp, besk\u00e4r och \u00e4ndrar storlek p\u00e5 bilden med jQuery och PHP.<\/p>\n

Installation<\/h3>\n

Ladda ner imgAreaSelect-<\/a> plugin fr\u00e5n den givna l\u00e4nken. F\u00f6r installation av Interventon Image rekommenderar jag att jag anv\u00e4nder Composer<\/a>. K\u00f6r kommandot nedan i projektets rotkatalog f\u00f6r att installera Intervention Image-biblioteket.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
N\u00e4r du \u00e4r klar ser du till att din katalogstruktur ser ut som en sk\u00e4rmdump nedan.<\/p>\n
\"Hur<\/a><\/p>\n
Hur man anv\u00e4nder imgAreaSelect<\/h3>\n
F\u00f6r att kunna anv\u00e4nda imgAreaSelect m\u00e5ste vi f\u00f6rst inkludera deras CSS- och JS-fil tillsammans med jQuery-biblioteket.<\/p>\n
<link rel=\"stylesheet\" href=\"css\/imgareaselect.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"js\/jquery.imgareaselect.js\"><\/script><\/code><\/pre>\n
D\u00e4refter kr\u00e4ver vi ett enkelt formul\u00e4r d\u00e4r anv\u00e4ndaren kan bl\u00e4ddra i bilden och skicka den f\u00f6r serverbearbetning.<\/p>\n
<form action=\"crop.php\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0Upload Image: <input type=\"file\" name=\"image\" id=\"image\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/><br><br>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n\u00a0\n<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p><\/code><\/pre>\n
Ovanst\u00e5ende formul\u00e4r visar knappen f\u00f6r inmatning av filer och skicka. Jag har tagit dolda f\u00e4lt i formen som kommer att beh\u00f6va besk\u00e4ra bilden p\u00e5 serversidan. I grund och botten skickar dessa dolda f\u00e4lt koordinater f\u00f6r bilden f\u00f6r att besk\u00e4ra den.<\/p>\n
N\u00e4r anv\u00e4ndaren bl\u00e4ddrar i bilden, visar vi bilden d\u00e4r en anv\u00e4ndare kan v\u00e4lja det omr\u00e5de som de beh\u00f6ver besk\u00e4ra. Koden nedan g\u00f6r det m\u00f6jligt f\u00f6r anv\u00e4ndaren att f\u00f6rhandsgranska bilden och v\u00e4lja ett omr\u00e5de p\u00e5 bilden som ska besk\u00e4ras.<\/p>\n
<script>\njQuery(function($) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \"#image\", function(){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.getElementById(\"image\").files[0]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.attr('src', oFREvent.target.result).fadeIn();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});\n<\/script><\/code><\/pre>\n
\u00d6verf\u00f6r, besk\u00e4r och \u00e4ndra storlek p\u00e5 bild p\u00e5 serversidan<\/h3>\n
Vid inl\u00e4mning av formul\u00e4ret omdirigeras det till crop.php<\/code>filen d\u00e4r vi laddar upp och besk\u00e4r bilden p\u00e5 serversidan. Den h\u00e4r filen accepterar filinmatning och koordinater f\u00f6r bilden f\u00f6r besk\u00e4rning.<\/p>\n
L\u00e5t oss f\u00f6rst inkludera milj\u00f6n i Intervention Image-biblioteket.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Jag ska anv\u00e4nda en crop()<\/code>metod f\u00f6r ett bibliotek f\u00f6r att skapa den beskurna versionen av originalbilden. Parametrar f\u00f6r funktionen crop() \u00e4r bredd, h\u00f6jd och koordinater f\u00f6r x-axeln och y-axeln. Du kan l\u00e4sa mer om det i deras dokumentation<\/a>.<\/p>\n
crop.php<\/strong><\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\nif(isset($_POST['submit'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = $_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'images\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images\/crop')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images\/crop', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ crop image\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = 'images\/crop\/'. $filename;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<img src='\". $croppath .\"' \/>\";\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Det \u00e4r allt! Nu om du testar fl\u00f6det f\u00e5r du den ursprungliga och beskurna versionen av bilderna lagrade under katalogerna ’bilder’ respektive ’besk\u00e4rning’.<\/p>\n
St\u00e4ll in maximal bredd p\u00e5 bilden<\/h3>\n
Ibland kanske anv\u00e4ndaren vill definiera maximal bredd f\u00f6r beskurna versioner av en bild. imgAreaSelect erbjuder flera alternativ som aspectRatio, maxWidth, maxHeight, etc. f\u00f6r att anpassa det slutliga resultatet av en bild. En anv\u00e4ndare kan anv\u00e4nda alternativet maxWidth f\u00f6r att st\u00e4lla in maximal bredd f\u00f6r bilden.<\/p>\n
$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0maxWidth: '1000', \/\/ this value is in pixels\n\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du laddar upp, besk\u00e4ra och \u00e4ndra storlek p\u00e5 bilden med jQuery och PHP. Jag skulle vilja veta dina tankar i kommentarf\u00e4ltet nedan.<\/p>\n
relaterade artiklar<\/h4>\n