สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

[fonfonn]

ตั้งค่าตัว port และ ip

โค้ด: เลือกทั้งหมด

let configjs = '8000'
let IPjs = '127.0.0.1'

สามารถนำเอาไปใส่หลังเรากำหนดตัวแปลและแปลงเป็น base64 ใน js

โค้ด: เลือกทั้งหมด

function getInput() {
 
    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var file = document.getElementById("text-filepdf").files[0]
    console.log("ไฟล์ ", file);

    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    };
    #ส่วนที่ใส่เพิ่ม
    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
    
    
      url: `http://${IPjs}:${configjs}/api_pdftopic`,
      data: JSON.stringify({ data: reader.result }), //แนะนำให้ใช้ชื่อเดี๋ยวกันไปเลยก็ได้ครับ จะง่ายดี
      success: function (data) {
    
          console.log(data);
          nubkumeiei(data.prefix, name)
      },
      dataType: "json",
    });
 }

ส่วนอันนี้ก็นำไปใส่ในตัวของ main.py

โค้ด: เลือกทั้งหมด

class data(BaseModel):
    data: str 

แบบนี้ถูกไหมคะ ในการนำไปใช้

[fonfonn]

จากที่สอบถามเพิ่มเติมสามารถเรียกใช้งาน API ในการแปลงไฟล์เป็นภาพได้แล้วค่ะ
โค้ด js ในการใช้งานส่งค่าไฟล์ที่ Input เพื่อใช้งาน API ในการแปลงไฟล์เป็นภาพ

โค้ด: เลือกทั้งหมด

function getInput() {
 
    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var file = document.getElementById("text-filepdf").files[0]
    console.log("ไฟล์ ", file);
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);

      e = reader.result.slice(28);
      console.log(e);
      $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
    
          url: `http://${IPjs}:${configjs}/api_pdftopic`,
          data: JSON.stringify({ data: e}),  // ส่งข้อมูล
        success: function (data) {
    
            console.log(data);
        },
        dataType: "json",
      });

      console.log(typeof (reader.result))
   }

    reader.onerror = function (error) {
      console.log('Error: ', error);
    };

    
  }

สามารถแปลงไฟล์เป็นภาพได้ โดยเมื่อ Input ไฟล์ และมีการแปลงเป็น base64 จากนั้น จะเป็นการส่งค่าไปยังตัว API โดยใช้ชื่อว่า data

ส่วนของ py. รับตัวแปลก็ตั้งชื่อให้ตรงกับ list ที่เราส่งไป

โค้ด: เลือกทั้งหมด

class data(BaseModel):
    data: str 

และเรียกใช้งานผ่านตัว API ที่สร้างไว้

โค้ด: เลือกทั้งหมด

@app.post('/api_pdftopic')
async def read_pdf(request: data):
    dt = datetime.now()
    ts = str(datetime.timestamp(dt))
    directory = "pdf_to_image" + ts
    parent_dir = PARTH
    path = os.path.join(parent_dir, directory)
    os.mkdir(path)
    attach_fname = 'PDF_File.pdf'
    attach_fname_jpj = attach_fname.replace(".pdf", ".jpg")
    jpeg_report_path = os.path.join(path, attach_fname_jpj)
    fname_new = ' "' + jpeg_report_path + '"'
    pdf_report_path = os.path.join(path, attach_fname)
    with open(pdf_report_path, 'wb') as theFile:
         theFile.write(base64.b64decode(request.data))

    process = subprocess.Popen(r'Magick convert ' + pdf_report_path + fname_new,stdout=subprocess.PIPE, stderr=subprocess.PIPE)
    out, err = process.communicate()

    file_len = len([name for name in os.listdir(path) if
                    os.path.isfile(os.path.join(path, name))])
    
    image_base_64 = []
    for no in range(file_len -1):
        if file_len > 2:
            new = "-%s.jpg" % no
        else:
            new = ".jpg"
        name_jpg = attach_fname.replace(".pdf", new)
        jpeg_report_path = os.path.join(path, name_jpg)
        with open(jpeg_report_path, "rb") as image_file:
            image_base_64.append({'base64_Img': base64.b64encode(image_file.read()),})
        #os.unlink(jpeg_report_path)
    #os.unlink(pdf_report_path)
    #os.rmdir(path)
    
    return image_base_64

[fonfonn]

จากการทำงาน ใส่ ajax ในการทำลายน้ำด้วยข้อความ

โค้ด: เลือกทั้งหมด

function getInputWatermarkTXT() {
    var name = document.getElementById("text-name").value
      console.log("ชื่อผู้ใช้ ", name);
      var file = document.getElementById("text-filepdf").files[0]
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
      e = reader.result.slice(28);
      console.log(e);
      console.log(typeof (reader.result))
     }

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
      
        url: `http://${IPjss}:${configjss}/api_watermark`,
        data: JSON.stringify({ data: e,username: name}),
        success: function (data)
        
        {
            console.log(data);
        },
        dataType: "json",
      });
  
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
  
      
    }

มีการแจ้ง เออเร่อว่า

e is not defined
at getInputWatermarkTXT (index.js:45:38)
at HTMLInputElement.onclick (index.html:120:155)
getInputWatermarkTXT @ index.js:45
onclick @ index.html:120

[MBMoo]

ประกาศตัวแปล e ด้วย ค่ะ var e = reader.result.slice(28);

[fonfonn]

ประกาศตัวแปล e ด้วย ค่ะ var e = reader.result.slice(28);

ลลองแล้วค่ะ ขึ้น เออเร่อแบบเดิม

โค้ด: เลือกทั้งหมด

var e = reader.result.slice(28); 

e is not defined
at getInputWatermarkTXT (index.js:45:38)
at HTMLInputElement.onclick (index.html:120:155)
getInputWatermarkTXT @ index.js:45
onclick @ index.html:120

[MBMoo]

ขอดูทั้งฟังช่นค่ะ

[fonfonn]

ขอดูทั้งฟังช่นค่ะ

โค้ด: เลือกทั้งหมด

function getInputWatermarkTXT() {
    var name = document.getElementById("text-name").value
      console.log("ชื่อผู้ใช้ ", name);

    var namefile = document.getElementById("text-filepdf").value
    Nfile = namefile.slice(12);
      console.log("ชื่อไฟล์ :",Nfile);

    var typefile = document.getElementById("text-filepdf").value
    Tfile = typefile.slice(-3);
      console.log("ประเภทไฟล์ ",Tfile)

    var textwatermark = document.getElementById("text-watermark").value
      console.log("ข้อความลายน้ำ ", textwatermark);
  
    var rotate = document.getElementById("rtt").value
      console.log("การหมุน ", rotate);

    var file = document.getElementById("text-filepdf").files[0]
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
      var e = reader.result.slice(28);
      console.log(e);
      console.log(typeof (reader.result))
     }
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
      
        url: `http://${IPjss}:${configjss}/api_watermark`,
        data: JSON.stringify({ data: e,username: name}),
        success: function (data)
        
        {
            console.log(data);
        },
        dataType: "json",
      });
  
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
  
      
    }

[fonfonn]

แก้ไขฟังก์ชันและตัว แปร
ฟังก์ชันทำลายน้ำด้วยข้อความ

โค้ด: เลือกทั้งหมด

function getInputWatermarkTXT() {
    var type = 'TXT'
    var name = document.getElementById("text-name").value
      console.log("ชื่อผู้ใช้ ", name);

    var namefile = document.getElementById("text-filepdf").value
    Nfile = namefile.slice(12);
      console.log("ชื่อไฟล์ :",Nfile);

    var typefile = document.getElementById("text-filepdf").value
    Tfile = typefile.slice(-3);
      console.log("ประเภทไฟล์ ",Tfile)

    var textwatermark = document.getElementById("text-watermark").value
      console.log("ข้อความลายน้ำ ", textwatermark);
  
    var rotate = document.getElementById("rtt").value
      console.log("การหมุน ", rotate);

    var file = document.getElementById("text-filepdf").files[0]
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
      pdf_base64 = reader.result.slice(28);
      console.log(pdf_base64);
      console.log(typeof (reader.result))
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
      
        url: `http://${IPjss}:${configjss}/api_watermark`,
        data: JSON.stringify({type:type,username:name,pdf_base64:pdf_base64,name_pdf:namefile,type_file_pdf:typefile,text:textwatermark,rotate:rotate}),
        success: function (data)
        
        {
            console.log(data);
        },
        dataType: "json",
      }); }
    
  
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
  
      
    }

โค้คฝั่ง python

โค้ด: เลือกทั้งหมด

class Watermark(BaseModel):
    type: str
    username: str
    pdf_base64: str
    name_pdf: str
    type_file_pdf: str    
    pic_base64: str
    name_pic: str
    type_file_pic: str 
    text: str
    rotate: int
    
    @app.post('/api_watermark')
async def read_picwatermark(request: Watermark):
    if request.type == "JPG":

        with open(PARTHPDF, 'wb') as pdfFile:
            pdfFile.write(base64.b64decode(request.pdf_base64))
        
        with open(PARTHJPG, 'wb') as picFile:
            picFile.write(base64.b64decode(request.pic_base64))
        
        imgresize = Image.open('picture.jpg')
        imgresize = imgresize.resize((200,133),PIL.Image.ANTIALIAS)
        imgresize.save('newpic.jpg')
        pic = 'newpic.jpg'
        c = canvas.Canvas("WATERMARK.pdf") # ไฟล์ที่จะเขียน
        c.setFillColorCMYK(0, 0, 0, 0, alpha=0.3)
        c.rect(204, 199, 157, 15, stroke=0, fill=1)
        c.setFillColorCMYK(0, 0, 0, 100, alpha=0.3)
        if request.rotate == 45:
            c.rotate(45)
            c.drawImage(pic,150*mm,5)
        if request.rotate == 90:
            c.rotate(90)
            c.drawImage(pic,100*mm,-380)
        if request.rotate == 180:
            c.rotate(180)
            c.drawImage(pic,-150*mm,-470)
        if request.rotate == 270:
            c.rotate(270)
            c.drawImage(pic,-170*mm,250)
        c.save() # บันทึกไฟล์
        
        def create_watermark ( input_pdf ,output, watermark ) :
            watermark_obj = PdfFileReader ( watermark )
            watermark_page = watermark_obj.getPage ( 0 )

            pdf_reader = PdfFileReader(input_pdf)
            pdf_writer = PdfFileWriter()

            for page in range (pdf_reader.getNumPages()):
                page = pdf_reader.getPage(page)
                page.mergePage(watermark_page)
                pdf_writer.addPage(page)

            with open (output,'wb') as out:
                pdf_writer.write (out)

        create_watermark(
                input_pdf='pythonPDF.pdf', #ไฟล์ต้นฉบับ
                output='watermarked.pdf', #ไฟล์ที่สร้างขึ้นใหม่ที่มีลายน้ำ
                watermark='WATERMARK.pdf' #ไฟล์ลายน้ำ
                )
        
        with open("watermarked.pdf", "rb") as file:
            encoded_string = base64.b64encode(file.read())
        #os.unlink('pythonPDF.pdf')
        #os.unlink('WATERMARK.pdf')
        #os.unlink('picture.jpg')
        #os.unlink('watermarked.pdf')
        
        
#ทำลายน้ำด้วยข้อความ
    if request.type == "TXT":
        
        with open(PARTHPDF, 'wb') as pdfFile:
            pdfFile.write(base64.b64decode(request.pdf_base64))
            
        {'Text' : request.text}
        
        txt = request.text
        width = 512
        height = 512
        message = (txt)
        s_wrap_list = textwrap.wrap(message, 20)
        ntext = '\n'.join(s_wrap_list)
        font = ImageFont.truetype("THSarabun.ttf", size=30)
        img = Image.new('RGB', (width, height), color='white')
        imgDraw = ImageDraw.Draw(img)
        textWidth, textHeight = imgDraw.textsize(ntext, font=font)
        xText = (width - textWidth) / 2
        yText = (height - textHeight) / 2
        imgDraw.text((xText, yText), ntext, font=font, fill=(0, 0, 0))
        img.save('result.jpg')
        

        pic = 'result.jpg'
        c = canvas.Canvas("WATERMARK.pdf") # ไฟล์ที่จะเขียน
        c.setFillColorCMYK(0, 0, 0, 0, alpha=0.3)
        if request.rotate == 45:
            c.rotate(45)
            c.drawImage(pic,90*mm,-200)
        if request.rotate == 90:
            c.rotate(90)
            c.drawImage(pic,50*mm,-570)
        if request.rotate == 180:
            c.rotate(180)
            c.drawImage(pic,-200*mm,-650)
        if request.rotate == 270:
            c.rotate(270)
            c.drawImage(pic,-230*mm,60)
        c.save() # บันทึกไฟล์
        
        
        def create_watermark ( input_pdf ,output, watermark ) :
            watermark_obj = PdfFileReader ( watermark )
            watermark_page = watermark_obj.getPage ( 0 )

            pdf_reader = PdfFileReader(input_pdf)
            pdf_writer = PdfFileWriter()

            for page in range (pdf_reader.getNumPages()):
                page = pdf_reader.getPage(page)
                page.mergePage(watermark_page)
                pdf_writer.addPage(page)

            with open (output,'wb') as out:
                pdf_writer.write (out)

        create_watermark(
                input_pdf='pythonPDF.pdf', #ไฟล์ต้นฉบับ
                output='watermarked.pdf', #ไฟล์ที่สร้างขึ้นใหม่ที่มีลายน้ำ
                watermark='WATERMARK.pdf' #ไฟล์ลายน้ำ
                )
        
        with open("watermarked.pdf", "rb") as file:
            encoded_string = base64.b64encode(file.read())
        #os.unlink('pythonPDF.pdf')
        #os.unlink('WATERMARK.pdf')
        #os.unlink('watermarked.pdf')
        #os.unlink('result.jpg')

    return encoded_string

เออเร่อที่เจอ

422 (Unprocessable Entity)

[MBMoo]

ลองส่ง

pic_base64
name_pic
type_file_pic

3 อย่างนี้ไปด้วยแต่ให้เป็น ''

[fonfonn]

ทำการส่ง
pic_base64
name_pic
type_file_pic

และเซ็ต 3 อย่างนี้ไปด้วยแต่ให้เป็น ค่าว่าง

โค้ด: เลือกทั้งหมด

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
      
        url: `http://${IPjss}:${configjss}/api_watermark`,
        data: JSON.stringify({type:type,username:name,pdf_base64:pdf_base64,name_pdf:Nfile,type_file_pdf:Tfile,pic_base64:' ' ,name_pic:' ' ,type_file_pic:' ',text:textwatermark,rotate:rotate}),
        success: function (data)
        
        {
            console.log(data);
        },
        dataType: "json",
      });

สามารถใช้งานได้แล้วค่ะ