前端压缩图片并转化为base64编码,后端laravel接受并存储图片
第一步:前端压缩图片
function dealImage(path, obj) { var img = new Image(); img.src = path; img.onload = function () { var that = this; var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = obj.quality || 0.7; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } var base64 = canvas.toDataURL('image/jpeg', quality); dd = base64; } return dd; } var dd = dealImage("img/timg.jpg", {width: 400, quality: 0.7}); window.onload = function () { console.log(dd); } 获取到base64编码后,通过post方式传到后台服务器,和表单提交数据一样。
第二步:laravel 设置
要获得前端传递的数据,在Middleware/VerifyCsrToken.php中把接口地址添加例外,如下
class VerifyCsrfToken extends Middleware { protected $except = [ 'updateUserInfo', ]; }
另外可能还会涉及数据跨域问题,在laravel接口控制器中添加允许跨域代码,如下:
<?php namespace App\Http\Controllers; header('Access-Control-Allow-Origin:*');
控制器接受代码如下:
$data=$request->all(); $imgdata=$imgdata['imgurl']; $base64_str = substr($imgdata, strpos($imgdata, ",")+1); $image=base64_decode($base64_str); $imgname=rand(1000,10000).time().'.png'; Storage::disk('public')->put($imgname,$image); echo $imgname;//获取到图片名称后存储到数据库中,供以后使用。
图片使用:
首页使用 Artisan 命令 storage:link
来创建符号链接:
php artisan storage:link
在视图中即可通过asset()使用图片,代码如下:
<img src="{{asset('storage/lijian.png')}}">