图片上传裁剪&等比缩放处理(html5+Canvas)
来源:互联网 发布:mac os 10.10.5支持app 编辑:程序博客网 时间:2024/05/18 01:45
Capricorncd-image-process
Image pre processing for upload (html5 + canvas)
解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。后期版本应该会加入手动设置裁剪位置及缩放比例。
Create by capricorncd / 2017-03-13
源码下载:https://github.com/capricorncd/image-process
使用方法
<div id="imgWrapper"> <!-- 图片预览容器 --></div><div> <button id="buttonId">选择图片</button></div><script src="../build/capricorncd-image-process.min.js"></script><script> var capcdOptions = { // 选择图片按钮id elm: 'buttonId', // 图片预览容器 id target: 'imgWrapper', // 裁剪图片 crop: true, // 裁剪尺寸 width: 640, height: 640 } var capcd = new CAPCD(capcdOptions, function (data) { console.log(data); alert('图片文件读取、裁剪/等比缩放编码成功,\n请详见浏览器控制台!'); /** * data:待上传的图像数据 * 可将data写入input[value],利用form表单上传 * 或直接通过如腾讯云接口直接上传,如下: */ /** * 腾讯云上传实例,详见腾讯云文件上传文档 * https://www.qcloud.com/document/product/436/8095 */ // cos.uploadFile( // successCallBack, // 上传成功回调函数 // errorCallBack, // 上传失败回调函数 // progressCallBack, // 上传进度回调函数 // bucket, // 腾讯云对象存储bucket目录 // '上传成功后的文件名.jpg', // 腾讯云目录文件夹+上传后的文件名 // data, // 图像文件数据 // 1 // 若bucket中有同名文件,是否覆盖 // ); });</script>
使用效果图
====
Options 参数
elm: 'buttonId'
选择图片按钮id(必须)target: 'imgWrapper'
图片预览容器id(可选)crop: true
是否裁剪图片(可选)
为true时,必须同时设置width、height值大于0
裁剪规则: 图片缩放到一定比列(即一边等于设置值,另一边超出设置值部分裁去),居中裁剪
图片尺寸与设置裁剪尺寸相同时,不做canvas重绘处理
width: 500
裁剪或缩放宽度为500px(可选)
crop为false或不配置crop,则为缩放尺寸。
1.限制宽度缩放,则只需设置width值。
2.限制高度缩放,则只需设置height值。
3.若crop为false,同时设置了width/height值,则只按width缩放,忽略height
height: 500
裁剪或缩放高度为500px(可选)type: 'jpg'
上传图片目标格式,默认jpg/png(可选)
1.不配置此项,则保留原图片格式(bmp文件会转换成jpg, gif会转换为png)。
2.配置后,将所有格式图片转换为配置格式。
3.可选值’jpg’, ‘png’。
4.HTMLCanvasElement.toDataURL()不支持’gif’, ‘bmp’,均输出’png’格式
源码下载:https://github.com/capricorncd/image-process
- 图片上传裁剪&等比缩放处理(html5+Canvas)
- 图片上传前预处理,等比缩放、裁剪 (html5 + canvas)
- Html5新特性 canvas画板画直线和等比缩放居中裁剪图片
- 图片等比缩放上传
- 使用HTML5 canvas 标签进行图片裁剪、旋转、缩放
- HTML5 本地裁剪图片并上传至服务器 canvas图片上传 canvas图片裁剪
- Java中图片处理工具类,含等比缩放、图片裁剪
- 编辑器上传图片至七牛,处理(裁剪,缩放)图片后上传,不落地
- java上传图片放大(小图等比放大,大图等比裁剪)
- java上传图片放大(小图等比放大,大图等比裁剪)
- PHP上传图片进行等比缩放
- UIImage 裁剪图片和等比列缩放图片
- HTML5图片canvas等比例缩放后上传
- jQuery处理页面图片等比缩放
- html5 canvas图片缩放,拖拽
- js等比缩放图片
- iphone图片等比缩放
- js图片等比缩放
- Linux常识
- 如何让VS检查函数和类Comment的添加情况
- 深入理解-Js正则表达式-1
- Eclipse安装android插件
- 测试用例编写方法
- 图片上传裁剪&等比缩放处理(html5+Canvas)
- TokuDB性能测试报告
- Linux c++学习大概步骤(转)
- struts2获取request方法
- IBM WebSphere MQ讲解2
- 【校招笔试】股票交易日(dp)
- java 获取String中的数字
- 记录一些好的文章网址
- CentOS-5.5固定IP配置