Skip to content

palxiao/ccImg_tool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Demo预览

http://palxp.com/ccimg/

安装说明

下载本项目,将dist文件下的 js 引入页面

<script data-main="../js/main" src="../js/lib/require.js"></script>

使用到图片裁剪工具时需引入 css

<link rel="stylesheet" type="text/css" href="../css/cropper.css" />

npm引入方式

npm install ccimg

web项目中使用,目前只支持压缩和水印功能:

var ccimg = require('ccimg')
ccimg.compress // 使用等于下面的 $compress
ccimg.watermark // 使用等于下面的 $watermark

使用说明

1. 图片裁剪

传入参数:

src: 图片地址

aspectRatio: 裁剪框比例,不传为自由变换 eg: 16/9 4/3 2/3 1/1

示例:

$cropper(src).open({
	aspectRatio: 1,
	ok: function (base64) {
	  // 确认回调函数,返回裁剪后图片。
	},
	toBlob: function (blob) {
	  // 确认回调函数,返回裁剪后图片,转换成用于传输到后台的格式,使用formData接收。
	  // var formData = new FormData();
	  // formData.append('croppedImage', blob);
	}
})

2. 图片压缩

传入参数:

src:(string/array) 单个图片地址,或者多个图片地址的数组

width / height:(number) 自定义压缩后宽高,可不传

quality:(1~99) 压缩质量 数值越大质量越高

original: (boolean) 传true压缩后分辨率接近或与原始分辨率一致

$compress({
    src: document.getElementById('xxx').src,
    width: 100, 
    height: 100,
    quality: 40,
    ok: function (base64) {
        // 返回的压缩图片,如果传递数组则返回数组:
        // base64.forEach(function (item) {})
    },
    toBlob: function (blob) {
    	// 返回转换为blob的格式
    }
})

3. 图片底部加水印

传入参数:

src: 图片地址

text: 水印文字

fontSize: 字体大小,不传或者为0则自适应

var src = document.getElementById('xxx').src
$watermark(src).add({
    text: '文字',
    fontSize: 18,
    ok: function (base64) {
        // 完成后回调函数
    }
})

About

移动端图片裁剪/压缩/水印web插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published