{"id":29486,"date":"2021-06-13T17:25:00","date_gmt":"2021-06-13T14:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29486"},"modified":"2021-10-17T04:16:33","modified_gmt":"2021-10-17T01:16:33","slug":"andra-storlek-pa-bild-i-php-med-hjalp-av-interventionsbildbibliotek","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/andra-storlek-pa-bild-i-php-med-hjalp-av-interventionsbildbibliotek\/","title":{"rendered":"\u00c4ndra storlek p\u00e5 bild i PHP med hj\u00e4lp av interventionsbildbibliotek"},"content":{"rendered":"<p>Letar du efter hur du \u00e4ndrar storlek p\u00e5 bilder i PHP? N\u00e4r vi arbetar med webbapplikationen m\u00e5ste vi skapa olika miniatyrversioner av originalbilden. Miniatyrbilden \u00e4r den \u00e4ndrade storleken p\u00e5 din ursprungliga bild. I den h\u00e4r artikeln studerar vi hur man laddar upp och \u00e4ndrar storlek p\u00e5 bilder i PHP.<\/p>\n<h3>Varf\u00f6r ska vi \u00e4ndra storlek p\u00e5 bilder?<\/h3>\n<p>P\u00e5 webbplatsen finns det flera scenarier d\u00e4r vi beh\u00f6ver visa en kortversion av en stor bild. Ett popul\u00e4rt exempel \u00e4r bildgalleriet. I galleriet brukade vi visa en lista med sm\u00e5 bilder. N\u00e4r en anv\u00e4ndare klickar p\u00e5 den lilla bilden \u00f6ppnas den stora bilden i popup-f\u00f6nstret. Ett annat exempel \u00e4r att visa relaterade artiklar d\u00e4r vi visar sm\u00e5 bilder tillsammans med titeln och beskrivningen av ett inl\u00e4gg.<\/p>\n<p>I dessa scenarier m\u00e5ste vi skapa en liten bild (miniatyrbild) med v\u00e5r ursprungliga bild. En liten miniatyrbild minskar storleken p\u00e5 dina sidor. Eftersom du anv\u00e4nder en liten miniatyrbild kr\u00e4ver webbl\u00e4saren l\u00e5g bandbredd f\u00f6r att ladda bilden. Det kommer att l\u00e4gga till n\u00e5gra f\u00f6rdelar p\u00e5 webbplatsen. N\u00e5gra av dem \u00e4r:<\/p>\n<ul>\n<li>F\u00f6rb\u00e4ttrar serverprestanda<\/li>\n<li>Minska bandbredd<\/li>\n<li>F\u00f6rb\u00e4ttra sidhastigheten<\/li>\n<\/ul>\n<p>Med det sagt, l\u00e5t oss ta en titt p\u00e5 hur du kan \u00e4ndra storlek p\u00e5 bilden i PHP.<\/p>\n<h3>Komma ig\u00e5ng<\/h3>\n<p><a href=\"http:\/\/image.intervention.io\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Intervention Image<\/a> \u00e4r ett bibliotek med \u00f6ppen k\u00e4llkod som fungerar som ett verktyg f\u00f6r bildf\u00f6r\u00e4ndring. Under huven anv\u00e4nder Intervention Image GD Library och Imagick f\u00f6r bildbehandling och manipulation.<\/p>\n<p>F\u00f6r att komma ig\u00e5ng m\u00e5ste du installera Intervention Image-biblioteket i din applikation. Jag rekommenderar att du anv\u00e4nder <a href=\"https:\/\/getcomposer.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Composer<\/a> f\u00f6r installation av ett bibliotek.<\/p>\n<p>\u00d6ppna terminalen i din projektkatalog och k\u00f6r kommandot nedan.<\/p>\n<pre><code>composer require intervention\/image<\/code><\/pre>\n<p>N\u00e4r du har installerat biblioteket m\u00e5ste du inkludera dess milj\u00f6 i din applikation. F\u00f6r detta, inkludera nedanf\u00f6r tv\u00e5 rader till PHP-filen.<\/p>\n<pre><code>&lt;?php\n\/\/ include composer autoload\nrequire 'vendor\/autoload.php';\n\u00a0\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n<p>F\u00f6r att ladda upp och \u00e4ndra storlek p\u00e5 bilden beh\u00f6ver vi ett formul\u00e4r d\u00e4r man kan bl\u00e4ddra i bilden och trycka p\u00e5 knappen Skicka. Anv\u00e4nd nedanst\u00e5ende HTML som inneh\u00e5ller filinmatningen och en skicka-knapp.<\/p>\n<pre><code>&lt;form method=\"post\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"file\" name=\"image\" \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" name=\"submit\" value=\"Submit\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<h3>\u00c4ndra storlek p\u00e5 bild i PHP med hj\u00e4lp av interventionsbild<\/h3>\n<p>Vi har installerat biblioteket och skapat ett formul\u00e4r. D\u00e4refter m\u00e5ste vi ladda upp och \u00e4ndra storlek p\u00e5 bilden i farten. Jag ska skapa tv\u00e5 kataloger <code>uploads<\/code>och <code>thumbnails<\/code>. I <code>uploads<\/code>mappen lagrar vi originalbilden. Miniatyrversionen av bilden lagras i <code>thumbnails<\/code>katalogen.<\/p>\n<p>Anv\u00e4nd koden nedan som lagrar originalversionen och miniatyrversionen av bilden i <code>uploads<\/code>respektive <code>thumbnails<\/code>kataloger.<\/p>\n<pre><code>&lt;?php\nrequire 'vendor\/autoload.php';\n\u00a0\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\n$allowed_mime_type = array('image\/jpg', 'image\/jpeg', 'image\/png', 'image\/gif');\n\u00a0\nif (isset($_POST['submit'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['image']['type'], $allowed_mime_type)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = time().'_'.$_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'uploads\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!file_exists('uploads\/thumbnails')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('uploads\/thumbnails', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = 'uploads\/thumbnails\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img-&gt;resize(300, null, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint-&gt;aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img-&gt;save($thumbnailpath);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>I ovanst\u00e5ende kod passerade jag bredden som 300 och \u00e4ndrade storlek p\u00e5 bilden genom att beh\u00e5lla deras bildf\u00f6rh\u00e5llande. Du kan skicka breddv\u00e4rdet enligt dina krav. Det rekommenderas att beh\u00e5lla bildf\u00f6rh\u00e5llandet n\u00e4r du \u00e4ndrar storlek p\u00e5 bilden. Med bildformat str\u00e4cker sig inte bilden. Men om du letar efter en h\u00e5rd sk\u00f6rd byter du ut nedanst\u00e5ende rader<\/p>\n<pre><code>$img-&gt;resize(300, null, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint-&gt;aspectRatio();\n});<\/code><\/pre>\n<p>Med<\/p>\n<pre><code>$img-&gt;resize(300, 150)-&gt;save($thumbnailpath);<\/code><\/pre>\n<h3>Slutsats<\/h3>\n<p>I den h\u00e4r handledningen studerade vi hur man \u00e4ndrar storlek p\u00e5 bilder genom att bibeh\u00e5lla bildformatet. Vi skrev ocks\u00e5 en kod som kommer att besk\u00e4ra bilden h\u00e5rt. Intervention Bildbibliotek ger n\u00e5gra fler alternativ f\u00f6r en <code>resize<\/code>metod. Du kan l\u00e4sa mer om det i deras <a href=\"http:\/\/image.intervention.io\/api\/resize\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentation<\/a>.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/andra-storlek-pa-bild-i-laravel-med-hjalp-av-interventionsbildbibliotek\/\" title=\"\u00c4ndra storlek p\u00e5 bild i Laravel med hj\u00e4lp av interventionsbildbibliotek\">\u00c4ndra storlek p\u00e5 bild i Laravel med hj\u00e4lp av interventionsbildbibliotek<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/andra-storlek-pa-bild-i-php-med-tinypng\/\" title=\"\u00c4ndra storlek p\u00e5 bild i PHP med TinyPNG\">\u00c4ndra storlek p\u00e5 bild i PHP med TinyPNG<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/dra-och-slapp-filoverforing-med-javascript-och-php\/\" title=\"Dra och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP\">Dra och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r artikeln studerar vi hur man \u00e4ndrar storlek p\u00e5 bilder i PHP med hj\u00e4lp av Intervention Image Library. Att anv\u00e4nda en miniatyrversion minskar storleken p\u00e5 webbsidan<\/p>\n","protected":false},"author":1,"featured_media":21621,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[279],"tags":[850],"class_list":["post-29486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=29486"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/21621"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=29486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=29486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=29486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}