資訊專欄INFORMATION COLUMN
摘要：移動端圖片裁剪器，基于制作的簡單裁剪器項(xiàng)目地址案例演示部分裁剪案例開始裁剪部分演示案例手機(jī)模式查看，效果更佳。
h5-cropper
移動端圖片裁剪器，基于 cropperjs 制作的簡單裁剪器
項(xiàng)目地址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
手機(jī)模式查看，效果更佳。使用方式 直接下載使用
通過下載,直接引用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)
})
接口定義
調(diào)用方式：
new H5Cropper(url: string, callback?: (data64: string) => any, options?: CropperjsOptions)
| 參數(shù) | 描述 |
|---|---|
| url | 圖片地址或base64 |
| callback | 裁剪完成后的回調(diào)函數(shù)，接收最終的圖片base64 |
| options | 一些高級配置，詳細(xì)請查看插件Cropperjs |
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104879.html
摘要：極致的插件機(jī)制，系統(tǒng)內(nèi)的系統(tǒng)，安裝和卸載不會對原來的系統(tǒng)產(chǎn)生影響強(qiáng)大的功能完全滿足各階段的需求，支持用戶多端訪問后臺微信前臺等，系統(tǒng)中的系統(tǒng)。多入口模式，多入口分為后臺前端，微信，對內(nèi)接口，對外接口，不同的業(yè)務(wù)，不同的設(shè)備，進(jìn)入不同的入口。 RageFrame 2.0 為二次開發(fā)而生，讓開發(fā)變得更簡單 項(xiàng)目地址：https://github.com/jianyan74/... 前言 這...
摘要：極致的插件機(jī)制，系統(tǒng)內(nèi)的系統(tǒng)，安裝和卸載不會對原來的系統(tǒng)產(chǎn)生影響強(qiáng)大的功能完全滿足各階段的需求，支持用戶多端訪問后臺微信前臺等，系統(tǒng)中的系統(tǒng)。多入口模式，多入口分為后臺前端，微信，對內(nèi)接口，對外接口，不同的業(yè)務(wù)，不同的設(shè)備，進(jìn)入不同的入口。 RageFrame 2.0 為二次開發(fā)而生，讓開發(fā)變得更簡單 項(xiàng)目地址：https://github.com/jianyan74/... 前言 這...
閱讀 2920·2023-04-25 20:02
閱讀 1522·2021-11-11 16:55
閱讀 698·2021-09-26 09:46
閱讀 6438·2021-09-22 15:55
閱讀 1887·2021-08-09 13:41
閱讀 1637·2019-08-30 15:52
閱讀 2443·2019-08-30 14:13
閱讀 3481·2019-08-26 13:48
