文档章节

Croppic图片裁切插件中文API帮助文档

码上中国博客
 码上中国博客
发布于 2016/09/04 13:15
字数 1143
阅读 1.2K
收藏 2

本文转自http://www.uedsc.com/croppic-api.html,感谢原作者的翻译。

uploadUrl

由于裁切图片是通过服务端的动态编程语言处理的,所以在初始化插件的时候,我们可以给他设置图片上传的路径,然后处理成功以后通过返回的数据来显示裁切以后的图片。

JavaScript代码

在初始化Croppic的时候设置上传路径参数;

var cropperOptions = {
    uploadUrl:'path_to_your_image_proccessing_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

插件通过AJAX POST的方法上传图片,通过设置表单为multipart/form-data数据类型,注意AJAX请求不能跨域,这也是为了安全。

 Download php example file

裁切图片成功以后,你必须返回一下的JSON数据,限制最大缩放的图像宽度和高度,所以图像不出现模糊。

{
    "status":"success",
    "url":"path/img.jpg",
    "width":originalImgWidth,
    "height":originalImgHeight
}

如果裁切图片失败,你需要返回一下JSON数据,方便告诉Croppic处理异常。

{
    "status":"error",
    "message":"your error message text"
}

uploadDate

如果你需要发送额外的数据到服务器,你可以使用uploadDate参数

var cropperOptions = {
    uploadUrl:'path_to_your_image_proccessing_file.php',
    uploadData:{
        "dummyData":1,
        "dummyData2":"text"
    }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

cropUrl

这个参数设置你处理图片的脚本地址,这个参数有别于uploadUrl,虽然使用方法相同的。

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

使用了这个参数,你将接收到下面的multipart/form-data数据类型。

  • imgUrl // your image path (the one we recieved after successfull upload)
  • imgInitW // your image original width (the one we recieved after upload)
  • imgInitH // your image original height (the one we recieved after upload)
  • imgW // your new scaled image width
  • imgH // your new scaled image height
  • imgX1 // top left corner of the cropped image in relation to scaled image
  • imgY1 // top left corner of the cropped image in relation to scaled image
  • cropW // cropped image width
  • cropH // cropped image height

成功后的图像保存,你必须返回以下JSON,图像的宽度和高度要求限制最大变焦,所以图像不出来模糊。

{
    "status":"success",
    "url":"path/croppedImg.jpg"
}

如果裁切图片失败,你需要返回一下JSON数据,方便告诉Croppic处理异常。

{
    "status":"error",
    "message":"your error message text"
}

cropData

额外的数据要发送给您的图像分割处理文件

var cropperOptions = {
    customUploadButtonId:'path_to_your_image_proccessing_file.php',
    cropData:{
        "dummyData":1,
        "dummyData2":"text"
    }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

preloadImage

载入已存在服务器上的图像

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php',
    loadPicture:'path-to-your-image'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

defineControls

defineControls可以设置对图片的精确控制,有几个参数是可以设置的:

  • doubleZoomControls 增加10×zoomFactor放大两个额外的缩放控件(默认为true)
  • zoomFactor 缩放图像的像素的值(默认为10)
  • rotateControls 添加两个额外的旋转控制左、右旋转(默认为true)
  • rotateFactor 旋转图像的值(默认为5)
 var cropperOptions = {
    zoomFactor:10,
    doubleZoomControls:true,
    rotateFactor:10,
    rotateControls:true            
}
var cropperHeader = new Croppic('yourId', cropperOptions);

outputUrlId

成功的图像裁剪裁剪后,在页面上显示处理过后的Image图片的URL,通过设置一个ID找到页面上的输入框。

<input type="text" id="myOutputId">

JavaScript代码

var cropperOptions = {
    outputUrlId:'myOutputId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

customUploadButtonId

如果你想自定义上传裁切图片的按钮,你可以设置这个参数,传递一个按钮的ID

var cropperOptions = {
    customUploadButtonId:'myDivId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

modal

如果你想在模态窗口中打开裁剪(默认是false)

var cropperOptions = {
    modal:true
}
var cropperHeader = new Croppic('yourId', cropperOptions);

loaderHtml

果你想在模态窗口中打开裁剪(默认是false),包裹的DIV的类必须设置为“LOADER”。

var cropperOptions = {
    loaderHtml:'<img class="loader" src="loader.png" >'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

processInline

如果你想在JavaScript处理初始FileUpload(有)而不是在服务器端(默认为false),不是所有的浏览器支持的API的例子有:IE10 +支持。

var cropperOptions = {
    processInline:true,
}
var cropperHeader = new Croppic('yourId', cropperOptions);

imgEyecandy options

透明图像显示当前IMG变焦,提示:为了防止布局打破,需要给父级裁切的DIV盒子设置 overflow:hidden

var cropperOptions = {
    imgEyecandy:true,
    imgEyecandyOpacity:0.2
}
var cropperHeader = new Croppic('yourId', cropperOptions);

CALLBACKS

一些回调函数(打开你的控制台输出的混乱和观看)。

var cropperOptions = {
    onBeforeImgUpload:     function(){ console.log('onBeforeImgUpload') },
    onAfterImgUpload:     function(){ console.log('onAfterImgUpload') },
    onImgDrag:        function(){ console.log('onImgDrag') },
    onImgZoom:        function(){ console.log('onImgZoom') },
    onBeforeImgCrop:     function(){ console.log('onBeforeImgCrop') },
    onAfterImgCrop:        function(){ console.log('onAfterImgCrop') },
    onReset:        function(){ console.log('onReset') },
    onError:        function(errormsg){ console.log('onError:'+errormsg) }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

METHODS

Croppic提供了一些方法

var cropper = new Croppic('yourId', cropperOptions);
cropper.destroy()     // no need explaining here :) 
cropper.reset()     // destroys and then inits the cropper

本文转载自:http://www.uedsc.com/croppic-api.html

码上中国博客

码上中国博客

粉丝 56
博文 76
码字总数 73492
作品 1
北京
后端工程师
私信 提问
基于jQuery免费开源图片裁切插件 - Croppic

浏览器兼容性 Croppic能工作在现在的大多数的浏览器中,当然也包括IE9: IE8: Untested IE9: Works! IE10+: Works! Safari 4+: Works! Firefox 3+: Works! Chrome 14+: Works! Opera 15+: W......

码上中国博客
2016/09/04
234
0
php+croppic.js实现剪切上传图片

最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了。 在网上找了有些时间,最终找到了这个网站。 http://www.croppic.net/ 因为官网文档全部都是英文,所以看起来...

mengchenchen
2018/08/14
0
0
乌合之众/PictureCutting

#PictureCutting 写这个工具的原因是因为在获取一个软件的皮肤包中的图片的时候需要进行批量的裁切工作,而有没有找到在linux下简单好用的工具,干脆就用写了一个。 乌合之众博客 ##编译 首先...

乌合之众
2016/03/23
0
0
React Study - Create React App

create by jsliang on 2019-04-24 11:36:57 Recently revised in 2019-04-25 10:44:54 Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub ...

jsliang
2019/04/25
0
0
Jenkins 中文本地化的重大进展

本文首发于:Jenkins 中文社区 我从2017年开始,参与 Jenkins 社区贡献。作为一名新成员,翻译可能是帮助社区项目最简单的方法。 本地化的优化通常是较小的改动,你无需了解项目完整的上下文...

Jenkins中文社区
2019/05/23
108
3

没有更多内容

加载失败,请刷新页面

加载更多

Comparing getPath(), getAbsolutePath(), and getCanonicalPath() in Java

1. Overview The java.io.File class has three methods — getPath(), getAbsolutePath() and getCanonicalPath() — to obtain the filesystem path. In this article, we'll have a quick......

Ciet
42分钟前
29
0
Spring5 依赖注入和循环依赖处理

//TODO populateBean 注入属性 doGetBean->getSingleton 删除bean缓存

小小明1995
53分钟前
67
0
每天AC系列(七):合并两个有序链表

1 题目 LeetCode第21题,合并两个有序链表. 2 直接合并 因为已经有序了,类似归并排序中的合并一样,操作不难,直接上代码了. ListNode t = new ListNode(0);ListNode head = t;while(l1 != nu...

Blueeeeeee
56分钟前
47
0
数据结构之双向链表-c语言实现

原文链接:http://blog.seclibs.com/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e4%b9%8b%e5%8f%8c%e5%90%91%e9%93%be%e8%a1%a8-c%e8%af%ad%e8%a8%80%e5%ae%9e%e7%8e%b0/ 这次完成了双向链表的代......

无心的梦呓
57分钟前
65
0
SpringCloud 基础教程(六)-负载均衡Ribbon

 我的博客:兰陵笑笑生,欢迎浏览博客!  上一章 SpringCloud基础教程(五)-配置中心热生效和高可用当中,我们对配置中心进行进行了深入的了解,本章将继续微服务架构的深入学习,了解在微服务...

_兰陵笑笑生
今天
49
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部