Closed Shmuel83 closed 4 years ago
it look normal in my browser, could you provide your code
Thank you for your message. I resolved my issue by an used a lenght of text
PROPS
autoColor:true
background:"rgba(0,0,0,0)"
backgroundColor:"#FFFFFF"
backgroundDimming:"rgba(0,0,0,0)"
bgSrc:undefined
binarize:false
binarizeThreshold:128
bindElement:true
callback:ƒ bound getData()
colorDark:"#e4041c"
colorLight:"#FFFFFF"
correctLevel:1
dotScale:1
gifBgSrc:undefined
logoBackgroundColor:"rgba(255,255,255,1)"
logoCornerRadius:8
logoMargin:0
logoScale:0.2
logoSrc:"images/5ed81a5c90a76.png"
margin:20
qid:undefined
size:200
text:"aa"
whiteMargin:false
`
<template>
<div class="container">
<!-- Material form contact -->
<!-- Name -->
<div class="md-form mt-3">
<input type="url" name="inputDataQRCode" id="inputDataQRCode" class="form-control" placeholder="https://..." v-model="inputDataQRCode" maxlength="260 />
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="true" id="addLogo" v-model="checkedLogo" @change="choiceLogo($event)" >
</div>
</div>
<!--Message-->
<div v-if="inputDataQRCode">
<div class="row">
<!--<a :href="urlQRCode" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" download="mon-restaurant.png" @click="save">Télécharger le QRCode en image</a>
-->
<input type="submit" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" value="Télécharger le QRCode en image"/>
</div>
<div class="row">
<div class="col-sm">
<label for="vueqr">Votre QRCode</label>
<vue-qr
:logoSrc="savesrclogo"
:text="inputDataQRCode"
:colorDark="color"
:callback="getData"
:correctLevel=1
:whiteMargin="false"
></vue-qr>
<p>Testez-le avec votre lecteur QRCode avant d'enregistrer</p>
</div>
<div class="col-sm">
<label for="colorpicker">Modifier la couleur</label>
<color-picker
id="colorpicker"
theme="light"
:color="color"
:sucker-hide="false"
:sucker-canvas="suckerCanvas"
:sucker-area="suckerArea"
@changeColor="changeColor"
@openSucker="openSucker"
:colors-default="colorpanel"
/>
</div>
</div>
<!-- Send button -->
</div>
<label v-else >Commencez à taper votre lien internet pointant vers votre menu, votre QRCode apparaîtra ici !</label>
</div>
</template>
<script>
import * as Vibrant from 'node-vibrant'
import VueQr from 'vue-qr';
export default {
data() {
return {
color: '#3a683f',
suckerCanvas: null,
suckerArea: [],
isSucking: true,
inputDataQRCode: "",
urlQRCode: null,
checkedLogo: ["true"],
savesrclogo: this.srclogo,
isChecked: "checked",
completeDataQRCode: null,
colorpanel: []
}
},
props: {
srclogo: {
type: String,
default: '/img/menu_qrcode.png'
},
uuid: {
type:String,
default:''
}
},
methods: {
changeColor(color) {
const { r, g, b, a } = color.rgba
this.color = `rgba(${r}, ${g}, ${b}, ${a})`
},
openSucker(isOpen) {
if (isOpen) {
![téléchargement (7)](https://user-images.githubusercontent.com/8431375/83901130-8a746300-a75a-11ea-883f-f14e8fa41ce8.png)
console.log("open")
} else {
// this.suckerCanvas && this.suckerCanvas.remove
console.log("closed")
}
},
getData(dataUrl){
console.log(dataUrl);
this.urlQRCode = dataUrl;
},
save(){
console.log("save");
},
choiceLogo(event){
console.log(this.checkedLogo)
if(this.checkedLogo=="true") {
this.savesrclogo = this.srclogo
}
else {
this.savesrclogo = ""
}
},
},
mounted() {
console.log('Component mounted.')
console.log(this.srclogo)
Vibrant.from(this.srclogo).getSwatches().then((palette) => {
console.log(palette)
Object.entries(palette).forEach(([key, value]) => {
console.log(`${key} ${value.hex}`);
this.colorpanel.push(value.hex)
});
this.color = this.colorpanel[0]
});
}
}
</script>
`
Hello, thank you, that's help me a lot
When lenght of text is < 20 caracters, impossible to flash code with a logo When lenght of text is < 17 caracters, impossible to flash code without a logo Why, that's possible to fixed this issue ?