html svg 背景图片,使用SVG编码作为CSS背景图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

console.clear();

Vue.component('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 https://cdpn.io/rrOZQQ */';

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+'")';

}

}

});