minimum caracters

[Shmuel83]

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 ?

[Binaryify]

it look normal in my browser, could you provide your code

[Shmuel83]

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>
`