資訊專(zhuān)欄INFORMATION COLUMN
摘要：移動(dòng)端圖片裁剪器，基于制作的簡(jiǎn)單裁剪器項(xiàng)目地址案例演示部分裁剪案例開(kāi)始裁剪部分演示案例手機(jī)模式查看，效果更佳。
h5-cropper
移動(dòng)端圖片裁剪器，基于 cropperjs 制作的簡(jiǎn)單裁剪器
項(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ī)模式查看，效果更佳。使用方式 直接下載使用
通過(guò)下載,直接引用dist/index.js,通過(guò)全局的window對(duì)象訪(fǎng)問(wèn)。
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 | 一些高級(jí)配置，詳細(xì)請(qǐng)查看插件Cropperjs |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104879.html
摘要：極致的插件機(jī)制，系統(tǒng)內(nèi)的系統(tǒng)，安裝和卸載不會(huì)對(duì)原來(lái)的系統(tǒng)產(chǎn)生影響強(qiáng)大的功能完全滿(mǎn)足各階段的需求，支持用戶(hù)多端訪(fǎng)問(wèn)后臺(tái)微信前臺(tái)等，系統(tǒng)中的系統(tǒng)。多入口模式，多入口分為后臺(tái)前端，微信，對(duì)內(nèi)接口，對(duì)外接口，不同的業(yè)務(wù)，不同的設(shè)備，進(jìn)入不同的入口。 RageFrame 2.0 為二次開(kāi)發(fā)而生，讓開(kāi)發(fā)變得更簡(jiǎn)單 項(xiàng)目地址：https://github.com/jianyan74/... 前言 這...
摘要：極致的插件機(jī)制，系統(tǒng)內(nèi)的系統(tǒng)，安裝和卸載不會(huì)對(duì)原來(lái)的系統(tǒng)產(chǎn)生影響強(qiáng)大的功能完全滿(mǎn)足各階段的需求，支持用戶(hù)多端訪(fǎng)問(wèn)后臺(tái)微信前臺(tái)等，系統(tǒng)中的系統(tǒng)。多入口模式，多入口分為后臺(tái)前端，微信，對(duì)內(nèi)接口，對(duì)外接口，不同的業(yè)務(wù)，不同的設(shè)備，進(jìn)入不同的入口。 RageFrame 2.0 為二次開(kāi)發(fā)而生，讓開(kāi)發(fā)變得更簡(jiǎn)單 項(xiàng)目地址：https://github.com/jianyan74/... 前言 這...
閱讀 2847·2023-04-25 20:02
閱讀 1447·2021-11-11 16:55
閱讀 634·2021-09-26 09:46
閱讀 6226·2021-09-22 15:55
閱讀 1831·2021-08-09 13:41
閱讀 1585·2019-08-30 15:52
閱讀 2387·2019-08-30 14:13
閱讀 3307·2019-08-26 13:48
