modify-image-upload
上传图片组件(在上传图片时可以对图片进行修改,增加文字、水印、压缩图片质量等)
Last updated 2 years ago by yangyang_npm .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install modify-image-upload 
SYNC missed versions from official npm registry.

modify-image-upload

上传图片组件(在上传图片时可以对图片进行修改,增加文字、水印、压缩图片质量等)

Install

npm 安装使用

   npm install modify-image-upload --save

   import UploadImage from "modify-image-upload"

   或者
   
   const UploadImage = reqiure("modify-image-upload")

直接引用

Html
....
<script src="../lib/index.min.js"></script>
....
<body>
  <script>
    var config = {}
    createUpload.init(config)
  </script>
</body>

参数介绍

需要传入一个对象,对象具体内容如下表:

参数key 类型 描述
el String 元素选择器(#id)*必填
action String 上传路径 *必填
contentHtml String 替换原始按钮(html字符串)
quality Number 图片压缩后的质量 默认0.9
maxSize Number 图片上传最大尺寸(kb)默认4096Kb
compressover Number 图片超出尺寸时压缩(2048kb)
addFonts String / Array 需要添加的文字 (1行、多行(数组))
fontsAlign String 多行文字对其方式(left、right、center)
lineSpace Number 多行文本间距
fontColor String 需要添加的文字颜色
fontStyle String 添加文字的大小和样式(参照cavans font属性的写法)
drawFonts Function 支持自定义字体(canvas画布文字渲染函数)(ctx)=>{}
addImg String 需要添加的图片(http链接或者base64)
imageStyle Object 图片宽高尺寸 透明度(默认0.5)属性值(全是number): width height opacity
repeat String 图片的平铺方式(repeat、repeat-x、repeat-y、no-repeat", 不能addPos一起使用
addPos Array 添加文字和图片的相对于上传图片的位置 [x(数字、'left'、'right', 'center'), y(数字、'top'、'bottom', 'middle')] (默认 ['left', 'top'])
startUpload Function 开始选择图片之前的回掉,如果返回true 则继续,否则停止图片上传
onError Function 失败时候的回掉: (type, val){} 其中参数type:包括‘文件上传接口报错’, ‘上传图片过大’, ‘图片类型错误’
onSuccess Function 成功时候的回掉: (result){} 参数result是上传接口成功的回掉

Current Tags

  • 1.0.4                                ...           latest (2 years ago)

5 Versions

  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |