Блог

Я создал платформу электронного обучения и хочу получать сертификаты для каждого курса. Преподаватели этих курсов хранят свои подписи в виде изображения base64 в моем mongobd. что я хочу сделать, так это, когда пользователь запросит свой сертификат после прохождения курса, я создам cavas с моим файлом jpeg certifiage и объединю его с подписью инструктора в соответствующем поле, я успешно добавил имя пользователя и все остальное. пожалуйста, как мне добавить эту подпись, вот мой код

 mounted(){
        this.userId = localStorage.getItem('fmruser');
        this.courseId = this.$route.params.courseId;
        this.testId = this.$route.params.testId;
        let object = {
            user : this.userId, 
            test : this.testId, 
            course : this.courseId
        }
        this.fetch_StudentCertificate(object)
        .then(res => {
            this.certUser = res.data.userDetails
            this.certTestLog = res.data.testLog
            this.certCourse = res.data.courseDetails
            this.checkInstitution()
            addTextToImage(
                myImage, 
                this.certUser.firstName  ' ' this.certUser.lastName, 
                this.certCourse.title, 
                this.certCourse.user[0].firstName  ' ' this.certCourse.user[0].lastName,
                "Miss Thelma Ibeh",
                this.certTestLog[0]._id
            );
        })
        
    const gCanvas = this.$refs.device // document.querySelector('#c');
    const gCtx = gCanvas.getContext('2d');
    document.querySelector('#save').addEventListener('click', onSave);


     function addTextToImage(imagePath, studentName, courseName, InstructorName, DirectorName, 
         certificateId ) {

            // Draw Image function
            var date =  (new Date()).toString().split(' ').splice(1,3).join(' ');
            var img = new Image();
            img.src = imagePath;
            var sign = new Image();
            sign.src = signature;
            sign.width = 100;
            sign.height = 50;

            img.onload = function () {
                gCtx.drawImage(img, 0, 0, 800, 500);
                gCtx.lineWidth = 1;
                gCtx.fillStyle = "#000";
                gCtx.lineStyle = "#000";
                gCtx.font = "15px sans-serif";
                gCtx.fillText(studentName, 100, 170);
                gCtx.fillText(courseName, 100, 250);
                gCtx.fillText(date, 170, 310);
                gCtx.fillText(certificateId, 415, 310);
                gCtx.fillText(InstructorName, 80, 400);
                gCtx.fillText(DirectorName, 600, 400);
                //gCtx.drawImage(sign, 400, 410, 450, 460);
                gCtx.drawImage(sign,600, 450, sign.naturalWidth, sign.naturalHeight,600, 450, 100, 50);
                //gCtx.drawImage(sign, 200, 200, 400, 400 * 50 / 10)
                //date
            };
        }
 

Я использовал там фиктивное изображение в качестве знака, но даже это не работает идеально, изображение динамической подписи можно получить с помощью этого маршрута

 <img :src="backEnd 'auth/fetchUserCredential/' certCourse.user[0]._id '/signature'" alt="" >
 

если вам нужна какая-либо информация, которой здесь нет, пожалуйста, укажите ее в разделе комментариев, и я предоставлю