背景图片,使用SVG编码作为CSS背景图"/>
html svg 背景图片,使用SVG编码作为CSS背景图
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
console.clear();
Vueponent('file-upload',{
template: `
`,
data: ()=>({
dragging: false,
}),
methods:{
loadFiles(e){
e = e || window.event;
this.dragLeave(e);
var files = Array.from(e.target.files || e.dataTransfer.files || this.$ref.input.files),
len = files.length,
i = 0,
completed = [];
files.forEach((file) => {
var reader = new FileReader();
reader.onloadend = (ev)=>{
this.$emit('load', reader.result, reader, file);
//completed.push(reader.result);
//if ( completed.length >= files.length ) { this.$emit('loaded',completed); }
};
reader.readAsText(file);
//reader.readAsDataURL(file);
});
},
dragOver(e){ e.preventDefault(); /* Essential */ },
dragEnter(){ this.dragging = true },
dragLeave(e){ this.dragging = false; e.preventDefault(); },
}
});
new Vue({
el: '.svg-bg',
data: ()=>({
input: `
`
}),
computed: {
output(){
let url = this.encodeSVG(this.optimized);
document.body.style.backgroundImage = url;
let msg = 'background-image: ' + url + ';' +
'
/* SVG encoded with */';
return msg;
},
optimized(){
return this.input
.replace(/\/g, '')
.replace(/(\)/g, '')
.replace(/([\s\n]+)/g,' ');
}
},
methods: {
loaded(f){
console.log('file loaded!', typeof f, f);
this.input = f;
},
copy(){
var range = document.createRange();
range.selectNode(this.$refs.output);
window.getSelection().addRange(range);
try {
// Now that we've selected the anchor text, execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
},
encodeSVG(svg) {
svg = svg + '';
var b64 = encodeURIComponent(svg.replace(/\|\/g, ''))
.replace(/%20/g," ")
.replace(/%3D/g,"=")
.replace(/%3A/g, ':') // ditto colons
.replace(/%2F/g, '/') // ditto slashes
.replace(/%22/g, "'"); // replace quotes with apostrophes (may break certain SVGs)
return 'url("data:image/svg+xml;charset=utf-8,'+b64+'")';
}
}
});
更多推荐
html svg 背景图片,使用SVG编码作为CSS背景图
发布评论