摘要：解決圖片上傳前裁剪等比縮放，壓縮，支持本地視頻同域視頻文件截圖功能等。選擇圖片按鈕，支持選擇器，或者對(duì)象僅實(shí)例化時(shí)有效裁剪或縮放寬度為可選限制寬度縮放，則只需設(shè)置值。限制高度縮放，則只需設(shè)置值。

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

解決圖片上傳前裁剪、等比縮放，壓縮，支持本地視頻、同域視頻文件截圖功能等。

裁剪圖片：同時(shí)設(shè)置參數(shù)width, height

等比縮放：按寬度縮放，只設(shè)置width; 同理按高度縮放，只需設(shè)置height

不裁剪、不縮放，直接返回源文件base64數(shù)據(jù)

視頻截圖返回?cái)?shù)據(jù)中含有字段videoFile, videoWidth, videoHeight, duration。其他參數(shù)為截圖參數(shù)

源碼地址：https://github.com/capricornc...

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

npm install image-process --save-dev

ES6+

import { ZxImageProcess } from "image-process"

const zxImageProcess = new ZxImageProcess({
    // 默認(rèn)為空，圖片和視頻文件，前提是瀏覽器支持input[accept=]
    accept: "video/*",
    // 自動(dòng)裁剪
    auto: false,
    // 觸發(fā)文件選擇的元素
    selector: "#buttonId",
    // 限制寬度等比縮放，則只需設(shè)置width值
    // 限制高度等比縮放，則只需設(shè)置height值
    // 同時(shí)設(shè)置了width、height值，則會(huì)對(duì)圖片按尺寸裁剪
    width: 600,
    height: 400,
    // 裁剪容器按鈕樣式
    submitStyle： "",
    cancelStyle: "color: red",
    // 最大文件限制
    maxSize: 50,
    success: function (result) {
      // 返回?cái)?shù)據(jù)
      console.log(result);
    },
    error: function (err) {
      console.error(err);
    }
  })

不初始化ZxImageProcess，直接使用期內(nèi)部方法handleMediaFile(file, options)，返回promise對(duì)象

import { handleMediaFile } from "image-process"

const options = {
  // 默認(rèn)為空，圖片和視頻文件，前提是瀏覽器支持input[accept=]
  accept: "video/*",
  // 自動(dòng)裁剪
  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...

auto true|false 自動(dòng)處理圖片，裁剪時(shí)不彈出手動(dòng)位置調(diào)整框。默認(rèn)為false。

selector: #buttonId 選擇圖片按鈕id，支持id、class選擇器，或者HTMLElement對(duì)象（僅ZxImageProcess實(shí)例化時(shí)有效）

width: 640 裁剪或縮放寬度為640px(可選)

1.限制寬度縮放，則只需設(shè)置width值。
2.限制高度縮放，則只需設(shè)置height值。
3.同時(shí)設(shè)置了width、height值，則會(huì)對(duì)圖片按尺寸裁剪

height: 640 裁剪或縮放高度為640px(可選)

maxSize: 50 文件大小最大限制，單位M（兆）。默認(rèn)50M

success: function(result){ console.log(result) } 圖片處理完成后的回調(diào)函數(shù)（僅ZxImageProcess實(shí)例化時(shí)有效）

base64: base64 圖片base64數(shù)據(jù)
blob: blobData  處理成功的圖片數(shù)據(jù)，可直接上傳至服務(wù)器，或賦值給input利用form表單提交。
element: canvas canvas節(jié)點(diǎn)對(duì)象
height: 640  處理完成的圖片寬度
width: 640 處理完成的圖片寬度
url: blob:url
raw: Object 原圖片相關(guān)屬性(寬高/文件大小/Base64編碼數(shù)據(jù)/類型/元素節(jié)點(diǎn))
size: 21100 處理完成的圖片文件大小
type: image/png  處理完成的圖片類型

error: function(err){ alert(err.message); } 處理過(guò)程中的錯(cuò)誤或警告回調(diào)函數(shù)（僅ZxImageProcess實(shí)例化時(shí)有效）

submitStyle: color: #f00 裁剪框確認(rèn)按鈕樣式（僅ZxImageProcess實(shí)例化時(shí)有效）

cancelStyle: color: #f00 裁剪框取消按鈕樣式（僅ZxImageProcess實(shí)例化時(shí)有效）

conversion(size) 將size單位B轉(zhuǎn)換為KB或M(大于1024KB則返回M)

toBlobData(base64) base64轉(zhuǎn)blob

toBlobUrl(file|blob) 文件數(shù)據(jù)轉(zhuǎn)blob url

reCrop() 重新顯示圖片裁剪窗口，重新調(diào)整裁剪圖片

源碼地址：https://github.com/capricornc...

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