image-process图片裁剪/等比缩放,压缩,支持本地/同域视频文件截图 (html5 + canvas)

2018-10-12 admin

Image pre processing for upload (html5 + canvas), ie10+

解决图片上传前裁剪、等比缩放,压缩,支持本地视频、同域视频文件截图功能等。

  • 裁剪图片:同时设置参数width, height
  • 等比缩放:按宽度缩放,只设置width; 同理按高度缩放,只需设置height
  • 不裁剪、不缩放,直接返回源文件base64数据
  • 视频截图返回数据中含有字段videoFile, videoWidth, videoHeight, duration。其他参数为截图参数

源码地址:https://github.com/capricornc…

演示地址:https://capricorncd.github.io…

npm

npm install image-process --save-dev

使用方法

ES6+

import { ZxImageProcess } from 'image-process'

const zxImageProcess = new ZxImageProcess({
    // 默认为空,图片和视频文件,前提是浏览器支持input[accept=]
    accept: 'video/*',
    // 自动裁剪
    auto: false,
    // 触发文件选择的元素
    selector: '#buttonId',
    // 限制宽度等比缩放,则只需设置width值
    // 限制高度等比缩放,则只需设置height值
    // 同时设置了width、height值,则会对图片按尺寸裁剪
    width: 600,
    height: 400,
    // 裁剪容器按钮样式
    submitStyle: '',
    cancelStyle: 'color: red',
    // 最大文件限制
    maxSize: 50,
    success: function (result) {
      // 返回数据
      console.log(result);
    },
    error: function (err) {
      console.error(err);
    }
  })

不初始化ZxImageProcess,直接使用期内部方法handleMediaFile(file, options),返回promise对象

import { handleMediaFile } from 'image-process'

const options = {
  // 默认为空,图片和视频文件,前提是浏览器支持input[accept=]
  accept: 'video/*',
  // 自动裁剪
  auto: false,
  width: 600,
  height: 400,
  // 文件大小限制50M
  maxSize: 50
}

// 处理图片或视频文件
handleMediaFile(file, options)
  .then(res => {
    console.log(res)
  })
  .catch (err => {
    console.error(err)
  })

browser

<script src="./dist/image-process-tools.min.js"></script>

使用效果

https://capricorncd.github.io…

Options 参数

  • auto true|false 自动处理图片,裁剪时不弹出手动位置调整框。默认为false。

  • selector: #buttonId 选择图片按钮id,支持id、class选择器,或者HTMLElement对象(仅ZxImageProcess实例化时有效)

  • width: 640 裁剪或缩放宽度为640px(可选)

    1.限制宽度缩放,则只需设置width值。

    2.限制高度缩放,则只需设置height值。

    3.同时设置了width、height值,则会对图片按尺寸裁剪

  • height: 640 裁剪或缩放高度为640px(可选)

  • maxSize: 50 文件大小最大限制,单位M(兆)。默认50M

  • success: function(result){ console.log(result) } 图片处理完成后的回调函数(仅ZxImageProcess实例化时有效)

    base64: base64 图片base64数据

    blob: blobData 处理成功的图片数据,可直接上传至服务器,或赋值给input利用form表单提交。

    element: canvas canvas节点对象

    height: 640 处理完成的图片宽度

    width: 640 处理完成的图片宽度

    url: blob:url

    raw: Object 原图片相关属性(宽高/文件大小/Base64编码数据/类型/元素节点)

    size: 21100 处理完成的图片文件大小

    type: image/png 处理完成的图片类型

  • error: function(err){ alert(err.message); } 处理过程中的错误或警告回调函数(仅ZxImageProcess实例化时有效)

  • submitStyle: color: #f00 裁剪框确认按钮样式(仅ZxImageProcess实例化时有效)

  • cancelStyle: color: #f00 裁剪框取消按钮样式(仅ZxImageProcess实例化时有效)

方法

  • conversion(size) 将size单位B转换为KB或M(大于1024KB则返回M)
  • toBlobData(base64) base64转blob
  • toBlobUrl(file|blob) 文件数据转blob url
  • reCrop() 重新显示图片裁剪窗口,重新调整裁剪图片

Error

code message说明
1 初始化参数selector不合法,非有效字符串或DOM元素
2 未获取到body元素
3 未获取到selector对应DOM元素
4 未选中任何文件
5 调用方法reCrop()时,未获取到之前的文件数据
7 处理的file非图片或视频文件
8 读取file文件数据出错
11 预加载图片数据出错
12 文件太大,超过了最大限制
13 视频截图失败,视频资源可能不在同域中
21 图片手动裁剪,设置预览图片src失败
22 用户取消了裁剪位置设置

源码地址:https://github.com/capricornc…

演示地址:https://capricorncd.github.io…

原文链接:https://segmentfault.com/a/1190000016656723

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42456.html

文章标题:image-process图片裁剪/等比缩放,压缩,支持本地/同域视频文件截图 (html5 + canvas)

相关文章
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
回到顶部