移動端圖片裁剪器，安裝即用

MASAILA 發布于2019-08-23 18:14 / 2955人閱讀

摘要：移動端圖片裁剪器，基于制作的簡單裁剪器項目地址案例演示部分裁剪案例開始裁剪部分演示案例手機模式查看，效果更佳。

h5-cropper

移動端圖片裁剪器，基于 cropperjs 制作的簡單裁剪器

項目地址

https://github.com/sayll/h5-cropper

案例演示

HTML部分：




  
  
  裁剪案例

JS部分：

const img = document.getElementById("image")

document.getElementById("button").onclick = function () {
  var cropper = new window.H5Cropper(img.src, function (base64) {
    img.src = base64
  })
}

演示案例：https://sayll.github.io/h5-cropper/index.html

手機模式查看，效果更佳。

使用方式 直接下載使用

通過下載,直接引用dist/index.js,通過全局的window對象訪問。

const cropper = new window.H5Cropper("http://placekitten.com/g/300/200", function (base64) {
  // to do something
  console.log(base64)
})

npm 下載使用

下載方式：

npm i -S h5-cropper

使用方式：

import H5Cropper from "h5-cropper"
const cropper = new H5Cropper("http://placekitten.com/g/300/200", function (base64) {
  // to do something
  console.log(base64)
})

接口定義

調用方式：

new H5Cropper(url: string, callback?: (data64: string) => any, options?: CropperjsOptions)

參數	描述
url	圖片地址或base64
callback	裁剪完成后的回調函數，接收最終的圖片base64
options	一些高級配置，詳細請查看插件Cropperjs

GPU云服務器云服務器移動端js圖片打包 H5移動端上傳圖片圖片裁剪圖片裁剪比例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104879.html

RageFrame 一個 Yii2 + AdminLET 免費開源多商戶通用后臺管理系統

摘要：極致的插件機制，系統內的系統，安裝和卸載不會對原來的系統產生影響強大的功能完全滿足各階段的需求，支持用戶多端訪問后臺微信前臺等，系統中的系統。多入口模式，多入口分為后臺前端，微信，對內接口，對外接口，不同的業務，不同的設備，進入不同的入口。 RageFrame 2.0 為二次開發而生，讓開發變得更簡單項目地址：https://github.com/jianyan74/... 前言這...

sunny5541 2019-07-01 14:08 評論0 收藏0
RageFrame 一個 Yii2 + AdminLET 免費開源多商戶通用后臺管理系統

摘要：極致的插件機制，系統內的系統，安裝和卸載不會對原來的系統產生影響強大的功能完全滿足各階段的需求，支持用戶多端訪問后臺微信前臺等，系統中的系統。多入口模式，多入口分為后臺前端，微信，對內接口，對外接口，不同的業務，不同的設備，進入不同的入口。 RageFrame 2.0 為二次開發而生，讓開發變得更簡單項目地址：https://github.com/jianyan74/... 前言這...

Ali_ 2019-07-25 14:50 評論0 收藏0