图片裁剪上传插件——jquery.photoClip.js

想要裁剪图片上传:

需要依赖的的插件为:

[jquery.photoClip.js] 插件
[iscroll-zoom.js] 插件
[hammer.js] 插件
[lrz.all.bundle.js] 插件

[jquery-2.1.3.min.js]

在前端页面调取:

<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
    loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
    loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
});
</script>
时间: 2024-10-16 12:55:46

图片裁剪上传插件——jquery.photoClip.js的相关文章

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看看核心代码: post的是base64,后端处理base64转存图片. 1 $("#clipArea").photoClip({ 2 width: 200, 3 height: 200, 4 file: "#file", 5 view: "#view"

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

关于Plupload结合上传插件jquery.plupload.queue的使用

方便日后查阅!! 事例代码: @import url(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css) ; src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"> src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"> src="

jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File 有上传进度条 2015年05月15日 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示.标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件. 本站web端文件文件提交即使用此插件,效果如下: 浏览器支持 浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Saf

jquery上传插件Jquery.uploadify.js-转

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

图片裁剪上传Jcrop

<link rel="stylesheet" href="../css/jquery.Jcrop.css"> <script src="../js/jquery.Jcrop.js"></script> 先是两个必不可少的东西 <style type="text/css"> /* Apply these styles only when #preview-pane has been

vue中使用cropperjs进行图片裁剪上传

下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id="yin"> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img

移动端图片裁剪上传—jQuery.cropper.js

jQuery.cropper.js是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. 一.移动端获取本地相册兼容 安卓:<input type="file" accept="image/*" capture="camera" > ios:<input type="file" accept="ima

关于图片裁剪上传时同一张图片缓存问题的处理

做项目的时候,遇到了这样一个问题: 这个时候,我点击  “更换封面” ,跳出如下页面 此时,我还选择这个封面的原图,并进行裁切,如下图红色框里为我裁切后的头像 点击  “确定”  后,发现头像还是原来的头像,但是看接口里给的参数没错啊?!是裁切之后的图片啊?! 因为选择的是原来的图片,浏览器之前缓存了这个图片,这时再做修改也没有用. 解决办法是在图片后面加随机数: src: d.src.split("t")[0] + "?t=" + (new Date()).get