image-process圖片裁剪/等比縮放，壓縮，支持本地/同域視頻文件截圖 (html5 + canvas)

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

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