整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天看到一款前端圖片剪裁開源項(xiàng)目- vue-picture-cut，基于vue開發(fā)，功能太逆天，特來分來，建議收藏；
先來個(gè)預(yù)覽看看：
功能在線演示站點(diǎn)：
https://htmlpreview.github.io/?https://raw.githubusercontent.com/987153776/vue-picture-cut/master/dist/index.html這是一款基于vue和typescript開發(fā)的一款圖片剪裁處理工具。優(yōu)點(diǎn)：原生、輕量、使用簡(jiǎn)單、功能全面、擴(kuò)展性強(qiáng)。目前功能：縮放、翻折、旋轉(zhuǎn)、邊緣校驗(yàn)、矩形剪裁、任意(橢)圓剪裁。
碼云開源地址：
https://gitee.com/light-year/vue-picture-cutgithub開源地址：
https://github.com/987153776/vue-picture-cutEnglish | 中文
基于vue和typescript開發(fā)的一款圖片剪裁處理工具
優(yōu)點(diǎn)：原生、輕量、使用簡(jiǎn)單、功能全面、擴(kuò)展性強(qiáng)
目前功能：縮放、翻折、旋轉(zhuǎn)、邊緣校驗(yàn)、矩形剪裁、任意(橢)圓剪裁
關(guān)于縮放：鼠標(biāo)（鼠標(biāo)滾輪縮放）、觸屏（雙指縮放）
github主頁
碼云主頁
demo演示(github)
demo演示(碼云)
0.x版本點(diǎn)這里【此版本bug太多，不再維護(hù)】
1、在main.js中全局引用
import Vue from 'vue';
import 'vue-picture-cut/lib/vue-picture-cut.css';
import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);2、或者在.vue文件中單獨(dú)引用
<template>
<div>
<input type="file" accept="image/*" @change="inputChange"/>
<vue-picture-cut :src="src" @on-change="cutChange"/>
</div>
</template>
<script>
import { VuePictureCut } from 'vue-picture-cut';
export default {
// ...
components: {
VuePictureCut
},
data () {
return {
src: null,
blob: null,
base64: null
}
},
methods: {
inputChange(e) {
const file=e.target.files[0];
this.src=URL.createObjectURL(file);
},
/**
* @param blob BLOB對(duì)象
* @param base64 base64字符串
*/
cutChange({ blob, base64 }) {
this.blob=blob;
this.base64=base64;
}
}
// ...
}
</script>
<style>
@import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>3、注意
組件在使用時(shí)，寬高跟隨父級(jí)標(biāo)簽，所以需要設(shè)置父級(jí)標(biāo)簽的寬高。
全局引入時(shí)
import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);此時(shí)會(huì)注冊(cè)：VuePictureCut、VuePictureCutMask、VuePictureCutMenu三個(gè)組件。
獨(dú)立引用
import {
VuePictureCut,
VuePictureCutMask,
VuePictureCutMenu,
Bezier,
createAnimation,
Tool,
createUtils
} from 'vue-picture-cut';組件：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。工具類：Bezier、createAnimation、Tool、createUtils。
slot插槽： default、menu
使用：
/demo/demo1.html
/demo/demo2.html
<template>
<vue-picture-cut
ref="pictureCut"
:src="src"
:magnification="magnification"
:init-angle="initAngle"
:msk-option="mskOption"
:max-pixel="maxPixel"
:encoder-options="encoderOptions"
:format="format"
:rotate-control="rotateControl"
:menu-position="menuPosition"
:menu-thickness="menuThickness"
:background-color="backgroundColor"
@on-change="onChange"
/>
</template>屬性：
事件：
方法：
VuePictureCutMask是VuePictureCut默認(rèn)slot插槽組件，是控制遮罩裁剪框相關(guān)的組件，使用它與不使用它效果一樣。
使用：
/demo/demo3.html
<template>
<vue-picture-cut
:src="src"
:magnification="magnification"
:init-angle="initAngle"
:rotate-control="rotateControl"
:max-pixel="maxPixel"
:encoder-options="encoderOptions"
:format="format"
:background-color="backgroundColor"
@on-change="onChange"
>
<vue-picture-mask
:width="width"
:height="height"
:is-round="isRound"
:resize="resize"
:color="color"
:border-color="borderColor"
/>
</vue-picture-cut>
</template>屬性：
菜單欄組件，效果參見Demo。
使用：
/demo/demo4.html
/demo/demo5.html
<template>
<vue-picture-cut
:src="src"
:magnification="magnification"
:init-angle="initAngle"
:rotate-control="rotateControl"
:msk-option="mskOption"
@on-change="cutChange"
>
<vue-picture-menu
slot="menu"
:cancel="false"
:max-pixel="maxPixel"
:encoder-options="encoderOptions"
:format="format"
:theme="theme"
confirm-name="Ok"
cancel-name="Cancel"
size-auto-name="auto"
size-raw-name="raw"
menu-rotate-name="Rotate"
@on-change="onChange"
@on-cancel="onCancel"
/>
</vue-picture-cut>
</template>屬性：
事件：
import { Bezier } from 'vue-picture-cut';
const bezier=Bezier();
bezier.setOpt(Bezier.BEZIER['ease-in-out']);
const y=bezier.getPoint(0.5);
console.log(y);鍵
值
說明
linear | [0.0, 0.0, 1.0, 1.0] | 線性過渡 |
ease | [0.25, 0.1, 0.25, 1.0] | 平滑過渡 |
ease-in | [0.42, 0, 1.0, 1.0] | 由慢到快 |
ease-out | [0, 0, 0.58, 1.0] | 由快到慢 |
ease-in-out | [0.42, 0, 0.58, 1.0] | 由慢到快再到慢 |
一個(gè)無參的構(gòu)造函數(shù)，內(nèi)部調(diào)用了setOptByString('ease')方法
方法名
說明
參數(shù)
返回值
setOpt | 設(shè)置貝塞爾曲線類型 | (arg: string , ParamsInterface='ease') | Bezier對(duì)象本身 |
setOptByString | 設(shè)置貝塞爾曲線類型 | BEZIER預(yù)設(shè)值(arg='ease') | Bezier對(duì)象本身 |
setOptByArr | 設(shè)置貝塞爾曲線類型 | (x1: number, y1: number, x2: number, y2: number) | Bezier對(duì)象本身 |
getPoint | 返回x坐標(biāo)對(duì)應(yīng)的y坐標(biāo)值 | (x: number) 0~1之間 | 對(duì)應(yīng)y坐標(biāo)，0~1之間 |
ParamsInterface為包含4個(gè)number類型的數(shù)組。
import { createAnimation } from 'vue-picture-cut';
const animation=createAnimation(option);createAnimation會(huì)返回一個(gè)Animation對(duì)象
參數(shù)
說明
類型
可選值
必需
默認(rèn)值
duration | 動(dòng)畫持續(xù)時(shí)間，單位毫秒 | number | —— | false | 1000 |
timing | 動(dòng)畫的過渡類型 | string、number[] | Bezier.BEZIER中的值，或者ParamsInterface類型 | false | ease |
delay | 動(dòng)畫的延遲時(shí)間，單位毫秒 | number | —— | false | 0 |
iteration | 動(dòng)畫循環(huán)次數(shù)，infinite為無限循環(huán) | number、string | 'infinite'或正整數(shù) | false | 0 |
direction | 動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng) | string | normal(默認(rèn)，正向運(yùn)動(dòng))；reverse(反向運(yùn)行)；alternate(先正向，后反向，并交替)；alternate-reverse(先反向，后正向，并交替)。 | false | normal |
change | 回調(diào)函數(shù)，接收參數(shù)x，x在0~1之間，動(dòng)畫在這里處理 | Function | —— | false | —— |
end | 回調(diào)函數(shù)，動(dòng)畫結(jié)束時(shí)執(zhí)行 | Function | —— | false | —— |
方法名
說明
參數(shù)
返回值
start | 開始動(dòng)畫 | —— | Animation對(duì)象本身 |
abort | 中止動(dòng)畫 | —— | —— |
import { Tool } from 'vue-picture-cut';
Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
.then(image=> {
// 加載圖片成功
// image為Image對(duì)象
}, ()=> {
// 加載圖片失敗
});<template>
<div>
<input type="file" accept="image/*" @change="inputChange"/>
<vue-picture-cut ref="pictureCut" :src="src"/>
<button @click="doCut">裁剪</button>
</div>
</template>
<script>
import { VuePictureCut, createUtils } from 'vue-picture-cut';
export default {
// ...
components: {
VuePictureCut
},
data () {
return {
utils: null,
src: null,
blob: null,
base64: null
}
},
mounted() {
this.utils=createUtils(this.$refs['pictureCut']);
},
methods: {
inputChange(e) {
const file=e.target.files[0];
this.src=URL.createObjectURL(file);
},
doCut() {
const res=this.utils.cut();
if (res) {
this.blob=res.file; // BLOB對(duì)象
this.base64=res.src; // base64字符串
}
}
}
// ...
}
</script>
<style>
@import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>...待編輯
暫時(shí)可以參考src/App.vue和src/lib/views/vue-picture-cut-menu.vue
...文檔待編輯
<img src="./post-img.jpg" />注：HTML有多種標(biāo)簽中使用的屬性，屬性的作用是描述元素，src就是屬性，為了描述圖片。圖片的路徑可以是絕對(duì)路徑也可以是相對(duì)路徑。
<img src="./post-img.jpg" alt="HTML 代碼圖片" />若我們圖片無法顯示，將會(huì)如下圖顯示:
<img src="./post-img.jpg" alt="HTML 代碼圖片" width="500" height="200" /><html lang="zh-CN"><head>
<meta charset="UTF-8" />
</head>注：meta元素代表元數(shù)據(jù),【charset="UTF-8"】，表示字符集編碼格式為UTF-8
uniapp開發(fā)時(shí)，富文本里的圖片路徑因?yàn)槭窍鄬?duì)路徑而無法顯示，這時(shí)候就需要用正則方式給圖片路徑加上絕對(duì)地址（http://域名），讓uniapp能正常顯示。
另外，因?yàn)楦晃谋纠锏膱D片因?yàn)閷挾忍珜挘瑢?dǎo)致顯示超出界面，同樣，可以用正則方式加以修正（但推薦采用在uniapp模板里加CSS樣式控制）
1、把uniapp里富文本的圖片相對(duì)路徑改為絕對(duì)路徑（加上https(s)://域名）的形式，代碼如下：
this.content1 = content1.replace(/\<img src="/gi, '<img src="http://localhost:2000');//content1為富文本里的內(nèi)容2、修改富文本里的圖片樣式，代碼如下：
A、推薦方式，即非正則方式：
<view class="detail">
<rich-text :nodes="content1"></rich-text>
</view>
<style>
.detail img{max-width:100%;}
</style>B、正則方式：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
