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

whlong 发布于2019-08-23 12:18 / 1522人阅读

摘要：解决图片上传前裁剪等比缩放，压缩，支持本地视频同域视频文件截图功能等。选择图片按钮，支持选择器，或者对象仅实例化时有效裁剪或缩放宽度为可选限制宽度缩放，则只需设置值。限制高度缩放，则只需设置值。

image-process-tools

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

使用效果

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...

专线服务混合云等比例缩放图片 php缩放压缩图片 PHP等比缩放 GIF等比缩放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98298.html

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

摘要：解决图片上传前裁剪等比缩放，压缩，支持本地视频同域视频文件截图功能等。选择图片按钮，支持选择器，或者对象仅实例化时有效裁剪或缩放宽度为可选限制宽度缩放，则只需设置值。限制高度缩放，则只需设置值。 image-process-tools Image pre processing for upload (html5 + canvas), ie10+ 解决图片上传前裁剪、等比缩放，压缩，支持...

jackzou 2019-08-05 15:08 评论0 收藏0
HTML5本地裁剪图片

摘要：先上效果图我们首先需要创建一个文件，里面写上一些简单的和代码以上的三个标签都是用来处理跟图片相关的内容的，详细的处理会在后续的代码中给出。先上效果图： showImg(https://wt-prj.oss.aliyuncs.com/0d06af79c49d4e08abb1ab3f7ab6e860/a08ff4d5-9228-4a31-b4d5-50b447f73b5e.gif); ...

Charlie_Jade 2019-08-02 18:15 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

CatalpaFlat 2019-08-20 13:33 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

yanbingyun1990 2019-08-05 10:38 评论0 收藏0