整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給小伙伴們分享一個超棒的Vue圖片任意裁剪插件VueImgCutter。
vue-img-cutter 基于 vue2.x 構建的輕量級剪切圖片組件。支持移動圖像、放大縮小圖片、任意移動圖片、固定比例/尺寸、遠程圖片裁剪等功能。
功能特色
安裝
$ npm i vue-img-cutter -S使用插件
<template>
<div id="app">
<ImgCutter
label="選擇圖片"
:isModal="false"
:boxWidth="800"
:boxHeight="500"
:cutWidth="300"
:cutHeight="300"
:sizeChange="true"
:moveAble="true"
WatermarkText="水印文字"
v-on:cutDown="cutDown"
>
<div class="btn btn-primary" slot="open">選擇本地圖片</div>
</ImgCutter>
</div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default {
components: { ImgCutter },
data() {
return {}
},
methods: {
cutDown(res) {
let imgSrc = res.dataURL;
console.log(imgSrc);//輸出為base64數據
}
}
}
</script>設置模態彈框模式
<ImgCutter :isModal="true"></ImgCutter>模態框模式
參數配置
插槽Slot
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">選擇圖片</button>
</ImgCutter>返回值
最后附上示例及項目地址
# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 倉庫地址
https://github.com/acccccccb/vue-img-cutterok，就介紹到這里。希望對你有幫助！感興趣的同學可以去了解下哈~
文章首發挑戰賽#
Vue Cropper 是一款實用的 JavaScript 圖片裁剪插件，基于 Vue.js 實現了在 web 上對圖片的放大縮小、旋轉、拖選區域裁剪、圖片壓縮上傳等功能，API 也很簡單，使用很方便。
ackground-clip 屬性
規定背景的繪制區域：
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
margin: 50px auto;
padding: 50px;
border: 50px solid rgba(255,0,0,0.5);
background-image: url(img/yangmi.jpg);
/*規定背景的繪制區域：*/
/*background-clip: border-box;*//*背景會填充到邊框*/
/*background-clip: padding-box;*/
background-clip: content-box;
}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>background-size 屬性
background-size: length|percentage|cover|contain;
length 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
percentage 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
