<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: relative;
overflow: hidden;
background: #EEE;
width: 100%;
height: 667px;
}
#bg, #mask-bg {
position: absolute;
width: 100%;
height: 667px;
background-size: cover;
}
#mask-bg{
top:9px;
mask-image: url(mask.png);
-webkit-mask-image: url(mask.png);
}
input {
height: 60px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<p id="bg"></p>
<p id="mask-bg"></p>
</div>
<input type="file">
<script>
var input = document.querySelector('input'),
bg = document.querySelector('#bg'),
maskBg = document.querySelector('#mask-bg');
input.onchange = function () {
var src = getObjectURL(this.files[0]);
setBg(src);
};
function setBg(src){
bg.style.backgroundImage = 'url(' + src + ')';
maskBg.style.backgroundImage = 'url(' + src + ')';
}
/**
* 通過選擇的文件獲取其圖片路徑（blob）
* @param file
* @returns {*}
*/
function getObjectURL(file) {
var url = null;
console.log(window.createObjectURL)
console.log(window.URL)
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
}
</script>
</body>
