首先感谢屌丝论坛C团队,给我们xiuno站长们带来了这么好用的编辑器插件。
在插件的图片选项卡里,前端处理配置可能有人不会写,或者想实现更加高级的功能,下面的配置和注释可能会帮到你。
原插件GitHub的链接已经404了,且用且珍惜吧。
_chop:{url:'view/img/water-small.png',width:400,height:200,x:0.5,y:-80}, // _chop:(undefined)||null||false 不添加水印 // url: 水印图片 同域名URL或Base64编码的DataURL // url:(undefined)||null||false 不添加水印 // width: 原图达到此宽度才添加水印 // width:(undefined)||null||false 0 // height: 原图达到此高度才添加水印 // height:(undefined)||null||false 0 // x: 顶点横坐标 负数为从右到左 0-1小数为中轴百分比 // x:(undefined)||null||false 0 // y: 顶点纵坐标 负数为从下到上 0-1小数为中轴百分比 // y:(undefined)||null||false 0 _dataurl:true, // _dataurl:true 输出Base64编码的DataURL // _dataurl:(undefined)||null||false 输出Blob对象 _png:{width:500,height:500,fill:null,format:'image/png',quality:0.8,render:{}}, _jpg:{width:500,height:500,fill:'#FFF',format:'image/jpeg',quality:0.8}, _webp:{width:500,height:500,fill:null,format:'image/webp',quality:0.8}, // _*: 输出格式模板 对象键名任意 // width: 转换后最大宽度 // width:(undefined)||null||false 不限制 // height: 转换后最大高度 // height:(undefined)||null||false 不限制 // fill: 背景填充色 // fill:(undefined)||null||false 透明 // format:image/png||image/jpeg||image/webp 输出格式选项 // format:(undefined)||null||false image/png // quality:<0.01-1> 压缩比例 输出格式image/png无视该项 // quality:(undefined)||null||false 0.9 // render:{} CanvasRenderingContext2D 渲染属性 // render:(undefined)||null||false 使用浏览器默认 png:{normal:'_webp',nowebp:'_png',animate:false}, jpg:{normal:'_webp',nowebp:'_jpg'}, bmp:{normal:'_webp',nowebp:'_jpg'}, ico:null, gif:{normal:'_webp',nowebp:'_jpg'}, webp:{normal:'_webp',nowebp:'_png',animate:false}, // png|jpg|bmp|ico|gif|webp: 指定格式设置 // normal: 常规输出使用哪个模板 // normal:(undefined)||null||false 使用脚本默认 // nowebp: 浏览器不支持webp输出时使用哪个模板 // nowebp:(undefined) 继承normal模板 // nowebp:null||false 不压缩直接输出 // animate: 图片检测到动画时使用哪个模板 // animate:(undefined) 继承normal模板 // animate:null||false 不压缩直接输出
以上的配置可以直接在后台的输入框里填写。
如果想要水印的话,去配置最顶层添加这行: _chop:{url:'view/img/water-small.png',width:400,height:200,x:0.5,y:-80}, 意思是横坐标50%居中,纵坐标从下到上80px,图片大于400×200才加水印。 看你水印有多大,调整横纵坐标的值,不用百分比的话填正负数也行。 水印放右下角的话,两个都是负数,最低数值要大于水印的宽高。 url用http地址、相对路径、Base64都可以,建议用透明png。 找不到水印的话,看看是不是横纵坐标设置的负数值太小,跑到了图片区域范围外,负数的绝对值要大于水印宽高。
如果想要水印的话,去配置最顶层添加这行:
_chop:{url:'view/img/water-small.png',width:400,height:200,x:0.5,y:-80},
意思是横坐标50%居中,纵坐标从下到上80px,图片大于400×200才加水印。
看你水印有多大,调整横纵坐标的值,不用百分比的话填正负数也行。
水印放右下角的话,两个都是负数,最低数值要大于水印的宽高。
url用http地址、相对路径、Base64都可以,建议用透明png。
找不到水印的话,看看是不是横纵坐标设置的负数值太小,跑到了图片区域范围外,负数的绝对值要大于水印宽高。
暂无回复,快来抢沙发吧
版块
人生倒计时
~扫~码~领~红~包~