安利一个js/vue/react图片编辑器filerobot-image-editor
引入 + 初始化 + 调用 = 可以使用了先上名字 filerobot-image-editor来自gitHubgithub地址: https://github.com/scaleflex/filerobot-image-editor引入方式方法1在html中直接使用<script src="https://cdn.scaleflex.it/plugins/filerobot-image-e
·
引入 + 初始化 + 调用 = 可以使用了
先上名字 filerobot-image-editor
来自gitHub
github地址: https://github.com/scaleflex/filerobot-image-editor
引入方式
在html中直接使用
<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.17/filerobot-image-editor.min.js"></script>
const ImageEditor = new FilerobotImageEditor();
ImageEditor.open('https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg');
//这里打开你要进行编辑的图片地址
先看效果
再看配置
new FilerobotImageEditor()
在调用FilerobotImageEditor 初始化图片编辑实例的时候，它接收几个参数
FilerobotImageEditor(config: {}, callbacks: {})
第一个参数 config
var config = {
tools:[],// 可以理解为工具栏，控制想要显示在界面的编辑功能，默认是该有都有，如果有配置该项，则显示该项配置的菜单
isLowQualityPreview: true,//通过将变换应用于低质量预览，有助于提高图像编辑器的性能 默认true
language: 'en',// em...没什么用，英语(默认)、法语、德语、俄语 没有 'zh' ,可以自定义
translations: { //自定义显示文字
en:{ //以下为两个示例，具体可在下方查看
'toolbar.apply': '确定',
'toolbar.download': '保存',
}
},
theme：{ //编辑界面主题色彩
colors: {
},
fonts:{
}
},
reduceBeforeEdit: { //为了提高编辑图像时的性能，可以在编辑前对图像大小做预设定
mode: 'manual',
widthLimit: 2000, //单位PX
heightLimit: 2000
},
... //很多其他配置 具体可在文档中查看
}
如果只是单纯的图片进行一些简单的编辑，那么到这里，已经可以了，参照文档，填写相应配置，编辑功能已经可以使用了；当然，如果需要更多的功能，那你可得多看看文档哟~
第二个参数 不同生命周期的回调
onClose(): function () , // 关闭时
onOpen(): function (),// 打开图片时
onBeforeComplete: function(res),// 完成编辑前
onComplete(): function (res), //点击左上角 完成编辑时
onError(): function (), //发生错误
注意
1.默认情况下，点击完成编辑后，图片会直接下载到本地，
如果需要不下载图片而是自己对图片做 ajax或其他处理，则这一步，你不得不做
onBeforeComplete: (props) => { return false;},
//你需要在这里 return false 来阻止默认行为
2.对图片的自由处理
onComplete: function(res){
console.log(res)
}
转为base64
//在钩子函数onComplete中
onComplete: function(res){
const base64 = res.canvas.toDataURL()
}
获取到base64文件后，看需求，自己使用
或者再加工
将base64转为二进制流文件
dataURLtoFile(dataurl, filename) { //将base64转换为文件
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
发送请求
axiosUploadImg(url){ //裁剪后，图片的再次上传于替换Url
let file = this.dataURLtoFile(url.canvas.toDataURL(), url.imageName);
// 实例化FormData
let formdata = new FormData();
formdata.append("file", file);
axios({ //这里我使用的是axios
method: 'post',
url: 'xxxxxxxxx',//你的请求地址
data: formdata,
headers: {
'Content-Type': 'multipart/form-data', //这个尤为重要,不能丢了
},
}).then()
},
===================================================
更多配置，可以自行阅读文档，
下面给个完整的示例以供参考
以html直接引用为例，当然，想要加入vue，react等项目中也是可以的，大家可以自行去实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filerobot-image-editor</title>
<script src="./filerobt-image-eritor.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<style>
</style>
</head>
<body>
<img id="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg" alt="">
<button id="modify">编辑</button>
</body>
<script>
window.onload = function () {
const modify = document.querySelector('#modify')
const ImageEditor = new FilerobotImageEditor( //实例化编辑器
{
tools: ['adjust', 'effects', 'filters', 'crop', 'resize', 'shapes', 'rotate','text'],
translations: {
en: {
'header.image_editor_title': '图片调整',
'header.toggle_fullscreen': '切换全屏',
'header.close_modal': '取消',
'header.close': '取消',
'orientation.rotate_l': '向左旋转',
'orientation.rotate_r': '向右旋转',
'orientation.flip_h': '左右翻转',
'orientation.flip_v': '上下翻转',
'toolbar.save': '嘿嘿',
'toolbar.apply': '确定',
'toolbar.download': '保存',
'toolbar.adjust': '色调',
'toolbar.cancel': '取消',
'toolbar.filters': '滤镜',
'toolbar.orientation': '调整方向',
'toolbar.crop': '裁剪',
'toolbar.resize': '大小重置',
'toolbar.shapes': '形状',
'toolbar.text': '添加文字',
'toolbar.effects': '特效',
'common.text': '文字',
'common.opacity': '透明度',
'common.stroke-color': '边框色',
'footer.reset': '重置',
'footer.undo': '向前撤销',
'footer.redo': '向后撤销',
'adjust.brightness': '亮度',
'adjust.contrast': '对比度',
'adjust.exposure': '曝光度',
'adjust.saturation': '饱和度'
}
},
theme: {
colors: {
primaryBg: '#ffffff',
primaryBgHover: '#f2f2f2',
secondaryBg: '#F8FAFB',
secondaryBgHover: '#DFE7ED',
secondaryBgOpacity: 'rgba(255,255,255, 0.75)',
text: '#5D6D7E',
textHover: '#1a2329',
textMute: '#aaa',
textWarn: '#f7931e',
accent: '#D5D8DC',
button: {
primary: '#6879EB',
secondary: '#ffffff',
border: 'transparent',
hover: '#5064ea',
active: '#3c4ec7'
},
border: '#DFE7ED',
borderLight: '#e1e1e1',
disabledBg: 'rgba(255, 0, 0, 0.1)',
},
fonts: [
{ label: 'Arial', value: 'Arial' },
{ label: 'Tahoma', value: 'Tahoma' },
{ label: 'Times New Roman', value: 'Times New Roman'},
{ label: 'Courier', value: 'Courier' },
{ label: 'Courier New', value: 'Courier New' },
{ label: 'Verdana', value: 'Verdana' }
]
}
},
{
onBeforeComplete: (props) => { return false;},
onComplete: function(res){
document.querySelector('#img').src = res.canvas.toDataURL()
axiosReq(res)
}
}
);
function axiosReq(img) { //请求部分
let file = dataURLtoFile(img.canvas.toDataURL(), img.imageName);
let formdata = new FormData();// 实例化FormData
formdata.append("file", file);
axios({
method: 'post',
url: 'xxxxxxxxxxxxxxxx', //你的请求地址
data: formdata,
headers: {
'Content-Type': 'multipart/form-data', //不能少
},
}).then(res=>{console.log(
)})
}
function dataURLtoFile(dataurl, filename) { //将base64转换为文件
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
modify.addEventListener('click',function(){ //注册事件
//拿到你要操作编辑的图片src
var src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'
ImageEditor.open(src) //关键步，调用open
})
};
</script>
</html>
记得看文档
GitHub: https://github.com/scaleflex/filerobot-image-editor
主题theme配置: https://github.com/scaleflex/filerobot-image-editor/blob/master/src/assets/theme/dark.js
汉化处理: https://github.com/scaleflex/filerobot-image-editor/blob/master/src/assets/i18n/en.js
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)