octobercms 图片裁剪插件

jcc123 的个人博客 / 3 / 1 / 创建于 6年前 / 更新于 6年前

octobercms Widget 小部件

小部件列表

自定义图片裁剪插件

自定义图片裁剪插件使用场景

有这样的一个场景，你要发布一个活动，而活动的封面图需要固定比例大小，而octobercms并没有提供这样的一个插件（提供的只是一个从后台获取图片并裁剪，上传到一个关联模型，并不是一个字段里），而目前遇到了这样的一个需求，实现出来，方便大家。

要求

图片最后是上传到阿里云oss 依赖 oc-plugin-oss

如何使用

1 默认不裁剪

 image:
    label: 封面图
    type: Jc91715\Widget\FormWidgets\CustomFileUpload

2 启用裁剪,宽高比为1

 image:
    label: 封面图
    type: Jc91715\Widget\FormWidgets\CustomFileUpload
    ifCrop: 1
    radio: 1

3 页面上多个使用需定义一些额外参数，这些额外参数是为了防止和其它引入的元素冲突

    image1:
        label: 封面图2
        type: Jc91715\Widget\FormWidgets\CustomFileUpload
        ifCrop: 1
        radio: 1
        inputId: custom-input-src2
        inputFileId: file-change2
        imgId: img-src-temp2
        cropId: crop-id2

在一个页面上引入多个，这四个参数依次递增即可

    inputId: custom-input-src2
    inputFileId: file-change2
    imgId: img-src-temp2
    cropId: crop-id2

octobercms octobercms-plugin

本作品采用《CC 协议》，转载必须注明作者和本文链接

Make everything simple instead of making difficulties as simple as possible

jcc123

课程读者 452 声望

developer @ wintercms

Make everything simple instead of making difficulties as simple as p...

1 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

作品分享 - 腾讯云智 AI 图像服务的 Laravel SDK 10 / 4 |

博客

Laravel Query Builder 复杂查询案例：子查询实现分区查询 partition by 18 / 4 |

博客

Laravel-smartmd 一个实用 Markdown 编辑器兼容大部分主流的 Markdown 语法解析，包括数学公式、流程图等 24 / 9 |

博客

如何在 Ubuntu 上安装 OctoberCMS 11 / 2 |

OctoberCMS －通往十月之路 11 / 13 |

讨论数量: 1

tttt2356

0 声望

PixPro这个插件的一键裁切太实用了，各种尺寸需求都能搞定，处理效率直接翻倍！建议试试：github.com/lambortao/PixPro

4个月前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

developer @ wintercms

私信

所有博文

文章归档

1 篇 2024 年 9 月 1 篇 2024 年 2 月 1 篇 2024 年 1 月 1 篇 2022 年 12 月 1 篇 2022 年 8 月 1 篇 2022 年 3 月 1 篇 2021 年 10 月 1 篇 2021 年 8 月 1 篇 2021 年 7 月 2 篇 2021 年 4 月 3 篇 2021 年 3 月 1 篇 2021 年 2 月 1 篇 2020 年 12 月 3 篇 2020 年 10 月 2 篇 2020 年 9 月 2 篇 2020 年 4 月 3 篇 2019 年 11 月 1 篇 2019 年 10 月 3 篇 2019 年 8 月 3 篇 2019 年 7 月 4 篇 2019 年 6 月 1 篇 2019 年 5 月 3 篇 2019 年 4 月 2 篇 2019 年 2 月 1 篇 2019 年 1 月 1 篇 2018 年 10 月 3 篇 2018 年 9 月 1 篇 2018 年 7 月 2 篇 2018 年 5 月 1 篇 2018 年 2 月 1 篇 2017 年 10 月 1 篇 2017 年 9 月 1 篇 2017 年 7 月 1 篇 2017 年 6 月

1年前 php 并发和请求次数限制的实现 1年前 php linux ip 和 mac ip 终于互通了 1年前一切皆是流 2年前基于reactphp的内网穿透 3年前基于gogs和drone的一个轻量级的开发部署自动化流程

84 3 条 sql 是实现知乎评论，7 条 sql 实现点赞 + 评论，且可扩展 37 无限极分类 34 一个基于 Laravel5.4+Vue+Pusher 实时聊天的小 demo 26 Laravel pivot 添加 load 26 colorUI-扫码点餐

博客标签

php

laravel

reactphp

vue

octobercms

octobercms-plugin

分享模块

成为赞助商

octobercms 图片裁剪插件

octobercms Widget 小部件

小部件列表

自定义图片裁剪插件使用场景

要求

如何使用

1 默认不裁剪

2 启用裁剪,宽高比为1

3 页面上多个使用需定义一些额外参数，这些额外参数是为了防止和其它引入的元素冲突

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

octobercms 图片裁剪插件

octobercms Widget 小部件

小部件列表

自定义图片裁剪插件使用场景

要求

如何使用

1 默认不裁剪

2 启用裁剪,宽高比为1

3 页面上多个使用需定义一些额外参数，这些额外参数是为了防止和其它引入的元素冲突

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录