我是靠谱客的博主 冷艳蜗牛，最近开发中收集的这篇文章主要介绍富文本 和 图片裁切一, 富文本编辑器的实现步骤二, 图片裁切的实现步骤三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)四, 将裁剪后的图片，输出为文件五, 实际应用六, 提交数据完成最后的添加，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
富文本编辑器和图片裁切
- 一, 富文本编辑器的实现步骤
- 1. 添加如下的 `layui `表单行：
- 2. 导入富文本必须的 `script `脚本：
- 3. 调用 `initEditor() 方法，`初始化富文本编辑器：
- 二, 图片裁切的实现步骤
- 1. 在` `中导入 `cropper.css `样式表：
- 2. 在 `` 的结束标签之前，按顺序导入如下的 `js` 脚本：
- 3. 在表单中，添加如下的表单行结构：
- 4. 美化的样式
- 5. 实现基本裁剪效果：
- 三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)
- 1. 拿到用户选择的文件
- 2. 根据选择的文件，创建一个对应的 URL 地址：
- 3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
- 四, 将裁剪后的图片，输出为文件
- 五, 实际应用
- 六, 提交数据完成最后的添加
一, 富文本编辑器的实现步骤
1. 添加如下的 layui表单行：
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章内容</label>
<!-- 为富文本编辑器外部的容器设置高度 -->
<div class="layui-input-block" style="height: 400px;">
<!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
<textarea name="content"></textarea>
</div>
</div>
2. 导入富文本必须的 script脚本：
<!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>
3. 调用 initEditor() 方法，初始化富文本编辑器：
// 初始化富文本编辑器
原版没有这是后包的函数
initEditor()
二, 图片裁切的实现步骤
1. 在<head>中导入 cropper.css样式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
2. 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
3. 在表单中，添加如下的表单行结构：
<div class="layui-form-item">
<!-- 左侧的 label -->
<label class="layui-form-label">文章封面</label>
<!-- 选择封面区域 -->
<div class="layui-input-block cover-box">
<!-- 左侧裁剪区域 -->
<div class="cover-left">
<img id="image" src="/assets/images/sample2.jpg" alt="" />
</div>
<!-- 右侧预览区域和选择封面区域 -->
<div class="cover-right">
<!-- 预览的区域 -->
<div class="img-preview"></div>
<!-- 选择封面按钮 -->
<button type="button" class="layui-btn layui-btn-danger">选择封面</button>
</div>
</div>
</div>
4. 美化的样式
/* 封面容器的样式 */
.cover-box {
display: flex;
}
/* 左侧裁剪区域的样式 */
.cover-left {
width: 400px;
height: 280px;
overflow: hidden;
margin-right: 20px;
}
/* 右侧盒子的样式 */
.cover-right {
display: flex;
flex-direction: column;
align-items: center;
}
/* 预览区域的样式 */
.img-preview {
width: 200px;
height: 140px;
background-color: #ccc;
margin-bottom: 20px;
overflow: hidden;
}
5. 实现基本裁剪效果：
// 1. 初始化图片裁剪器
var $image = $('#image')
// 2. 裁剪选项
var options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)
三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)
1. 拿到用户选择的文件
var file = e.target.files[0]
2. 根据选择的文件，创建一个对应的 URL 地址：
var newImgURL = URL.createObjectURL(file)
3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
$image
.cropper('destroy')
// 销毁旧的裁剪区域
.attr('src', newImgURL)
// 重新设置图片路径
.cropper(options)
// 重新初始化裁剪区域
四, 将裁剪后的图片，输出为文件
$image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 400,
height: 280
})
.toBlob(function(blob) {
// 将 Canvas 画布上的内容，转化为文件对象
// 得到文件对象后，进行后续的操作
})
五, 实际应用
// 一. 初始化
let form = layui.form;
// 1. 初始化图片裁剪器
let $image = $('#image')
// 2. 裁剪选项
let options = {
aspectRatio: 400 / 280,
preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)
// 二. 为 选择封面 按钮, 添加点击事件
$('button:contains("选择封面")').on('click', function () {
$('#file').trigger('click') // 调用文件域的点击事件
})
// 三. 文件域内容切换的时候, 更换裁剪区的图片
$('#file').on('change', function () {
// 1 找文件对象
let fileObj = this.files[0]
// 2 生成临时的 url
let url = URL.createObjectURL(fileObj)
// 3 替换裁剪图片 (先销毁剪切框 --> 更换图片的src --> 重新创建剪裁框)
$image.cropper('destroy').attr('src', url).cropper(options)
})
六, 提交数据完成最后的添加
// 为表单添加提交事件, 阻止表单的默认提交
$('form').on('submit', function (e) {
e.preventDefault()
// 收集数据
let fd = new FormData(this); // FormData 是根据表单各项的 name 属性收集值得
// 获取 tinymce 插件的内容，并把内容添加到 FormData 对象中
fd.set('content', tinyMCE.activeEditor.getContent());
// 剪裁图片，得到 canvas(画布格式的图片)
let canvas = $image.cropper('getCroppedCanvas', {
width: 400,
height: 280
})
// 把canvas图片转成blob格式
canvas.toBlob(function (blob) {
// 形参 blob 就是转换后的结果，需要把它也追加到FormData中
fd.append('cover_img', blob);
// 验证FormData中有哪些值
fd.forEach(function (value, key) {
console.log(key, value)
})
// Ajax提交数据
$.ajax({
type: 'POST',
url: '/my/article/add',
data: fd,
// 提交FormData格式的数据，必须填下面两项
processData: false,
contentType: false,
success: function (res) {
layer.msg(res.message)
if (res.status === 0) {
// 添加成功，跳转到文章列表页
location.href = './list.html';
}
}
})
最后
以上就是冷艳蜗牛为你收集整理的富文本 和 图片裁切一, 富文本编辑器的实现步骤二, 图片裁切的实现步骤三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)四, 将裁剪后的图片，输出为文件五, 实际应用六, 提交数据完成最后的添加的全部内容，希望文章能够帮你解决富文本 和 图片裁切一, 富文本编辑器的实现步骤二, 图片裁切的实现步骤三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)四, 将裁剪后的图片，输出为文件五, 实际应用六, 提交数据完成最后的添加所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复