1.0.11 • Published 4 years ago
picture-processing v1.0.11
图片处理插件
图片处理插件,目前包括以下功能: 图片转css背景,图片转base(包括webp),图片裁剪功能, 图片上传,loading小动画, loading进度条模拟
Import
npm i picture-processing -S
Example
import { image2css, image2base, image2cut, image2upload, image2loading, image2percent } from 'picture-processing';
export default {
created() {
// 图片转背景
// 接受参数: 图片url数组
// 生成对应图片名字css类,布局时直接添加图片名称css类即可
// eg: class='${图片名字}'
image2css(['url'])
// 图片转base64, 支持转webp图片格式
// 如果参数只传url 则默认为转换base64
// 图片url支持url路径 url地址 file类型图片
// 如果参数为object 支持 url(链接) type(转换的类型) upload(boolean是否上传)
// 如果选择upload 则可根据uploadType选择上传微易经纪或者微易科技 1为经纪 2为科技 默认为1(经纪)
image2base({
url: '',
type: 'webp',
upload: true,
uploadType: 2
}).then(res => {
// res返回格式
// {
// src: ${图片src}, 需要选择upload
// base64: ${base64编码},
// width: ${图片宽度}
// height: ${图片高度}
//}
})
// 图片裁剪
// 图片裁剪接受一个参数:可为图片url, 也可以是一个object对象 对象包含图片url 裁剪框width,height,裁剪大小限制limit
// 图片url支持url路径 url地址 file类型图片
image2cut({
url: '',
width: 100,
height: 100,
limit: 100
}).then(res => {
// res为裁剪后的图片base64格式
//}
})
// 图片上传,先初始化init,通过send方法上传
// 需要先进行初始化 初始化接受一个boolean参数 默认为false 代表微易经纪上传 如果传true则代表微易科技上传
// 参数必须是object 图片url支持url路径 url地址 file类型图片
// object必须包含 url,可支持dir(文件位置, 默认common)、fileType(上传后生成的类型, 默认jpeg)、success(function)、fail(function)
image2upload.init(true || false) //
image2upload({
url: 'url', // 支持base64和file类型
dir: 'common',
fileType: 'webp', // 默认jpeg
success: () => {},
fail: () => {}
})
// loading小动画
// show方法接受boolean参数 表示是否创建loading遮罩层 true为创建 默认为false 为不创建
image2loading.show() // 显示动画
image2loading.hide() // 隐藏动画
// loading进度条模拟
// 包括start和end方法 为前端模拟 刚开始百分比稍快 然后越来越慢 到100之前的一个峰值会慢慢停止 直至end方法调用后完成100
// start 开启进度条滚动 当需要进度任务完成时 调用end方法即可
image2percent.start() // 会返回canvas节点
image2percent.end()
}
}
API
picture-processing 目前只支持
image2css(图片转背景)
image2base(图片转base64)
image2cut(图片裁剪功能)
image2loading(loading动画)
image2uplaod(图片上传)
image2percent.start()
image2css
示例
image2css(['url'])
参数
图片url数组: url, url
返回值
无返回值,会在head里添加一段css
image2base
示例
image2base({
url: '', // 图片url支持url路径 url地址 file类型图片
type: '', // 转换的类型 如果图片源是file类型 则type默认base64/png 如果选择upload 则type有效 否则type无效
upload: true // 是否需要上传 如果选择上传,则返回的res里包含src
uploadType: 2 // 选择upload之后附加的uploadtype 默认为1 经纪上传 2为科技上传
})
参数
图片url或者ojbect(参考示例)
返回值
返回Object 包含base64编码,图片weight,height ,如果选择上传,会增加图片src
image2cut
示例
image2cut({
url: '', // 图片url支持url路径 url地址 file类型图片
width: 100, // 裁剪框宽度
height: 100, // 裁剪框高度
limit: 100 // 裁剪图片大小限制
}).then(res => {
// res为裁剪后的图片base64格式
//}
})
参数
图片url或者ojbect(参考示例)
返回值
返回值为裁剪后的图片base64编码
image2upload
示例
image2upload.init() // 初始化 参数为boolean值 true为科技上传 默认为false 经纪上传
image2upload({
url: 'url', // 图片url支持base64格式 file类型图片
dir: 'common', // 上传后存放的目录 默认common
fileType: 'webp', // 上传的图片类型 默认jpeg
success: (src) => {}, // 成功回调 返回图片上传后的url
fail: (code) => {} // 失败回调 返回0,1,2 0代表url格式错误 1代表获取阿里云签名失败 2代表上传失败
})
参数
图片url或者ojbect(参考示例)
返回值
无
image2loading
示例
image2loading.show() // 显示loading 默认为boolean true为显示遮罩 默认为false不显示
image2loading.hide()
参数
无
返回值
无
image2percent
示例
image2percent.start() // 开始百分比
image2percent.end() // 手动完成百分比
参数
无
返回值
无