53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<img id="drTarget" :src="url + '?t='+ new Date().getTime()">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DarkroomComponent",
|
|
props: {
|
|
url: {
|
|
type: String
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
dr: null
|
|
}
|
|
},
|
|
updated: function () {
|
|
if (this.dr){
|
|
this.dr.selfDestroy();
|
|
this.dr = null;
|
|
}
|
|
this.setup();
|
|
},
|
|
methods: {
|
|
setup: function () {
|
|
if (!this.dr) {
|
|
const _this2 = this;
|
|
this.dr = new Darkroom('#drTarget', {
|
|
minWidth: 200,
|
|
minHeight: 200,
|
|
maxWidth: '100%',
|
|
maxHeight: '100%',
|
|
plugins: {
|
|
save: {
|
|
callback: function() {
|
|
let dr = this.darkroom;
|
|
_this2.$emit('newImg', dr.sourceCanvas.toDataURL());
|
|
}
|
|
},
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|