国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

whlong / 1660人閱讀

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

image-process-tools

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

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

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

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

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

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

源碼地址: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,
    // 觸發(fā)文件選擇的元素
    selector: "#buttonId",
    // 限制寬度等比縮放,則只需設(shè)置width值
    // 限制高度等比縮放,則只需設(shè)置height值
    // 同時設(shè)置了width、height值,則會對圖片按尺寸裁剪
    width: 600,
    height: 400,
    // 裁剪容器按鈕樣式
    submitStyle: "",
    cancelStyle: "color: red",
    // 最大文件限制
    maxSize: 50,
    success: function (result) {
      // 返回數(shù)據(jù)
      console.log(result);
    },
    error: function (err) {
      console.error(err);
    }
  })

不初始化ZxImageProcess,直接使用期內(nèi)部方法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 參數(shù)

auto true|false 自動處理圖片,裁剪時不彈出手動位置調(diào)整框。默認為false。

selector: #buttonId 選擇圖片按鈕id,支持id、class選擇器,或者HTMLElement對象(僅ZxImageProcess實例化時有效)

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

1.限制寬度縮放,則只需設(shè)置width值。

2.限制高度縮放,則只需設(shè)置height值。

3.同時設(shè)置了width、height值,則會對圖片按尺寸裁剪

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

maxSize: 50 文件大小最大限制,單位M(兆)。默認50M

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

base64: base64 圖片base64數(shù)據(jù)

blob: blobData 處理成功的圖片數(shù)據(jù),可直接上傳至服務(wù)器,或賦值給input利用form表單提交。

element: canvas canvas節(jié)點對象

height: 640 處理完成的圖片寬度

width: 640 處理完成的圖片寬度

url: blob:url

raw: Object 原圖片相關(guān)屬性(寬高/文件大小/Base64編碼數(shù)據(jù)/類型/元素節(jié)點)

size: 21100 處理完成的圖片文件大小

type: image/png 處理完成的圖片類型

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

submitStyle: color: #f00 裁剪框確認按鈕樣式(僅ZxImageProcess實例化時有效)

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

方法

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)整裁剪圖片

Error
code message說明
1 初始化參數(shù)selector不合法,非有效字符串或DOM元素
2 未獲取到body元素
3 未獲取到selector對應(yīng)DOM元素
4 未選中任何文件
5 調(diào)用方法reCrop()時,未獲取到之前的文件數(shù)據(jù)
7 處理的file非圖片或視頻文件
8 讀取file文件數(shù)據(jù)出錯
11 預(yù)加載圖片數(shù)據(jù)出錯
12 文件太大,超過了最大限制
13 視頻截圖失敗,視頻資源可能不在同域中
21 圖片手動裁剪,設(shè)置預(yù)覽圖片src失敗
22 用戶取消了裁剪位置設(shè)置

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/98298.html

相關(guān)文章

  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點是,并且最后會附上一個小應(yīng)用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機圖像處理是一門很成熟的技術(shù),任何一門可操作系統(tǒng)接口的語言都能很輕易的實現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務(wù)純前端實現(xiàn)的圖像...

    Anshiii 評論0 收藏0
  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點是,并且最后會附上一個小應(yīng)用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機圖像處理是一門很成熟的技術(shù),任何一門可操作系統(tǒng)接口的語言都能很輕易的實現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務(wù)純前端實現(xiàn)的圖像...

    CatalpaFlat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<