<template>
<div :style="`width:${width}px;height:${height}px`">
<img :src="imgSrc" v-if="!isGray||!isIE11">
<div v-else>
<svg overflow="hidden" preserveAspectRatio="none slice" :width="width" :height="height">
<image overflow="visible" preserveAspectRatio="none slice" x='0' y='0' :width="width" :height="height" :xlink:href="imgSrc" filter="url(#grayscle)"></image>
</svg>
</div>
</div>
</template>
<script>
export default {
name:"grayImg",
props:{
imgSrc:{
type:String,
default:""
},
width:{
type:[Number,String],
default:150
},
height:{
type:[Number,String],
default:90
}
},
computed: {
isGray() {
return window.sessionStorage.getItem('skin')=='default';
},
isIE11(){
return navigator.userAgent.indexOf('Trident')!==-1;
}
},
}
</script>
<style lang="scss" scoped>
img{
height:100%;
width:100%;
}
</style>
// <template>
// <svg xmlns=" http://www.w3.org/2000/svg" style="display:none">
// <filter id="grayscale">
// <feColorMatrix type="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
// </filter>
// </svg>
// </template>
// <script>
// export default {
// name:"grayscale"
// }
// </script>
it圖片過濾灰色兼容
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門畅厢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冯痢,“玉大人,你說我怎么就攤上這事框杜∑珠梗” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵咪辱,是天一觀的道長振劳。 經(jīng)常有香客問我,道長油狂,這世上最難降的妖魔是什么历恐? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮专筷,結(jié)果婚禮上弱贼,老公的妹妹穿的比我還像新娘。我一直安慰自己磷蛹,他們只是感情好吮旅,可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著味咳,像睡著了一般庇勃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上槽驶,一...
- 文/蒼蘭香墨 我猛地睜開眼蒿秦,長吁一口氣:“原來是場噩夢啊……” “哼烤镐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起棍鳖,我...
- 序言:老撾萬榮一對情侶失蹤炮叶,失蹤者是張志新(化名)和其女友劉穎碗旅,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體镜悉,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡祟辟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了侣肄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旧困。...
- 正文 年R本政府宣布拗盒,位于F島的核電站,受9級特大地震影響锥债,放射性物質(zhì)發(fā)生泄漏陡蝇。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一哮肚、第九天 我趴在偏房一處隱蔽的房頂上張望登夫。 院中可真熱鬧,春花似錦绽左、人聲如沸悼嫉。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽戏蔑。三九已至,卻和暖如春鲁纠,著一層夾襖步出監(jiān)牢的瞬間总棵,已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓捍壤,卻偏偏與公主長得像骤视,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子鹃觉,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 網(wǎng)上搜索了一下,沒找的Swift版本,于是照著Objective-C翻譯了一遍,給UIImage寫了個(gè)擴(kuò)展,現(xiàn)貼出...
- MagicPureGrayOutput github地址:https://github.com/SmileZXLe...
- 這個(gè)屬性解決高度不對勁問題 讓陰影圖層高度和 圖片高度一樣沉填,而圖片高度則是自適應(yīng)的。 wxml
- 效果實(shí)現(xiàn)的代碼是鑒于上一片的博客佑笋,這里只需要修改片元著色器實(shí)現(xiàn)濾鏡效果翼闹,因此對于實(shí)現(xiàn)的代碼將不闡述,具體代碼蒋纬,可以...
- //生成灰色,棕色琼掠,反色圖片1灰拒垃,2棕,3反 - (UIImage*) grayscale:(UIImage*)a...