网站后台——用户上传图片剪切
2024-04-09 09:21:34
https://segmentfault.com/a/1190000012818387
JQuery 插件图片裁剪插件cropper.js使用,上传，后台怎么处理
https://blog.csdn.net/wxl1555/article/details/79650062
图片上传裁剪插件cropper.js的API详解
兼容性较好，之前的php也是用得这个。
http://www.webhek.com/post/save-canvas-to-image.html
将画布(canvas)图像保存成本地图片的方法
https://www.jianshu.com/p/5d76ec4c97e7
js base64与canvas base64
https://fengyuanchen.github.io/cropperjs/
cropper官网，注意用jquery版本
代码实例：
@extends("layouts.frame")@section("title"){{$title}}
@stop@section('mydefinecss')<!-- cropper css --><link rel="stylesheet" href="{{ URL::asset('plugins/cropper/cropper.css') }}" /><style>.avatar-wrapper {margin-top: 15px;overflow: hidden;}.avatar-wrapper img {display: block;height: 300px;max-width: 100%;}.avatar-preview {float: left;margin-top: 15px;margin-right: 15px;border: 1px solid #eee;border-radius: 4px;background-color: #fff;overflow: hidden;}.avatar-preview:hover {border-color: #ccf;box-shadow: 0 0 5px rgba(0,0,0,.15);}.avatar-preview img {width: 100%;}.preview-md {height: 100px;width: 100px;}.preview-sm {height: 50px;width: 50px;}.radio-label{margin-bottom: 10px;display: block;width: 120px;}</style>
@endsection@section("content")<div class="card-body"><div class="card-title"><i class="fas fa-list"></i> {{$title}}{{--<a class="btn btn-sm btn-outline-primary ml-5" href="{{route('images.create')}}"> 添加图片</a>--}}</div><div class="row mt-2 mb-2"><div class="col-12"><form action="{{route('images.store')}}" method="post">@csrf<input type="hidden" name="images_guid" value="{{ $images_guid }}"/><input type="hidden" name="originurl" id="originurl" value=""/><input type="hidden" name="largeurl" id="largeurl" value=""/><div class="row mb-4 mt-4"><div class="col-md-4"><div class="form-group row"><label for="fld_title" id="lbl_title"class="fld_Chn_label col-sm-3 col-form-label text-right">标题</label><input type="text" class=" form-control col-md-8"id="fld_title" name="title" value=""></div><div class="form-group row"><label for="fld_titlecolor" id="lbl_titlecolor"class="fld_Chn_label col-sm-3 col-form-label text-right">标题颜色</label><input class=" form-control col-2" id="fld_titlecolor" type="color" name="titlecolor" value="#f8d034"></div><div class="form-group row"><label for="fld_imagetype" id="lbl_imagetype"class="fld_Chn_label col-sm-3 col-form-label text-right">发布到</label><select name="imagetype" class=" form-control col-sm-8" id="fld_imagetype">@foreach($ImagesRsset as $reset)<option value="{{ $reset }}">{{ $reset }}</option>@endforeach</select></div><div class="form-group row"><label for="fld_description" id="lbl_description" class="fld_Chn_label col-sm-3 text-right col-form-label">描述</label><textarea class="form-control col-sm-8" id="fld_description" name="description" ></textarea></div></div><div class="col-md-8"><div class="form-group mx-sm-4 row"><button type="button" class="btn btn-outline-primary thzc-photoup-btn"><i class="far fa-folder"></i> 点击选择照片</button><div class="prj-file-item col-sm-8" style="display: none;"></div><input type="hidden" name="upfileguid" id="file" value=""></div><div class="row" id="afterimg" style="display: none"><div class="col-6"><div class="avatar-wrapper"><img id="image-show" src="" alt="剪切后图片" ></div></div></div><div class="row" id="beforeimg"><div class="col-6"><div class="avatar-wrapper"><img id="image-cropper" src="{{ asset('imgs/nopic.jpg')}}" alt="暂无图片"></div></div><div class="col-6" ><div class="row"><div class="col-12"><div class="avatar-preview preview-md" style="float:left;"></div><div class="avatar-preview preview-sm" style="float:left;"></div></div></div><div class="row" style="margin-top: 20px"><div class="col-12"><div class="avatar-ratio" data-toggle="buttons"><label class="btn btn-primary radio-label" data-option="NaN" ><input type="radio" name="options" id="option1" autocomplete="off" checked> 自由比例</label><label class="btn btn-primary radio-label" data-option="1.7777777777777777" ><input type="radio" name="options" id="option2" autocomplete="off"> 16:9</label><label class="btn btn-primary radio-label" data-option="1.3333333333333333" ><input type="radio" name="options" id="option3" autocomplete="off"> 4:3</label><label class="btn btn-primary radio-label" data-option="1" style="margin-bottom:10px"><input type="radio" name="options" id="option4" autocomplete="off"> 1:1</label></div></div></div><div class="row" style="margin-top: 20px"><div class="col-12"><button type="button" class="btn btn-outline-primary radio-label" onclick="CropperImage()">确定裁剪</button></div></div></div></div></div></div><div class="row" style="margin-top:20px; margin-bottom: 30px"><div class="col-md-12 text-center"><button type="submit" class="btn btn-outline-primary">添加保存</button></div></div></form><input type="file" id="thzc-photo-load" style="display: none"/></div></div></div>
@endsection@section('mydefinejs'){{--cropper.js--}}<script type="text/javascript" src="{{ URL::asset('plugins/cropper/cropper.js')}}"></script><script type="text/javascript" src="{{ URL::asset('plugins/cropper/jquery-cropper.js')}}"></script><script>var $image=$("#image-cropper");var cropper;var options={aspectRatio: NaN,autoCropArea: .7,preview: '.avatar-preview',crop: function(event) {}};// 初始化Cropperfunction InitCropper() {$image.cropper(options);cropper = $image.data('cropper');}//要传送的数据对象var uploadFormData = new FormData();//上传 hostvar uploadHost = '{{route('photo_upload')}}';var uploadHost2 = '{{route('UploadCropperImage')}}';$(document).ready(function () {InitCropper();});// 点击照片上传按钮$(".thzc-photoup-btn").off("click").on("click", function () {choseImage()});var animal_index;//选择文件上传function choseImage() {var filedom = $('#thzc-photo-load');filedom.click();//监听文件选择filedom.change(function (e) {//上传动画animal_index = layer.load(1, {shade: [0.5,'#000'] //0.1透明度的白色背景});//文件选择好了 这里开始上传uploadFormData.append('file', filedom[0].files[0]);uploadImage()});}// 上传文件function uploadImage() {$.ajax({type: "post",headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},url: uploadHost,dataType: "json",processData: false,contentType: false,data: uploadFormData,success: function (data) {$("#beforeimg").prop("style", "");$("#afterimg").prop("style", "display: none;");$("#image").prop("src", data.photourl);$("#originurl").prop("value", data.photoname);// 销毁之前创建的cropper对象，重新初始化$image.cropper('destroy').attr('src', data.photourl).cropper(options);//关闭加载动画layer.close(animal_index);}});}// 确定裁剪图片function CropperImage(){var cropCanvas = $image.cropper('getCroppedCanvas');var base64Url = cropCanvas.toDataURL('image/jpeg');// 生成Blob的图片格式cropCanvas.toBlob(function (blob) {$.ajax({type: "post",headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},url: uploadHost2,dataType: "json",data: {'base64Url':base64Url},success: function (data) {alert('裁剪成功');$("#beforeimg").prop("style", "display: none;");$("#afterimg").prop("style", "");$("#image-show").prop("src", data.photourl);$("#largeurl").prop("value", data.photoname);// 销毁之前创建的cropper对象，重新初始化$image.cropper('destroy').attr('src', data.photourl).cropper(options);//关闭加载动画layer.close(animal_index);},error:function(data){alert("裁剪失败");}})});}//设置比例$(".avatar-ratio > label").on("click",function(){$image.cropper("setAspectRatio", $(this).attr("data-option") );});</script>
@endsection网站后台——用户上传图片剪切相关推荐
- js html 编辑器添加图片不显示,彻底解决ewebeditor网站后台不能上传图片的方法
经我们技术员检查,结果原来是eWebEditor文本编辑器对IE8浏览器的兼容性导致的脚本错误,并不是什么"网站空间.服务器中毒.出问题了"呢! 现就将解决方法公布给大家,方便大家 ...
- 最新ChatGPT商业运营版网站源码+支持AI绘画+支持用户会员套餐+邀请分佣功能+支持后台一键更新+网站后台管理+永久更新！
最新ChatGPT商业运营版网站源码+支持AI绘画+支持用户会员套餐+邀请分佣功能+支持后台一键更新+网站后台管理+永久更新! AI付费创作系统: 如果后续程序有新版,直接在后台一键更新即可! 程序完 ...
- Java实战 SpringBoot 网站开发 留言管理、网站后台留言管理模块、后台网站用户运营数据管理开发。
<QA不加班 > 前言 Java SpringBoot 网站实战开发 留言管理.网站后台留言管理模块.后台网站用户运营数据管理开发. Java 网站开发网站运营后台管理和用户留言板功能后端 ...
- 最新ChatGPT网站源码/支持用户注册付费套餐/支持Ai绘画/支持用户会员套餐/邀请分佣功能/支持后台一键更新/网站后台管理/永久更新
前言 ChatGPT 是一个基于 GPT-3.5/GPT-4 模型的对话系统,它主要用于处理自然语言对话.ChatGPT 虽然才发布几天时间,但是就已经火爆全网了.然后陆陆续续已经出现了各式版本,今天 ...
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之功能实现
[千纸诗书]-- PHP/MySQL二手书网站后台开发之功能实现 前言:前一篇温习了网站开发需要掌握的基础知识,这一篇重点梳理一下各个功能模块的[详细设计与实现].项目github地址:https:/ ...
- facebook与人人网的网站后台架构对比
要问时下什么类型的站点人气最旺?答案当属SNS网站.短短几年的时间,SNS便迅速确立了Web 2.0核心的地位.用户的增长量之快更是让人咂舌,而Facebook访问量首次超越Google的消息也让人觉 ...
- 技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...
- 整合公司3个网站后台管理子系统的经验总结 - 实现多系统的单点登录（ASP.NET + ASP）...
公司有3个网站的后台管理系统,其中2个是ASP编写的网站后台管理系统,1个是ASP.NET编写的网站后台管理系统,各自的用户权限管理,后台的风格都不一样,虽然用起来很好用,但是还是感觉有些凌乱一些,公 ...
- 51CTO专访人人网黄晶：SNS网站后台架构探秘
[51CTO独家专访]51CTO在此之前报道过一篇名为<世界最大的PHP站点 Facebook后台技术探秘>的文章,让我们了解到Facebook是如何保证5亿用户的系统一直保持稳定.可靠运 ...
最新文章
- 生成器模式(Builder)解析例子
- 1.2安装配置VMwaer虚拟机
- 洛谷——P1051 谁拿了最多奖学金
- SAP UI5 Globalization - date format讨论
- Unity-Find-Script-References 查找脚本的引用
- eventsource前台怎么接收一个对象数据_Java开发经验总结篇（1）——数据保存的整洁方法...
- 35岁小贝荣膺终身成就奖
- python建立文件数据库_python学习-- Django根据现有数据库,自动生成models模型文件...
- linux awk 某一列合并,利用shell中awk和xargs以及sed将多行多列文本中某一列合并成一行...
- python从其他文件导入模块_Python模块可以使用其他文件的导入吗？
- 21天jmeter打卡 day1
- html查看ie版本,如何查看ie版本？三种IE版本查看方法介绍
- java出现圅_java获取汉字拼音首字母A
- Java根据出生年月日计算年龄
- jquery获取style
- Axure中继器使用
- NOIP蒟蒻组初赛攻略
- 如何查看电脑能否加内存条
- SpringBoot中MybatisX插件的简单使用教程（超详细！！）
- 基于javaweb的房地产客户关系管理系统(java+jsp+javascript+servlet+mysql)