{"id":27081,"date":"2026-07-22T04:20:47","date_gmt":"2026-07-22T04:20:47","guid":{"rendered":"https:\/\/umang.pk\/2026\/07\/22\/%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%d9%be%d9%b9-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d8%a8%d8%b1%d8%a7%d8%a4-14\/"},"modified":"2026-07-22T04:20:48","modified_gmt":"2026-07-22T04:20:48","slug":"%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%d9%be%d9%b9-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d8%a8%d8%b1%d8%a7%d8%a4-14","status":"publish","type":"post","link":"https:\/\/umang.pk\/en_us\/2026\/07\/22\/%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%d9%be%d9%b9-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d8%a8%d8%b1%d8%a7%d8%a4-14\/","title":{"rendered":"\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0645\u0628\u0646\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646\u0646\u06af \u0679\u0648\u0644 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0639\u0627\u06c1\u062f\u0648\u06ba\u060c \u0641\u0627\u0631\u0645\u0648\u06ba\u060c \u0645\u0646\u0638\u0648\u0631\u06cc\u0648\u06ba\u060c \u0631\u0633\u06cc\u062f\u0648\u06ba\u060c \u0631\u067e\u0648\u0631\u0679\u0633\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0648 \u0634\u06cc\u0626\u0631 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0627\u0636\u0627\u0641\u06cc \u0645\u062a\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u067e\u0691 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0631\u0648\u0627\u06cc\u062a\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0645\u06cc\u06ba \u0627\u06a9\u062b\u0631 \u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u067e\u0631\u0646\u0679 \u06a9\u0631\u0646\u0627\u060c \u0630\u0627\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633 \u067e\u0631 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0631\u0646\u0627\u060c \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u06a9\u06cc\u0646 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0646\u0626\u06cc \u0641\u0627\u0626\u0644 \u0628\u06be\u06cc\u062c\u0646\u0627 \u0634\u0627\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u0627\u062f\u06c1 \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u062f\u0633\u062a\u062e\u0637 \u0627\u0633 \u0639\u0645\u0644 \u0645\u06cc\u06ba \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627 \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0645\u0628\u0646\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646\u0646\u06af \u0679\u0648\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u0635\u0627\u0631\u0641\u06cc\u0646 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u06a9\u06d2 \u0635\u0641\u062d\u0627\u062a \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0645\u0648\u0627\u062f \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u062f\u0648 \u0627\u06c1\u0645 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u06cc \u06c1\u06d2: <strong>\u062f\u0633\u062a\u062e\u0637<\/strong> \u0627\u0648\u0631 <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong>.<\/p>\n<p>\u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0635\u0627\u0631\u0641 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0688\u0631\u0627 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062f\u0633\u062a\u062e\u0637\u06cc \u0627\u0646\u062f\u0627\u0632 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u062a\u0646 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646 \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0633\u0679\u06cc\u0645\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2: <strong>\u0645\u0646\u0638\u0648\u0631 \u0634\u062f\u06c1<\/strong>, <strong>\u062e\u0641\u06cc\u06c1<\/strong>, <strong>\u0645\u0633\u0648\u062f\u06c1<\/strong>\u0627\u0648\u0631 <strong>\u0627\u062f\u0627 \u06a9\u06cc\u0627<\/strong>.<\/p>\n<p>\u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06a9\u06cc\u0644\u060c \u06af\u0631\u062f\u0634\u060c \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646\u060c \u0641\u0648\u0646\u0679 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0631\u0646\u06af \u062c\u06cc\u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u067e\u06be\u0631 \u0622\u067e \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0635\u0641\u062d\u06c1\u060c \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0627\u062a\u060c \u06cc\u0627 \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0633\u06cc\u0679 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0622\u067e \u06a9\u06d2 \u062c\u0627\u0626\u0632\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u06d2 \u06af\u06cc\u06d4 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0646\u062a\u0627\u0626\u062c \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0622\u0624\u0679 \u067e\u0679 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0635\u0641\u062d\u06c1 \u06a9\u06cc \u06af\u0646\u062a\u06cc \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0686\u06cc\u06a9 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0628\u0631\u0627\u0624\u0632\u0631 \u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679 PDF.js \u06a9\u0648 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0648\u0631 PDF-lib \u06a9\u0648 \u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u0627\u0648\u0631 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u06d2 \u0627\u062e\u062a\u062a\u0627\u0645 \u062a\u06a9\u060c \u0622\u067e \u0633\u0645\u062c\u06be \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062c\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0627\u0646 \u067e\u0679\u060c \u0627\u0645\u06cc\u062c \u0627\u06cc\u0645\u0628\u06cc\u0688\u0646\u06af\u060c \u0679\u06cc\u06a9\u0633\u0679 \u0631\u06cc\u067e\u0646\u06af\u060c \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0679\u0631\u0627\u0646\u0633\u0641\u0627\u0631\u0645\u06cc\u0634\u0646\u060c \u067e\u06cc\u062c \u0633\u0644\u06cc\u06a9\u0634\u0646\u060c \u0627\u0648\u0631 \u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u0688 \u0641\u0627\u0626\u0644 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0648 \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u06d2\u06d4<\/p>\n<h3 id=\"heading-what-well-cover\">\u06c1\u0645 \u06a9\u06cc\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2:<\/h3>\n<p>\u06cc\u06c1 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 PDF \u0635\u0641\u062d\u0627\u062a \u0645\u06cc\u06ba \u062f\u0633\u062a\u062e\u0637\u060c \u0645\u062a\u0646\u060c \u0627\u0648\u0631 \u0639\u0627\u0645 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0688\u0627\u06a9 \u0679\u06a9\u0679\u0648\u06ba \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u062a\u0631\u0645\u06cc\u0645\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u062c\u0628 <strong>\u062f\u0633\u062a\u062e\u0637<\/strong> \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0646\u062a\u062e\u0628 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0635\u0627\u0631\u0641 \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u062a\u06cc\u0646 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0633\u06d2 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<ol>\n<li>\n<p>\u06a9\u06c1 <strong>\u0688\u0631\u0627<\/strong> \u06cc\u06c1 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u067e\u0631 \u0635\u0627\u0631\u0641 \u0645\u0627\u0624\u0633\u060c \u0679\u0631\u06cc\u06a9 \u067e\u06cc\u0688\u060c \u0627\u0633\u0679\u0627\u0626\u0644\u0633\u060c \u06cc\u0627 \u0679\u0686 \u0627\u0646 \u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0632\u0645\u0631\u06c1<\/strong> \u0622\u067e\u0634\u0646 \u0622\u067e \u06a9\u06d2 \u062f\u0627\u062e\u0644 \u06a9\u0631\u062f\u06c1 \u0645\u062a\u0646 \u06a9\u0648 \u062f\u0633\u062a\u062e\u0637\u06cc \u0637\u0631\u0632 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631 \u0645\u06cc\u06ba \u0628\u062f\u0644 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641 \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628 \u062f\u0633\u062a\u062e\u0637\u06cc \u0637\u0631\u0632\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba<\/strong> \u0622\u067e\u0634\u0646 \u0627\u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0642\u0628\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u0646 \u0644\u0648\u06af\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u06cc\u062f \u06c1\u06d2 \u062c\u0646 \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0627\u067e\u0646\u06d2 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u0644\u06a9\u06be\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u0634\u0641\u0627\u0641 PNG \u06cc\u0627 \u062f\u06cc\u06af\u0631 \u0645\u0639\u0627\u0648\u0646 \u062a\u0635\u0648\u06cc\u0631 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ol>\n<p>\u0639\u0646\u0635\u0631 \u06a9\u06cc \u062f\u0648\u0633\u0631\u06cc \u0642\u0633\u0645 \u06c1\u06d2: <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong>. \u0635\u0627\u0631\u0641 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646 \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2:<\/p>\n<pre><code class=\"language-text\">Signed on: 08-09-2025\n<\/code><\/pre>\n<p>\u0622\u067e \u062c\u0644\u062f\u06cc \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0628\u06be\u06cc \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-text\">APPROVED\nCONFIDENTIAL\nDRAFT\nPAID\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0646\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0627\u0633 \u06a9\u06cc \u062c\u06af\u06c1 \u0627\u0648\u0631 \u0638\u0627\u06c1\u0631\u06cc \u0634\u06a9\u0644 \u067e\u0631 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u0645\u0637\u0644\u0648\u0628\u06c1 \u0645\u0642\u0627\u0645 \u067e\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u0626\u0632\u060c \u06af\u0631\u062f\u0634\u060c \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646 \u0627\u0648\u0631 \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u0633\u0679\u06cc\u0645\u067e \u0639\u0646\u0627\u0635\u0631 \u0627\u0636\u0627\u0641\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0642\u0627\u0628\u0644 \u062a\u0631\u062a\u06cc\u0628 \u0641\u0648\u0646\u0679 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0631\u0646\u06af \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u0639\u0646\u0635\u0631 \u06a9\u06c1\u0627\u06ba \u0644\u0627\u06af\u0648 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u0627\u06af\u0631\u0686\u06c1 \u062f\u0633\u062a\u062e\u0637 \u0635\u0631\u0641 \u0645\u0639\u0627\u06c1\u062f\u06d2 \u06a9\u06d2 \u0622\u062e\u0631\u06cc \u0635\u0641\u062d\u06d2 \u0633\u06d2 \u062a\u0639\u0644\u0642 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>CONFIDENTIAL<\/code> \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u06a9\u0648 \u06c1\u0631 \u0635\u0641\u062d\u06d2 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0644\u06c1\u0630\u0627\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Current page only\nAll pages\nSpecific pages\n<\/code><\/pre>\n<p>\u0645\u0642\u0635\u062f \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06c1\u0631 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0644\u06af \u0627\u0644\u06af \u0679\u0648\u0644\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06a9\u06d2 \u0628\u06c1\u062a \u0633\u06d2 \u0639\u0627\u0645 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0642\u0644 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<h2 id=\"heading-electronic-signatures-vs-digital-signatures\">\u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u0627\u0648\u0631 \u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637<\/h2>\n<p>\u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0627\u0646 \u0645\u06cc\u06ba \u0641\u0631\u0642 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2: <strong>\u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u062f\u0633\u062a\u062e\u0637<\/strong> \u0627\u0648\u0631 <strong>\u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637<\/strong>.<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u0679\u0648\u0644\u0632 \u0627\u06cc\u06a9 \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u062f\u0633\u062a\u062e\u0637\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u06cc \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1\u060c \u0679\u0627\u0626\u067e \u06a9\u06cc \u06af\u0626\u06cc \u06cc\u0627 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0631\u06a9\u06be\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u067e\u0631 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0627\u0633 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u0628\u0635\u0631\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u062f\u0627\u062e\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0645\u062a\u0631\u0627\u062f\u0641 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0635\u0627\u0631\u0641 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06be\u06cc\u0646\u0686 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureImage =\n    signatureCanvas.toDataURL(\"image\/png\");\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0627\u067e\u0646\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637 \u062a\u06a9\u0646\u06cc\u06a9\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06cc \u0633\u0627\u0644\u0645\u06cc\u062a \u0627\u0648\u0631 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u0633\u06d2 \u0648\u0627\u0628\u0633\u062a\u06c1 \u0634\u0646\u0627\u062e\u062a \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0631\u067e\u0679\u0648\u06af\u0631\u0627\u0641\u06a9 \u0637\u0631\u06cc\u0642\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u0645\u06cc\u06ba \u0688\u06cc\u062c\u06cc\u0679\u0644 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679\u060c \u0646\u062c\u06cc \u0686\u0627\u0628\u06cc\u0627\u06ba\u060c \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642\u060c \u0627\u0648\u0631 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u06cc \u0632\u0646\u062c\u06cc\u0631\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u0648\u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u0631 \u0635\u0631\u0641 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u0644\u06a9\u06be\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u0627\u0633 \u0642\u0633\u0645 \u06a9\u06cc \u062e\u0641\u06cc\u06c1 \u062a\u0635\u062f\u06cc\u0642 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc\u06d4<\/p>\n<p>\u06cc\u06c1 \u0641\u0631\u0642 \u0627\u06c1\u0645 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0635\u0637\u0644\u0627\u062d\u0627\u062a \u0628\u0639\u0636 \u0627\u0648\u0642\u0627\u062a \u0631\u0648\u0632\u0645\u0631\u06c1 \u06a9\u06cc \u06af\u0641\u062a\u06af\u0648 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u062d\u0627\u0644\u0627\u0646\u06a9\u06c1 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u06cc\u06ba \u0645\u062e\u062a\u0644\u0641 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06c1\u0645 \u062c\u0648 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u0627\u0633 \u06a9\u0627 \u0641\u0648\u06a9\u0633 \u06cc\u06c1 \u06c1\u06d2: <strong>\u0628\u0635\u0631\u06cc \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u062f\u0633\u062a\u062e\u0637 \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631<\/strong>. \u06cc\u06c1 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u067e\u0631 \u0645\u0628\u0646\u06cc \u06a9\u0631\u067e\u0679\u0648\u06af\u0631\u0627\u0641\u06a9 \u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637 \u062a\u06cc\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0641\u0631\u0642 \u06a9\u0648 \u0648\u0627\u0636\u062d \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06cc\u0627 \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0633 \u0686\u06cc\u0632 \u06a9\u0648 \u0627\u06cc\u06a9 \u062c\u062f\u06cc\u062f \u062f\u0633\u062a\u062e\u0637\u06cc \u0646\u0638\u0627\u0645 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-how-the-browser-based-workflow-works\">\u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/h2>\n<p>\u06cc\u06c1 \u0639\u0645\u0644 \u0627\u0633 \u0648\u0642\u062a \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0635\u0627\u0631\u0641 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>PDF.js \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u0686\u06be\u0644\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u0628\u0679\u0646 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u06a9\u06c1\u0627\u06ba \u0631\u06a9\u06be\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0635\u0627\u0631\u0641 \u067e\u06be\u0631 \u062f\u0648 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Signature\nText\/Stamp\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 <strong>\u062f\u0633\u062a\u062e\u0637<\/strong> \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0646\u062a\u062e\u0628 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u06d2 \u062a\u06cc\u0646 \u0637\u0631\u06cc\u0642\u06d2 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u06cc \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Draw\nType\nUpload\n<\/code><\/pre>\n<p>\u0645\u0646\u062a\u062e\u0628 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u0627\u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u062c\u0633\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong> \u0627\u06af\u0631 \u0622\u067e \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0648\u0627\u062f \u06cc\u0627 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0633\u0679\u06cc\u0645\u067e \u06a9\u06cc \u0642\u062f\u0631\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0645\u062a\u0646\u06cc \u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<p>\u0645\u06a9\u0645\u0644 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Upload PDF\n    \u2193\nRender and Navigate Pages\n    \u2193\nChoose Signature or Text\/Stamp\n    \u2193\nCreate the Element\n    \u2193\nPosition and Style It\n    \u2193\nChoose Target Pages\n    \u2193\nApply & Finalize\n    \u2193\nGenerate the New PDF\n    \u2193\nPreview the Result\n    \u2193\nRename and Download\n<\/code><\/pre>\n<p>\u062a\u0631\u0645\u06cc\u0645 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0639\u0646\u0627\u0635\u0631 \u0635\u0631\u0641 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u0645\u0642\u0627\u0645 \u06a9\u0648 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u0646 \u0646\u0642\u0627\u0637 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u062c\u0648 \u0627\u0635\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u0633\u06d2 \u0645\u0645\u0627\u062b\u0644 \u06c1\u0648\u06ba\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u06cc\u06a9 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u06cc\u0633\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06d2 \u062c\u06cc\u0633\u06d2:<\/p>\n<pre><code class=\"language-javascript\">const element = {\n    type: \"signature\",\n    x: 622,\n    y: 496,\n    scale: 1.14,\n    rotation: 0,\n    opacity: 1\n};\n<\/code><\/pre>\n<p>\u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0648\u0631 \u062a\u06a9\u0645\u06cc\u0644<\/strong>\u0627\u0633 \u0642\u062f\u0631 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u062d\u062a\u0645\u06cc \u062c\u06af\u06c1 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0627\u0648\u0631 \u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u06cc\u06c1 \u0639\u0644\u06cc\u062d\u062f\u06af\u06cc \u0627\u0633 \u0645\u0646\u0635\u0648\u0628\u06d2 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0628\u06cc\u0686 \u06a9\u06d2 \u062a\u06cc\u0627\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u06c1\u06cc \u062a\u0631\u0645\u06cc\u0645 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-project-setup\">\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a<\/h2>\n<p>\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0633\u0645\u062c\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u062a\u06cc\u0646 \u0627\u06c1\u0645 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2:<\/p>\n<pre><code class=\"language-text\">pdf-signature-tool\/\n\u2502\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 style.css\n\u2514\u2500\u2500 script.js\n<\/code><\/pre>\n<p>\u0627\u06cc\u0686 \u0679\u06cc \u0627\u06cc\u0645 \u0627\u06cc\u0644 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0627\u067e \u0644\u0648\u0688 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633\u060c \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1\u060c \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0646\u0679\u0631\u0648\u0644\u060c \u062d\u062a\u0645\u06cc \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u06d2 \u062d\u0635\u06d2 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>CSS \u0641\u0627\u0626\u0644\u06cc\u06ba \u062a\u0631\u062a\u06cc\u0628 \u0627\u0648\u0631 \u0628\u0635\u0631\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>JavaScript \u0641\u0627\u0626\u0644\u06cc\u06ba \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0644\u0648\u0688\u0646\u06af\u060c \u067e\u06cc\u062c \u0631\u06cc\u0646\u0688\u0631\u0646\u06af\u060c \u0633\u06af\u0646\u06cc\u0686\u0631 \u062c\u0646\u0631\u06cc\u0634\u0646\u060c \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u0627\u0633\u0679\u06cc\u0645\u067e \u0639\u0646\u0627\u0635\u0631\u060c \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af\u060c \u0627\u0648\u0631 \u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062a\u062e\u0644\u06cc\u0642 \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc HTML \u0633\u0627\u062e\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-html\">\n\n\n\n    <meta charset=\"UTF-8\"\/>\n\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n\n    <title>PDF Signature Tool<\/title>\n\n    <link rel=\"stylesheet\" href=\"https:\/\/www.freecodecamp.org\/news\/build-pdf-signature-tool-javascript\/style.css\"\/>\n\n\n\n\n\n    <main class=\"pdf-signature-tool\">\n\n        <section id=\"uploadSection\">\n\n            \n\n            <p>\n                Upload your PDF to add your\n                electronic signature.\n            <\/p>\n\n            \n\n        <\/section>\n\n        <section id=\"editorSection\" hidden=\"\">\n\n            \n\n            <aside id=\"editorControls\">\n\n                <!-- Signature and text controls\n                     will be added here -->\n\n            <\/aside>\n\n        <\/section>\n\n        <section id=\"resultSection\" hidden=\"\">\n\n            <!-- Final preview and download\n                 controls will be added here -->\n\n        <\/section>\n\n    <\/main>\n\n    \n\n\n\n<script src=\"script.js\"\/>\n<\/code><\/pre>\n<p>\u06c1\u0645 PDF.js \u0648\u0631\u06a9\u0631 \u06a9\u0648 \u0628\u06be\u06cc \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">pdfjsLib.GlobalWorkerOptions.workerSrc =\n    \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js\";\n<\/code><\/pre>\n<p>\u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u063a\u06cc\u0631 \u0645\u062a\u0639\u06cc\u0646\u06c1 \u0631\u06cc\u0644\u06cc\u0632 \u06a9\u0648 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0637\u0648\u0631 \u067e\u0631 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u062f\u0631\u0633\u062a \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0648\u0631\u0698\u0646\u0632 \u06a9\u0648 \u067e\u0646 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-uploading-and-previewing-the-pdf\">\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u067e \u0644\u0648\u0688 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u067e\u06c1\u0644\u0627 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0645\u0631\u062d\u0644\u06c1 \u0622\u067e \u06a9\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648 \u0642\u0628\u0648\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u0637\u0644\u0648\u0628\u06c1 \u0639\u0646\u0635\u0631 \u06a9\u0627 \u062d\u0648\u0627\u0644\u06c1 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const pdfInput =\n    document.getElementById(\n        \"pdfInput\"\n    );\n\nconst selectPdfButton =\n    document.getElementById(\n        \"selectPdfButton\"\n    );\n\nconst dropZone =\n    document.getElementById(\n        \"dropZone\"\n    );\n\nconst uploadSection =\n    document.getElementById(\n        \"uploadSection\"\n    );\n\nconst editorSection =\n    document.getElementById(\n        \"editorSection\"\n    );\n\nconst pdfCanvas =\n    document.getElementById(\n        \"pdfCanvas\"\n    );\n<\/code><\/pre>\n<p>\u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u0645\u06cc\u06ba \u06a9\u0686\u06be \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u06a9\u06cc \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">let pdfDocument = null;\n\nlet originalPdfBytes = null;\n\nlet currentPage = 1;\n\nlet totalPages = 0;\n<\/code><\/pre>\n<p>\u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0627\u06cc\u06a9 \u067e\u0648\u0634\u06cc\u062f\u06c1 \u0641\u0627\u0626\u0644 \u0627\u0646 \u067e\u0679 \u06a9\u06be\u0644 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">selectPdfButton.addEventListener(\n    \"click\",\n    () => {\n\n        pdfInput.click();\n\n    }\n);\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0641\u0627\u0626\u0644 \u0645\u0646\u062a\u062e\u0628 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u0633\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0644\u0648\u0688\u0646\u06af \u0641\u0646\u06a9\u0634\u0646 \u0645\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">pdfInput.addEventListener(\n    \"change\",\n    event => {\n\n        const file =\n            event.target.files[0];\n\n        if (file) {\n\n            loadPdf(file);\n\n        }\n\n    }\n);\n<\/code><\/pre>\n<p>\u0627\u0633 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0634\u06a9\u0644 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function loadPdf(file) {\n\n    if (\n        file.type !==\n        \"application\/pdf\"\n    ) {\n\n        alert(\n            \"Please select a valid PDF file.\"\n        );\n\n        return;\n\n    }\n\n}\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u067e\u0691\u06be\u06cc\u06ba: <code>ArrayBuffer<\/code>.<\/p>\n<pre><code class=\"language-javascript\">const arrayBuffer =\n    await file.arrayBuffer();\n<\/code><\/pre>\n<p>PDF.js \u0627\u0648\u0631 PDF-lib \u0645\u062e\u062a\u0644\u0641 \u0645\u0631\u0627\u062d\u0644 \u067e\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0627\u0635\u0644 \u0628\u0627\u0626\u0679\u0633 \u06a9\u06cc \u0627\u06cc\u06a9 \u06a9\u0627\u067e\u06cc \u0627\u067e\u0646\u06d2 \u067e\u0627\u0633 \u0631\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">originalPdfBytes =\n    new Uint8Array(\n        arrayBuffer\n    );\n<\/code><\/pre>\n<p>\u0627\u0628 \u0627\u067e\u0646\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 PDF.js \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">pdfDocument =\n    await pdfjsLib\n        .getDocument({\n            data:\n                originalPdfBytes.slice()\n        })\n        .promise;\n<\/code><\/pre>\n<p>\u0635\u0641\u062d\u06c1 \u06a9\u06cc \u06af\u0646\u062a\u06cc \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">totalPages =\n    pdfDocument.numPages;\n\ncurrentPage = 1;\n<\/code><\/pre>\n<p>\u0627\u067e \u0644\u0648\u0688 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u0688\u06cc\u0679\u0631 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">uploadSection.hidden = true;\n\neditorSection.hidden = false;\n<\/code><\/pre>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba \u06c1\u0645 \u067e\u06c1\u0644\u0627 \u0635\u0641\u062d\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">await renderPage(currentPage);\n<\/code><\/pre>\n<p>\u0645\u06a9\u0645\u0644 \u0644\u0648\u0688\u0646\u06af \u0641\u0646\u06a9\u0634\u0646 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">async function loadPdf(file) {\n\n    if (\n        file.type !==\n        \"application\/pdf\"\n    ) {\n\n        alert(\n            \"Please select a valid PDF file.\"\n        );\n\n        return;\n\n    }\n\n    const arrayBuffer =\n        await file.arrayBuffer();\n\n    originalPdfBytes =\n        new Uint8Array(\n            arrayBuffer\n        );\n\n    pdfDocument =\n        await pdfjsLib\n            .getDocument({\n                data:\n                    originalPdfBytes.slice()\n            })\n            .promise;\n\n    totalPages =\n        pdfDocument.numPages;\n\n    currentPage = 1;\n\n    uploadSection.hidden = true;\n\n    editorSection.hidden = false;\n\n    await renderPage(currentPage);\n\n}\n<\/code><\/pre>\n<p>\u0688\u0631\u06cc\u06af \u0627\u06cc\u0646\u0688 \u0688\u0631\u0627\u067e \u0633\u067e\u0648\u0631\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0631\u0648\u06cc\u06d2 \u06a9\u0648 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">dropZone.addEventListener(\n    \"dragover\",\n    event => {\n\n        event.preventDefault();\n\n        dropZone.classList.add(\n            \"drag-active\"\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u062c\u0628 \u06a9\u0648\u0626\u06cc \u0641\u0627\u0626\u0644 \u0688\u0631\u0627\u067e \u0627\u06cc\u0631\u06cc\u0627 \u0633\u06d2 \u0646\u06a9\u0644 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0627\u0633 \u06a9\u06cc \u0641\u0639\u0627\u0644 \u062d\u06cc\u062b\u06cc\u062a \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">dropZone.addEventListener(\n    \"dragleave\",\n    () => {\n\n        dropZone.classList.remove(\n            \"drag-active\"\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u062d\u0630\u0641 \u0634\u062f\u06c1 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">dropZone.addEventListener(\n    \"drop\",\n    event => {\n\n        event.preventDefault();\n\n        dropZone.classList.remove(\n            \"drag-active\"\n        );\n\n        const file =\n            event.dataTransfer.files[0];\n\n        if (file) {\n\n            loadPdf(file);\n\n        }\n\n    }\n);\n<\/code><\/pre>\n<h2 id=\"heading-rendering-the-current-pdf-page\">\u0645\u0648\u062c\u0648\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u062c \u06a9\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u06a9\u06c1 <code>renderPage()<\/code> \u0641\u0646\u06a9\u0634\u0646 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u06d2 \u0627\u06cc\u06a9 \u0635\u0641\u062d\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function renderPage(\n    pageNumber\n) {\n\n    const page =\n        await pdfDocument.getPage(\n            pageNumber\n        );\n\n    const viewport =\n        page.getViewport({\n            scale: 1.5\n        });\n\n    const context =\n        pdfCanvas.getContext(\"2d\");\n\n    pdfCanvas.width =\n        viewport.width;\n\n    pdfCanvas.height =\n        viewport.height;\n\n    await page.render({\n\n        canvasContext: context,\n\n        viewport\n\n    }).promise;\n\n    updatePageInfo();\n\n}\n<\/code><\/pre>\n<p>\u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u067e\u0631\u062a\u06cc\u06ba \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0628\u06cc\u0679\u06be\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u0646 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const elementLayer =\n    document.getElementById(\n        \"elementLayer\"\n    );\n\nelementLayer.style.width =\n    `${viewport.width}px`;\n\nelementLayer.style.height =\n    `${viewport.height}px`;\n<\/code><\/pre>\n<p>\u0627\u0633 \u0644\u0627\u0626\u0646 \u06a9\u0648 \u0627\u0646\u062f\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba: <code>renderPage()<\/code> \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0633\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f<\/p>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function updatePageInfo() {\n\n    pageInfo.textContent =\n        `Page ${currentPage} of ${totalPages}`;\n\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u0648\u0642\u062a\u060c \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u0627\u062a \u0646\u0638\u0631 \u0622\u0626\u06cc\u06ba \u06af\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u067e\u06be\u0631 \u0628\u06be\u06cc \u06a9\u062b\u06cc\u0631 \u0635\u0641\u062d\u0627\u062a\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0634\u0631\u06cc\u0641 \u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<h2 id=\"heading-adding-pdf-page-navigation\">\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const previousPage =\n    document.getElementById(\n        \"previousPage\"\n    );\n\nconst nextPage =\n    document.getElementById(\n        \"nextPage\"\n    );\n\nconst pageInfo =\n    document.getElementById(\n        \"pageInfo\"\n    );\n<\/code><\/pre>\n<p>\u067e\u0686\u06be\u0644\u06d2 \u0628\u0679\u0646 \u06a9\u0648 \u062f\u0628\u0627\u0646\u06d2 \u0633\u06d2 \u0635\u0641\u062d\u06c1 \u0646\u0645\u0628\u0631 \u06a9\u0645 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">previousPage.addEventListener(\n    \"click\",\n    async () => {\n\n        if (currentPage <= 1) {\n            return;\n        }\n\n        currentPage--;\n\n        await renderPage(\n            currentPage\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u0627\u06af\u0644\u0627 \u0628\u0679\u0646 \u0622\u06af\u06d2 \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">nextPage.addEventListener(\n    \"click\",\n    async () => {\n\n        if (\n            currentPage >=\n            totalPages\n        ) {\n            return;\n        }\n\n        currentPage++;\n\n        await renderPage(\n            currentPage\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u062d\u062f\u0648\u062f \u06a9\u06cc \u062c\u0627\u0646\u0686 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0628\u0627\u06c1\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u0648 \u0631\u0648\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>12 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0638\u0627\u06c1\u0631 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Page 12 of 12\n<\/code><\/pre>\n<p>\u067e\u0686\u06be\u0644\u0627 \u0628\u0679\u0646 \u0627\u0628 \u0628\u06be\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u06af\u0644\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0648 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0635\u0627\u0631\u0641 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0622\u062e\u0631\u06cc \u0635\u0641\u062d\u06c1 \u067e\u0631 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function updateNavigationState() {\n\n    previousPage.disabled =\n        currentPage === 1;\n\n    nextPage.disabled =\n        currentPage ===\n        totalPages;\n\n}\n<\/code><\/pre>\n<p>\u062c\u0628 \u0628\u06be\u06cc \u0646\u06cc\u0627 \u0635\u0641\u062d\u06c1 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0627\u0633 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function updatePageInfo() {\n\n    pageInfo.textContent =\n        `Page ${currentPage} of ${totalPages}`;\n\n    updateNavigationState();\n\n}\n<\/code><\/pre>\n<p>\u0635\u0627\u0631\u0641\u06cc\u0646 \u0627\u0628 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0646 \u0635\u0641\u062d\u0627\u062a \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0639\u06cc\u0646 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062a\u0634\u0631\u06cc\u0641 \u0644\u06d2 \u062c\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06c1\u0627\u06ba \u0627\u0646\u06c1\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637\u060c \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646\u060c \u06cc\u0627 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06cc \u0645\u06c1\u0631 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_445_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646 \u0679\u0648\u0644 \u0645\u06cc\u06ba \u067e\u0686\u06be\u0644\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u0635\u0641\u062d\u06d2 \u06a9\u06d2 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"708\" height=\"550\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-choosing-an-element-to-add\">\u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u0627\u0648\u0631 \u062f\u0631\u0633\u062a \u0635\u0641\u062d\u06c1 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0635\u0627\u0631\u0641 \u0627\u0646 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u0648\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u0688\u06cc\u0679\u0631 \u062f\u0648 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Signature\nText\/Stamp\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0633\u0644\u06cc\u06a9\u0679\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><p>\n\n    <h3>1. Choose Element<\/h3>\n\n    <label>\n        <input type=\"radio\" name=\"elementType\" value=\"signature\" checked=\"checked\"\/>\n        Signature\n    <\/label>\n\n    <label>\n        <input type=\"radio\" name=\"elementType\" value=\"text\"\/>\n        Text\/Stamp\n    <\/label>\n\n<\/p>\n<\/code><\/pre>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0646\u0679\u0631\u0648\u0644 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const elementTypeInputs =\n    document.querySelectorAll(\n        'input[name=\"elementType\"]'\n    );\n\nconst signatureControls =\n    document.getElementById(\n        \"signatureControls\"\n    );\n\nconst textControls =\n    document.getElementById(\n        \"textControls\"\n    );\n<\/code><\/pre>\n<p>\u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0648\u0635\u0648\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">elementTypeInputs.forEach(\n    input => {\n\n        input.addEventListener(\n            \"change\",\n            event => {\n\n                const type =\n                    event.target.value;\n\n                if (\n                    type ===\n                    \"signature\"\n                ) {\n\n                    signatureControls.hidden =\n                        false;\n\n                    textControls.hidden =\n                        true;\n\n                } else {\n\n                    signatureControls.hidden =\n                        true;\n\n                    textControls.hidden =\n                        false;\n\n                }\n\n            }\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u067e\u0631 \u062a\u0648\u062c\u06c1 \u0645\u0631\u06a9\u0648\u0632 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u0635\u0627\u0631\u0641 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628 \u06a9\u06c1 \u0645\u062a\u0646 \u0627\u0648\u0631 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u0646\u0679\u0631\u0648\u0644 \u0627\u0633 \u0648\u0642\u062a \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u0642\u0633\u0645 \u0645\u0646\u062a\u062e\u0628 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-creating-a-signature\">\u0627\u06cc\u06a9 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u062f\u0633\u062a\u062e\u0637\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u062a\u06cc\u0646 \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Draw\nType\nUpload\n<\/code><\/pre>\n<p>\u0637\u0631\u06cc\u0642\u06c1 \u0633\u0644\u06cc\u06a9\u0679\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><div id=\"signatureControls\">\n\n    <h3>2. Create Signature<\/h3>\n\n    <p>\n\n        <button data-method=\"draw\" class=\"active\">\n            Draw\n        <\/button>\n\n        <button data-method=\"type\">\n            Type\n        <\/button>\n\n        <button data-method=\"upload\">\n            Upload\n        <\/button>\n\n    <\/p>\n\n    \n\n    \n\n    \n\n<\/div>\n<\/code><\/pre>\n<p>\u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u0627\u0631 \u067e\u0631 \u0646\u0638\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">let signatureMethod =\n    \"draw\";\n<\/code><\/pre>\n<p>\u062a\u06cc\u0646 \u067e\u06cc\u0646\u0644\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0633\u0648\u0626\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureTabs =\n    document.querySelectorAll(\n        \".signature-tabs button\"\n    );\n\nsignatureTabs.forEach(\n    button => {\n\n        button.addEventListener(\n            \"click\",\n            () => {\n\n                signatureMethod =\n                    button.dataset.method;\n\n                showSignatureMethod(\n                    signatureMethod\n                );\n\n            }\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u067e\u06cc\u0646\u0644 \u0679\u0648\u06af\u0644 \u0641\u0646\u06a9\u0634\u0646 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u0648 \u0686\u06be\u067e\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function showSignatureMethod(\n    method\n) {\n\n    drawPanel.hidden =\n        method !== \"draw\";\n\n    typePanel.hidden =\n        method !== \"type\";\n\n    uploadPanel.hidden =\n        method !== \"upload\";\n\n}\n<\/code><\/pre>\n<p>\u06c1\u0631 \u0637\u0631\u06cc\u0642\u06c1 \u0627\u06cc\u06a9 \u06c1\u06cc \u0642\u0633\u0645 \u06a9\u0627 \u062d\u062a\u0645\u06cc \u0639\u0646\u0635\u0631 (\u062f\u0633\u062a\u062e\u0637) \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0627 \u0645\u0627\u062e\u0630 \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-drawing-a-signature\">\u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u06a9\u06c1 <strong>\u0688\u0631\u0627<\/strong> \u06cc\u06c1 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u06c1\u0627\u062a\u06be \u0633\u06d2 \u0644\u06a9\u06be\u0627 \u06c1\u0648\u0627 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0688\u0631\u0627\u0626\u0646\u06af \u067e\u06cc\u0646\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0646\u0648\u0633 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><p>\n\n    <canvas id=\"signatureCanvas\" width=\"500\" height=\"180\">\n    <\/canvas>\n\n    <button id=\"clearSignature\">\n        Clear\n    <\/button>\n\n<\/p>\n<\/code><\/pre>\n<p>\u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u0627 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureCanvas =\n    document.getElementById(\n        \"signatureCanvas\"\n    );\n\nconst signatureContext =\n    signatureCanvas.getContext(\n        \"2d\"\n    );\n\nlet isDrawing = false;\n<\/code><\/pre>\n<p>\u062c\u0628 \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0686\u06be\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0688\u0631\u0627\u0626\u0646\u06af \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">signatureCanvas.addEventListener(\n    \"pointerdown\",\n    event => {\n\n        isDrawing = true;\n\n        const rect =\n            signatureCanvas\n                .getBoundingClientRect();\n\n        signatureContext.beginPath();\n\n        signatureContext.moveTo(\n\n            event.clientX -\n                rect.left,\n\n            event.clientY -\n                rect.top\n\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u0644\u0627\u0626\u0646 \u062c\u0627\u0631\u06cc \u0631\u06c1\u062a\u06cc \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u06c1\u06cc \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">signatureCanvas.addEventListener(\n    \"pointermove\",\n    event => {\n\n        if (!isDrawing) {\n            return;\n        }\n\n        const rect =\n            signatureCanvas\n                .getBoundingClientRect();\n\n        signatureContext.lineTo(\n\n            event.clientX -\n                rect.left,\n\n            event.clientY -\n                rect.top\n\n        );\n\n        signatureContext.stroke();\n\n    }\n);\n<\/code><\/pre>\n<p>\u062c\u0628 \u0622\u067e \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u062c\u0627\u0631\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0688\u0631\u0627\u0626\u0646\u06af \u0628\u0646\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">signatureCanvas.addEventListener(\n    \"pointerup\",\n    () => {\n\n        isDrawing = false;\n\n    }\n);\n\nsignatureCanvas.addEventListener(\n    \"pointerleave\",\n    () => {\n\n        isDrawing = false;\n\n    }\n);\n<\/code><\/pre>\n<p>\u06a9\u0686\u06be \u0688\u0631\u0627\u0626\u0646\u06af \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u0642\u0631\u0631 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">signatureContext.lineWidth = 2;\n\nsignatureContext.lineCap =\n    \"round\";\n\nsignatureContext.lineJoin =\n    \"round\";\n<\/code><\/pre>\n<p>\u0679\u0686 \u0688\u06cc\u0648\u0627\u0626\u0633\u0632 \u067e\u0631\u060c \u06cc\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0648 \u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u06d2 \u0627\u0634\u0627\u0631\u0648\u06ba \u06a9\u0648 \u0635\u0641\u062d\u06c1 \u0633\u06a9\u0631\u0648\u0644\u0646\u06af \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062a\u0634\u0631\u06cc\u062d \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-css\">#signatureCanvas {\n    touch-action: none;\n    cursor: crosshair;\n}\n<\/code><\/pre>\n<p>\u06a9\u0644\u06cc\u0626\u0631 \u0628\u0679\u0646 \u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0631\u06cc \u0633\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">clearSignature.addEventListener(\n    \"click\",\n    () => {\n\n        signatureContext.clearRect(\n\n            0,\n            0,\n\n            signatureCanvas.width,\n            signatureCanvas.height\n\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u062f\u0633\u062a\u062e\u0637 \u062a\u06cc\u0627\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 PNG \u0688\u06cc\u0679\u0627 URL \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const drawnSignature =\n    signatureCanvas.toDataURL(\n        \"image\/png\"\n    );\n<\/code><\/pre>\n<p>\u06a9\u06cc\u0646\u0648\u0633 \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0646\u062a\u06cc\u062c\u06d2 \u0645\u06cc\u06ba \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0627\u06cc\u06a9 \u063a\u06cc\u0631 \u0645\u0637\u0644\u0648\u0628\u06c1 \u0645\u0633\u062a\u0637\u06cc\u0644 \u067e\u0633 \u0645\u0646\u0638\u0631 \u0634\u0627\u0645\u0644 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0628 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u062a\u06c1\u0648\u06ba \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u062f\u06a9\u06be\u0627\u0626\u06cc \u062c\u0627 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function useDrawnSignature() {\n\n    const image =\n        new Image();\n\n    image.src =\n        signatureCanvas.toDataURL(\n            \"image\/png\"\n        );\n\n    image.onload =\n        () => {\n\n            createSignatureElement(\n                image.src\n            );\n\n        };\n\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0635\u0631\u06cc \u062f\u0633\u062a\u062e\u0637\u06cc \u0639\u0646\u0635\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0628\u0639\u062f \u0645\u06cc\u06ba \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-typing-a-signature\">\u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u062f\u0631\u062c \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u06c1\u0631 \u06a9\u0633\u06cc \u06a9\u06d2 \u067e\u0627\u0633 \u0679\u0686 \u0627\u0633\u06a9\u0631\u06cc\u0646\u060c \u0627\u0633\u0679\u0627\u0626\u0644\u0633\u060c \u06cc\u0627 \u0631\u0648\u0627\u06cc\u062a\u06cc \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u06c1 <strong>\u0632\u0645\u0631\u06c1<\/strong> \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u067e\u0646\u0627 \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u062f\u0633\u062a\u062e\u0637\u06cc \u0637\u0631\u0632 \u06a9\u06cc \u0638\u0627\u06c1\u0631\u06cc \u0634\u06a9\u0644 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u0646 \u067e\u0679 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\">\n<\/code><\/pre>\n<p>\u0645\u062a\u0646 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0633\u0646\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">typedSignature.addEventListener(\n    \"input\",\n    updateTypedSignatures\n);\n<\/code><\/pre>\n<p>\u0645\u062a\u0639\u062f\u062f \u0637\u0631\u0632 \u06a9\u06d2 \u0645\u0646\u0627\u0638\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureFonts = [\n\n    \"cursive\",\n\n    \"'Brush Script MT', cursive\",\n\n    \"'Segoe Script', cursive\"\n\n];\n<\/code><\/pre>\n<p>\u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function updateTypedSignatures() {\n\n    const value =\n        typedSignature.value.trim();\n\n    signatureStyles.innerHTML = \"\";\n\n    if (!value) {\n        return;\n    }\n\n    signatureFonts.forEach(\n        font => {\n\n            const option =\n                document.createElement(\n                    \"button\"\n                );\n\n            option.textContent =\n                value;\n\n            option.style.fontFamily =\n                font;\n\n            option.style.fontSize =\n                `${signatureFontSize.value}px`;\n\n            option.addEventListener(\n                \"click\",\n                () => {\n\n                    createTypedSignature(\n                        value,\n                        font\n                    );\n\n                }\n            );\n\n            signatureStyles.appendChild(\n                option\n            );\n\n        }\n    );\n\n}\n<\/code><\/pre>\n<p>\u062f\u0631\u062c \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function createTypedSignature(\n    text,\n    fontFamily\n) {\n\n    const canvas =\n        document.createElement(\n            \"canvas\"\n        );\n\n    const context =\n        canvas.getContext(\"2d\");\n\n    const fontSize =\n        Number(\n            signatureFontSize.value\n        );\n\n    context.font =\n        `${fontSize}px ${fontFamily}`;\n\n    const width =\n        context.measureText(\n            text\n        ).width;\n\n    canvas.width =\n        Math.ceil(width + 40);\n\n    canvas.height =\n        Math.ceil(fontSize * 2);\n\n    context.font =\n        `${fontSize}px ${fontFamily}`;\n\n    context.textBaseline =\n        \"middle\";\n\n    context.fillText(\n        text,\n        20,\n        canvas.height \/ 2\n    );\n\n    const imageUrl =\n        canvas.toDataURL(\n            \"image\/png\"\n        );\n\n    createSignatureElement(\n        imageUrl\n    );\n\n}\n<\/code><\/pre>\n<p>\u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u0648 \u0627\u0628 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06cc \u0637\u0631\u062d \u0633\u0645\u062c\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u0627\u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0639\u0646\u0635\u0631 \u0628\u0646 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0627\u067e\u0646\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u067e\u0648\u0632\u06cc\u0634\u0646 \u0627\u0648\u0631 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_409_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u062f\u0631\u062c \u06a9\u06cc\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u0627 \u0646\u0627\u0645\u060c \u0641\u0648\u0646\u0679 \u0633\u0627\u0626\u0632 \u06a9\u0646\u0679\u0631\u0648\u0644\u060c \u0627\u0648\u0631 \u0645\u062a\u0639\u062f\u062f \u062f\u0633\u062a\u062e\u0637\u06cc \u0637\u0631\u0632\u0648\u06ba \u06a9\u06d2 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"334\" height=\"682\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-uploading-a-signature-image\">\u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u062a\u06cc\u0633\u0631\u0627 \u0622\u067e\u0634\u0646 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u0627\u0626\u0644 \u0627\u0646 \u067e\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\">\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0648\u0635\u0648\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">signatureUpload.addEventListener(\n    \"change\",\n    event => {\n\n        const file =\n            event.target.files[0];\n\n        if (!file) {\n            return;\n        }\n\n        loadSignatureImage(file);\n\n    }\n);\n<\/code><\/pre>\n<p>\u062a\u0635\u0648\u06cc\u0631 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">function loadSignatureImage(\n    file\n) {\n\n    const allowedTypes = [\n\n        \"image\/png\",\n\n        \"image\/jpeg\"\n\n    ];\n\n    if (\n        !allowedTypes.includes(\n            file.type\n        )\n    ) {\n\n        alert(\n            \"Please upload a PNG or JPEG image.\"\n        );\n\n        return;\n\n    }\n\n}\n<\/code><\/pre>\n<p>\u0645\u0646\u062a\u062e\u0628 \u062a\u0635\u0648\u06cc\u0631 \u067e\u0691\u06be\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">const reader =\n    new FileReader();\n\nreader.onload =\n    event => {\n\n        createSignatureElement(\n            event.target.result\n        );\n\n};\n\nreader.readAsDataURL(file);\n<\/code><\/pre>\n<p>\u0645\u0646\u062a\u062e\u0628 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">selectedSignatureFile.textContent =\n    `Selected: ${file.name}`;\n<\/code><\/pre>\n<p>\u0645\u06a9\u0645\u0644 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">function loadSignatureImage(\n    file\n) {\n\n    const allowedTypes = [\n\n        \"image\/png\",\n\n        \"image\/jpeg\"\n\n    ];\n\n    if (\n        !allowedTypes.includes(\n            file.type\n        )\n    ) {\n\n        alert(\n            \"Please upload a PNG or JPEG image.\"\n        );\n\n        return;\n\n    }\n\n    selectedSignatureFile.textContent =\n        `Selected: ${file.name}`;\n\n    const reader =\n        new FileReader();\n\n    reader.onload =\n        event => {\n\n            createSignatureElement(\n                event.target.result\n            );\n\n        };\n\n    reader.readAsDataURL(file);\n\n}\n<\/code><\/pre>\n<p>\u0634\u0641\u0627\u0641 PNGs \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u067e\u0631 \u0635\u0631\u0641 \u062f\u0633\u062a\u062e\u0637\u06cc \u0627\u0633\u0679\u0631\u0648\u06a9 \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_44_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u062f\u0633\u062a\u062e\u0637\u06cc \u0627\u067e \u0644\u0648\u0688 \u06a9\u0627 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062c\u06c1\u0627\u06ba \u0645\u0646\u062a\u062e\u0628 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4\" style=\"display:block;margin:0 auto\" width=\"345\" height=\"532\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-creating-the-signature-preview-element\">\u0627\u06cc\u06a9 \u062f\u0633\u062a\u062e\u0637\u06cc \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u062a\u06cc\u0646\u0648\u06ba \u0637\u0631\u06cc\u0642\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">createSignatureElement(imageUrl);\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0628\u0627\u0642\u06cc \u0627\u06cc\u0688\u06cc\u0679\u0631 \u06a9\u0648 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba\u060c \u0627\u0646 \u067e\u0679 \u0627\u0648\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0633\u06cc \u0627\u0644\u06af \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u0645\u0646\u0637\u0642 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">let activeElement = null;\n\nfunction createSignatureElement(\n    imageUrl\n) {\n\n    elementLayer.innerHTML = \"\";\n\n    const image =\n        document.createElement(\n            \"img\"\n        );\n\n    image.src =\n        imageUrl;\n\n    image.className =\n        \"pdf-element signature-element\";\n\n    image.style.left =\n        \"100px\";\n\n    image.style.top =\n        \"100px\";\n\n    image.style.width =\n        \"180px\";\n\n    elementLayer.appendChild(\n        image\n    );\n\n    activeElement = {\n\n        type: \"signature\",\n\n        source: imageUrl,\n\n        element: image,\n\n        x: 100,\n\n        y: 100,\n\n        scale: 1,\n\n        rotation: 0,\n\n        opacity: 1\n\n    };\n\n}\n<\/code><\/pre>\n<p>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0627\u0628 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0628\u0627\u0644\u0622\u062e\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0644\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0627\u0633\u06cc \u0627\u0633\u0679\u06cc\u0679 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0635\u0627\u0631\u0641 \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u0633\u0627\u0626\u0632\u060c \u06af\u0631\u062f\u0634\u060c \u06cc\u0627 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-adding-text-and-preset-stamps\">\u0645\u062a\u0646 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u062f\u0648\u0633\u0631\u06cc \u0627\u06c1\u0645 \u0639\u0646\u0635\u0631 \u06a9\u06cc \u0642\u0633\u0645 \u06c1\u06d2: <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong>.<\/p>\n<p>\u06cc\u06c1 \u0645\u0648\u0688 \u0645\u0641\u06cc\u062f \u06c1\u06d2 \u062c\u0628 \u0622\u067e \u06a9\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u0644\u06a9\u06be\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0645\u062e\u062a\u0635\u0631 \u0644\u06cc\u0628\u0644\u060c \u062d\u06cc\u062b\u06cc\u062a\u060c \u062a\u0627\u0631\u06cc\u062e\u060c \u06cc\u0627 \u062f\u0648\u0633\u0631\u06d2 \u0645\u062a\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\">\n<\/code><\/pre>\n<p>\u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u062a\u0646 \u06a9\u0648 \u0635\u0627\u0631\u0641 \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">customText.addEventListener(\n    \"input\",\n    () => {\n\n        createTextElement(\n            customText.value\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0627\u06cc\u06a9 \u06c1\u06cc \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0646 \u067e\u0679 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const stampButtons =\n    document.querySelectorAll(\n        \"[data-stamp]\"\n    );\n\nstampButtons.forEach(\n    button => {\n\n        button.addEventListener(\n            \"click\",\n            () => {\n\n                const stamp =\n                    button.dataset.stamp;\n\n                customText.value =\n                    stamp;\n\n                createTextElement(\n                    stamp\n                );\n\n            }\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u0645\u062a\u0646 \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function createTextElement(\n    text\n) {\n\n    if (!text.trim()) {\n\n        elementLayer.innerHTML = \"\";\n\n        activeElement = null;\n\n        return;\n\n    }\n\n    elementLayer.innerHTML = \"\";\n\n    const textElement =\n        document.createElement(\n            \"div\"\n        );\n\n    textElement.className =\n        \"pdf-element text-element\";\n\n    textElement.textContent =\n        text;\n\n    textElement.style.left =\n        \"100px\";\n\n    textElement.style.top =\n        \"100px\";\n\n    textElement.style.fontSize =\n        `${textSize.value}px`;\n\n    textElement.style.color =\n        textColor.value;\n\n    elementLayer.appendChild(\n        textElement\n    );\n\n    activeElement = {\n\n        type: \"text\",\n\n        text,\n\n        element:\n            textElement,\n\n        x: 100,\n\n        y: 100,\n\n        fontSize:\n            Number(\n                textSize.value\n            ),\n\n        color:\n            textColor.value,\n\n        rotation: 0,\n\n        opacity: 1\n\n    };\n\n}\n<\/code><\/pre>\n<p>\u0645\u0648\u062c\u0648\u062f\u06c1 \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0627\u0633 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">textSize.addEventListener(\n    \"input\",\n    () => {\n\n        if (\n            activeElement?.type !==\n            \"text\"\n        ) {\n            return;\n        }\n\n        activeElement.fontSize =\n            Number(\n                textSize.value\n            );\n\n        activeElement\n            .element\n            .style\n            .fontSize =\n                `${textSize.value}px`;\n\n    }\n);\n<\/code><\/pre>\n<p>\u0631\u0646\u06af\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u06be\u06cc \u0627\u06cc\u0633\u0627 \u06c1\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">textColor.addEventListener(\n    \"input\",\n    () => {\n\n        if (\n            activeElement?.type !==\n            \"text\"\n        ) {\n            return;\n        }\n\n        activeElement.color =\n            textColor.value;\n\n        activeElement\n            .element\n            .style\n            .color =\n                textColor.value;\n\n    }\n);\n<\/code><\/pre>\n<p>\u0635\u0627\u0631\u0641\u06cc\u0646 \u0627\u0628 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u0648\u0627\u062f \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06cc\u0633\u06d2:<\/p>\n<pre><code class=\"language-text\">Signed on: 08-09-2025\n<\/code><\/pre>\n<p>\u06cc\u0627 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0627 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_942_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0627\u06cc\u06a9 \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u0633\u0679\u06cc\u0645\u067e \u0627\u06cc\u0688\u06cc\u0679\u0631 \u062c\u0648 \u0641\u0648\u0646\u0679 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0631\u0646\u06af \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u0645\u0646\u0638\u0648\u0631 \u0634\u062f\u06c1\u060c \u062e\u0641\u06cc\u06c1\u060c \u0645\u0633\u0648\u062f\u06c1\u060c \u0627\u0648\u0631 \u0627\u062f\u0627 \u0634\u062f\u06c1 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"1062\" height=\"568\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u0633 \u0645\u0642\u0627\u0645 \u067e\u0631\u060c \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u0646 \u067e\u0679 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0633\u06cc \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0645\u0648\u0627\u062f \u062a\u06cc\u0627\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u060c \u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u060c \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646\u060c \u06cc\u0627 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0688\u0627\u06a9 \u0679\u06a9\u0679\u06d4<\/p>\n<h2 id=\"heading-positioning-and-styling-the-element\">\u067e\u0648\u0632\u06cc\u0634\u0646 \u0627\u0648\u0631 \u0637\u0631\u0632 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631<\/h2>\n<p>\u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637\u060c \u0679\u06cc\u06a9\u0633\u0679 \u0644\u06cc\u0628\u0644\u060c \u06cc\u0627 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0633\u06cc\u0679 \u0627\u0633\u0679\u06cc\u0645\u067e \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06af\u0644\u0627 \u0645\u0631\u062d\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062f\u0631\u0633\u062a \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0631\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n<p>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0639\u0646\u0635\u0631 \u06c1\u06d2 <code>elementLayer<\/code> \u067e\u06c1\u0644\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u06cc\u06c1 \u067e\u0631\u062a \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0633\u06d2 \u0645\u06cc\u0644 \u06a9\u06be\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0633 \u0633\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0644\u06a9\u06be\u06d2 \u062c\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u0645\u0644\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u0688\u06cc\u0679\u0631 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0628\u06be\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p>\u067e\u06cc\u0645\u0627\u0646\u06c1<\/p>\n<\/li>\n<li>\n<p>\u06af\u0631\u062f\u0634<\/p>\n<\/li>\n<li>\n<p>\u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9\u0633 \u067e\u0648\u0632\u06cc\u0634\u0646<\/p>\n<\/li>\n<li>\n<p>Y \u067e\u0648\u0632\u06cc\u0634\u0646<\/p>\n<\/li>\n<\/ul>\n<p>\u0641\u0639\u0627\u0644 \u0639\u0646\u0635\u0631 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u062f\u0631\u0633\u062a \u06a9\u0646\u0679\u0631\u0648\u0644 \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0633\u0627\u0626\u0632 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u06cc\u062f \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u0679\u06cc\u06a9\u0633\u0679 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0631\u0646\u06af \u06a9\u0648 \u067e\u0686\u06be\u0644\u06d2 \u062d\u0635\u06d2 \u06a9\u06d2 \u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0633\u0646\u0628\u06be\u0627\u0644\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0628\u06cc\u0686 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><p>\n\n    <h3>3. Placement & Style<\/h3>\n\n    <label>\n        Rotation (\u00b0)\n\n        <input type=\"number\" id=\"rotationInput\" value=\"0\"\/>\n    <\/label>\n\n    <label>\n        Opacity\n\n        <input type=\"range\" id=\"opacityInput\" min=\"0\" max=\"100\" value=\"100\"\/>\n    <\/label>\n\n    <label>\n        X Position\n\n        <input type=\"number\" id=\"xPosition\" value=\"100\"\/>\n    <\/label>\n\n    <label>\n        Y Position\n\n        <input type=\"number\" id=\"yPosition\" value=\"100\"\/>\n    <\/label>\n\n<\/p>\n<\/code><\/pre>\n<p>\u062f\u0633\u062a\u062e\u0637\u06cc \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633\u06a9\u06cc\u0644 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><label>\n    Scale (<span id=\"scaleValue\">100%<\/span>)\n\n    <input type=\"range\" id=\"scaleInput\" min=\"25\" max=\"250\" value=\"100\"\/>\n<\/label>\n<\/code><\/pre>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0646\u0679\u0631\u0648\u0644 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const scaleInput =\n    document.getElementById(\n        \"scaleInput\"\n    );\n\nconst scaleValue =\n    document.getElementById(\n        \"scaleValue\"\n    );\n\nconst rotationInput =\n    document.getElementById(\n        \"rotationInput\"\n    );\n\nconst opacityInput =\n    document.getElementById(\n        \"opacityInput\"\n    );\n\nconst xPosition =\n    document.getElementById(\n        \"xPosition\"\n    );\n\nconst yPosition =\n    document.getElementById(\n        \"yPosition\"\n    );\n<\/code><\/pre>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0635\u0631\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function updateElementTransform() {\n\n    if (!activeElement) {\n        return;\n    }\n\n    activeElement.element.style.transform =\n        `\n            scale(${activeElement.scale})\n            rotate(${activeElement.rotation}deg)\n        `;\n\n    activeElement.element.style.opacity =\n        activeElement.opacity;\n\n}\n<\/code><\/pre>\n<p>\u0645\u062a\u0646 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 <code>scale<\/code> \u067e\u0633\u0646\u062f <code>1<\/code> \u0644\u06c1\u0630\u0627 \u0622\u067e \u062a\u0628\u0627\u062f\u0644\u0648\u06ba \u06a9\u06cc \u0648\u06c1\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">activeElement = {\n\n    type: \"text\",\n\n    text,\n\n    element: textElement,\n\n    x: 100,\n\n    y: 100,\n\n    scale: 1,\n\n    rotation: 0,\n\n    opacity: 1\n\n};\n<\/code><\/pre>\n<h3 id=\"heading-changing-the-element-scale\">\u0639\u0646\u0635\u0631 \u06a9\u0627 \u067e\u06cc\u0645\u0627\u0646\u06c1 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u062c\u0628 \u0635\u0627\u0631\u0641 \u0627\u0633\u06a9\u06cc\u0644 \u0633\u0644\u0627\u0626\u06cc\u0688\u0631 \u06a9\u0648 \u062d\u0631\u06a9\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0641\u06cc\u0635\u062f \u06a9\u0648 \u0627\u0639\u0634\u0627\u0631\u06cc\u06c1 \u06a9\u06cc \u0642\u062f\u0631\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">scaleInput.addEventListener(\n    \"input\",\n    () => {\n\n        if (!activeElement) {\n            return;\n        }\n\n        const percentage =\n            Number(\n                scaleInput.value\n            );\n\n        activeElement.scale =\n            percentage \/ 100;\n\n        scaleValue.textContent =\n            `${percentage}%`;\n\n        updateElementTransform();\n\n    }\n);\n<\/code><\/pre>\n<p>\u0642\u062f\u0631 <code>100%<\/code> \u0627\u0635\u0644 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0633\u0627\u0626\u0632 \u06a9\u06cc \u0646\u0634\u0627\u0646\u062f\u06c1\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-text\">50%  \u2192 0.5\n100% \u2192 1\n114% \u2192 1.14\n200% \u2192 2\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u0646\u0626\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0646\u0627\u0626\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u067e\u0646\u06d2 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1\u060c \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06cc\u0627 \u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0628\u0691\u0627 \u06cc\u0627 \u06a9\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-rotating-the-element\">\u0639\u0646\u0635\u0631 \u06a9\u06cc \u06af\u0631\u062f\u0634<\/h3>\n<p>\u06af\u0631\u062f\u0634 \u0627\u0646 \u067e\u0679 \u0632\u0627\u0648\u06cc\u0648\u06ba \u06a9\u0648 \u0688\u06af\u0631\u06cc \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">rotationInput.addEventListener(\n    \"input\",\n    () => {\n\n        if (!activeElement) {\n            return;\n        }\n\n        activeElement.rotation =\n            Number(\n                rotationInput.value\n            );\n\n        updateElementTransform();\n\n    }\n);\n<\/code><\/pre>\n<p>\u06af\u0631\u062f\u0634 <code>0<\/code> \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0627\u0641\u0642\u06cc \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u0645\u062b\u0628\u062a \u06cc\u0627 \u0645\u0646\u0641\u06cc \u0642\u062f\u0631\u06cc\u06ba \u0639\u0646\u0635\u0631 \u06a9\u0648 \u06af\u06be\u0648\u0645\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-adjusting-opacity\">\u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646 \u0627\u06cc\u0688\u062c\u0633\u0679\u0645\u0646\u0679<\/h3>\n<p>\u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646 \u0688\u0627\u06a9 \u0679\u06a9\u0679\u0648\u06ba\u060c \u0648\u0627\u0679\u0631 \u0645\u0627\u0631\u06a9\u0633 \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0644\u06cc\u0628\u0644\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u06cc\u062f \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u06cc\u0635\u062f \u0633\u0644\u0627\u0626\u06cc\u0688\u0631 \u0627\u0646 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>0<\/code> \u0627\u0648\u0631 <code>1<\/code>.<\/p>\n<pre><code class=\"language-javascript\">opacityInput.addEventListener(\n    \"input\",\n    () => {\n\n        if (!activeElement) {\n            return;\n        }\n\n        activeElement.opacity =\n            Number(\n                opacityInput.value\n            ) \/ 100;\n\n        updateElementTransform();\n\n    }\n);\n<\/code><\/pre>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631:<\/p>\n<pre><code class=\"language-text\">100% \u2192 1\n75%  \u2192 0.75\n50%  \u2192 0.5\n<\/code><\/pre>\n<p>\u0622\u062e\u0631\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0648\u06c1\u06cc \u0627\u0648\u067e\u06cc\u0633\u0679\u06cc \u0648\u06cc\u0644\u06cc\u0648 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<h2 id=\"heading-dragging-an-element-across-the-pdf-preview\">\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u06af\u06be\u0633\u06cc\u0679\u06cc\u06ba\u06d4<\/h2>\n<p>X \u0627\u0648\u0631 Y \u0646\u0642\u0627\u0637 \u06a9\u0648 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0631\u0646\u0627 \u062f\u0631\u0633\u062a \u0627\u06cc\u0688\u062c\u0633\u0679\u0645\u0646\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u06cc\u062f \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0645\u0637\u0644\u0648\u0628\u06c1 \u067e\u0648\u0632\u06cc\u0634\u0646 \u067e\u0631 \u06af\u06be\u0633\u06cc\u0679\u0646\u06d2 \u06a9\u0648 \u062a\u0631\u062c\u06cc\u062d \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0688\u0631\u06cc\u06af \u0627\u0633\u0679\u06cc\u0679 \u06a9\u0648 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">let isDragging = false;\n\nlet dragOffsetX = 0;\n\nlet dragOffsetY = 0;\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0645\u062a\u0646 \u06a9\u0627 \u0639\u0646\u0635\u0631 \u0628\u0646 \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0688\u0631\u06cc\u06af \u0627\u06cc\u06a9\u0634\u0646 \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function enableDragging(\n    element\n) {\n\n    element.addEventListener(\n        \"pointerdown\",\n        event => {\n\n            isDragging = true;\n\n            const elementRect =\n                element\n                    .getBoundingClientRect();\n\n            dragOffsetX =\n                event.clientX -\n                elementRect.left;\n\n            dragOffsetY =\n                event.clientY -\n                elementRect.top;\n\n            element.setPointerCapture(\n                event.pointerId\n            );\n\n        }\n    );\n\n}\n<\/code><\/pre>\n<p>\u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u062a\u06d2 \u0648\u0642\u062a \u0627\u0633 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">enableDragging(image);\n<\/code><\/pre>\n<p>\u06cc\u0627:<\/p>\n<pre><code class=\"language-javascript\">enableDragging(textElement);\n<\/code><\/pre>\n<p>\u0627\u06af\u0644\u0627\u060c \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u062a\u062d\u0631\u06cc\u06a9 \u06a9\u0648 \u0633\u0646\u06cc\u06ba.<\/p>\n<pre><code class=\"language-javascript\">elementLayer.addEventListener(\n    \"pointermove\",\n    event => {\n\n        if (\n            !isDragging ||\n            !activeElement\n        ) {\n            return;\n        }\n\n        const layerRect =\n            elementLayer\n                .getBoundingClientRect();\n\n        const x =\n            event.clientX -\n            layerRect.left -\n            dragOffsetX;\n\n        const y =\n            event.clientY -\n            layerRect.top -\n            dragOffsetY;\n\n        moveActiveElement(\n            x,\n            y\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u062d\u0631\u06a9\u062a \u06a9\u06d2 \u0627\u0641\u0639\u0627\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function moveActiveElement(\n    x,\n    y\n) {\n\n    if (!activeElement) {\n        return;\n    }\n\n    activeElement.x = x;\n\n    activeElement.y = y;\n\n    activeElement.element.style.left =\n        `${x}px`;\n\n    activeElement.element.style.top =\n        `${y}px`;\n\n    xPosition.value =\n        Math.round(x);\n\n    yPosition.value =\n        Math.round(y);\n\n}\n<\/code><\/pre>\n<p>\u062c\u0628 \u0622\u067e \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u062c\u0627\u0631\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06af\u06be\u0633\u06cc\u0679\u0646\u0627 \u0628\u0646\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">elementLayer.addEventListener(\n    \"pointerup\",\n    () => {\n\n        isDragging = false;\n\n    }\n);\n\nelementLayer.addEventListener(\n    \"pointercancel\",\n    () => {\n\n        isDragging = false;\n\n    }\n);\n<\/code><\/pre>\n<p>\u0627\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0645\u062a\u0646 \u06a9\u06d2 \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u067e\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u067e \u06a9\u0627 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637 \u0622\u062e\u0631\u06cc \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u06a9\u0648\u0646\u06d2 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u0631\u06a9\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_761_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0627\u0633\u06a9\u06cc\u0644\u060c \u06af\u0631\u062f\u0634\u060c \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646\u060c X \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u0627\u0648\u0631 Y \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631\u06d4\" style=\"display:block;margin:0 auto\" width=\"1047\" height=\"532\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-updating-the-position-manually\">\u0627\u067e\u0646\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u0648 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>X \u0627\u0648\u0631 Y \u0641\u06cc\u0644\u0688\u0632 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u0627 \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0637\u0631\u06cc\u0642\u06c1 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9\u0633 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u0633\u0646\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">xPosition.addEventListener(\n    \"input\",\n    () => {\n\n        if (!activeElement) {\n            return;\n        }\n\n        const x =\n            Number(\n                xPosition.value\n            );\n\n        moveActiveElement(\n            x,\n            activeElement.y\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>Y \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06be\u06cc \u0627\u06cc\u0633\u0627 \u06c1\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">yPosition.addEventListener(\n    \"input\",\n    () => {\n\n        if (!activeElement) {\n            return;\n        }\n\n        const y =\n            Number(\n                yPosition.value\n            );\n\n        moveActiveElement(\n            activeElement.x,\n            y\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u06af\u06be\u0633\u06cc\u0679\u0646\u0627 \u0627\u0648\u0631 \u062f\u0633\u062a\u06cc \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0627\u0646 \u067e\u0679 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0633\u06cc \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u0627 \u0641\u06cc\u0644\u0688 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0641\u06cc\u0644\u0688 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0639\u0646\u0635\u0631 \u0645\u0646\u062a\u0642\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-keeping-the-element-inside-the-page\">\u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0631\u06a9\u06be\u06cc\u06ba<\/h2>\n<p>\u0633\u0631\u062d\u062f\u0648\u06ba \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0635\u0627\u0631\u0641 \u063a\u0644\u0637\u06cc \u0633\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06af\u06be\u0633\u06cc\u0679 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0645\u0642\u0627\u0645\u0627\u062a \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function clampPosition(\n    x,\n    y\n) {\n\n    const element =\n        activeElement.element;\n\n    const maxX =\n        elementLayer.clientWidth -\n        element.offsetWidth;\n\n    const maxY =\n        elementLayer.clientHeight -\n        element.offsetHeight;\n\n    return {\n\n        x:\n            Math.max(\n                0,\n                Math.min(x, maxX)\n            ),\n\n        y:\n            Math.max(\n                0,\n                Math.min(y, maxY)\n            )\n\n    };\n\n}\n<\/code><\/pre>\n<p>\u0627\u0633\u06d2 \u0627\u0646\u062f\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>moveActiveElement()<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const position =\n    clampPosition(\n        x,\n        y\n    );\n\nactiveElement.x =\n    position.x;\n\nactiveElement.y =\n    position.y;\n<\/code><\/pre>\n<p>\u062c\u0628 \u0627\u0633\u06a9\u06cc\u0644\u0646\u06af \u06cc\u0627 \u06af\u0631\u062f\u0634 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0648\u060c \u06a9\u0633\u06cc \u0639\u0646\u0635\u0631 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u06c1 \u0628\u0635\u0631\u06cc \u062d\u062f\u06cc\u06ba \u0627\u0633 \u06a9\u06d2 \u0627\u0635\u0644 \u062e\u0627\u0646\u06d2 \u0633\u06d2 \u0622\u06af\u06d2 \u0628\u0691\u06be \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0627\u06cc\u0688\u06cc\u0679\u0631\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>getBoundingClientRect()<\/code> \u0632\u06cc\u0627\u062f\u06c1 \u062f\u0631\u0633\u062a \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06cc \u062d\u062f \u06a9\u06d2 \u062d\u0633\u0627\u0628 \u06a9\u062a\u0627\u0628 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u06a9\u0644\u06cc\u0645\u067e \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0641\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-applying-the-element-to-selected-pages\">\u0645\u0646\u062a\u062e\u0628 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0639\u0646\u0635\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0635\u0627\u0631\u0641 \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u0627 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u0639\u0646\u0635\u0631 \u0648\u0635\u0648\u0644 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u062a\u06cc\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">Current page only\nAll pages\nSpecific pages\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><p>\n\n    <h3>4. Apply to Pages<\/h3>\n\n    <label>\n        <input type=\"radio\" name=\"applyMode\" value=\"current\" checked=\"checked\"\/>\n        Current page only\n    <\/label>\n\n    <label>\n        <input type=\"radio\" name=\"applyMode\" value=\"all\"\/>\n        All pages\n    <\/label>\n\n    <label>\n        <input type=\"radio\" name=\"applyMode\" value=\"specific\"\/>\n        Specific pages\n    <\/label>\n\n    <input type=\"text\" id=\"specificPages\" placeholder=\"e.g., 1, 3-5, 10\"\/>\n\n<\/p>\n<\/code><\/pre>\n<p>\u0645\u0646\u062a\u062e\u0628 \u0645\u0648\u0688 \u067e\u0691\u06be\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">function getTargetPages() {\n\n    const mode =\n        document.querySelector(\n            'input[name=\"applyMode\"]:checked'\n        ).value;\n\n    if (\n        mode ===\n        \"current\"\n    ) {\n\n        return [\n            currentPage\n        ];\n\n    }\n\n    if (\n        mode ===\n        \"all\"\n    ) {\n\n        return Array.from(\n\n            {\n                length:\n                    totalPages\n            },\n\n            (_, index) =>\n                index + 1\n\n        );\n\n    }\n\n    return parsePageRange(\n        specificPages.value\n    );\n\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u067e\u0627\u0631\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-text\">1, 3-5, 10\n<\/code><\/pre>\n<p>\u06a9\u06d2 \u0633\u0627\u062a\u06be:<\/p>\n<pre><code class=\"language-javascript\">function parsePageRange(\n    value\n) {\n\n    const pages =\n        new Set();\n\n    value\n        .split(\",\")\n        .forEach(part => {\n\n            const item =\n                part.trim();\n\n            if (!item) {\n                return;\n            }\n\n            if (\n                item.includes(\"-\")\n            ) {\n\n                const [\n                    start,\n                    end\n                ] =\n                    item\n                        .split(\"-\")\n                        .map(Number);\n\n                for (\n                    let page = start;\n                    page <= end;\n                    page++\n                ) {\n\n                    if (\n                        page >= 1 &&\n                        page <= totalPages\n                    ) {\n\n                        pages.add(page);\n\n                    }\n\n                }\n\n            } else {\n\n                const page =\n                    Number(item);\n\n                if (\n                    page >= 1 &&\n                    page <= totalPages\n                ) {\n\n                    pages.add(page);\n\n                }\n\n            }\n\n        });\n\n    return [...pages];\n\n}\n<\/code><\/pre>\n<p>\u0646\u062a\u0627\u0626\u062c \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">[\n    1,\n    3,\n    4,\n    5,\n    10\n]\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0645\u06c1\u0631 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u0645\u062a\u0639\u062f\u062f \u06c1\u062f\u0641 \u0648\u0627\u0644\u06d2 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0630\u06c1\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0628\u06be\u06cc \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0646\u0642\u0627\u0637 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u0627 \u0627\u0633 \u0648\u0642\u062a \u0628\u06c1\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0648\u06c1 \u0635\u0641\u062d\u0627\u062a \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0642\u0644 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-applying-and-finalizing-the-pdf\">\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u062d\u062a\u0645\u06cc \u0634\u06a9\u0644 \u062f\u06cc\u0646\u0627<\/h2>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0631\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0635\u062d\u06cc\u062d \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0635\u0627\u0631\u0641 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0648\u0631 \u062a\u06a9\u0645\u06cc\u0644<\/strong>.<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u06cc\u06a9\u0634\u0646 \u0628\u0679\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><p>\n\n    <button id=\"applyButton\">\n        Apply & Finalize\n    <\/button>\n\n    <button id=\"startOverButton\">\n        Start Over\n    <\/button>\n\n<\/p>\n<\/code><\/pre>\n<p>\u0628\u0679\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">const applyButton =\n    document.getElementById(\n        \"applyButton\"\n    );\n\nconst startOverButton =\n    document.getElementById(\n        \"startOverButton\"\n    );\n<\/code><\/pre>\n<p>\u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u0639\u0646\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">applyButton.addEventListener(\n    \"click\",\n    async () => {\n\n        if (!activeElement) {\n\n            alert(\n                \"Please add a signature, text, or stamp first.\"\n            );\n\n            return;\n\n        }\n\n        const targetPages =\n            getTargetPages();\n\n        if (\n            targetPages.length === 0\n        ) {\n\n            alert(\n                \"Please select at least one valid page.\"\n            );\n\n            return;\n\n        }\n\n        await generateFinalPdf(\n            targetPages\n        );\n\n    }\n);\n<\/code><\/pre>\n<p>\u06a9\u06c1 <code>generateFinalPdf()<\/code> \u0641\u0646\u06a9\u0634\u0646 \u0627\u06af\u0644\u06d2 \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0627\u0635\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u06c1 <strong>\u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba<\/strong> \u0628\u0679\u0646 \u062f\u0628\u0627\u0646\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0645\u0679 \u062c\u0627\u0626\u06d2 \u06af\u06cc \u0627\u0648\u0631 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u06cc \u0633\u06cc\u0679 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<pre><code class=\"language-javascript\">startOverButton.addEventListener(\n    \"click\",\n    resetTool\n);\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0631\u06cc \u0633\u06cc\u0679 \u0641\u0646\u06a9\u0634\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function resetTool() {\n\n    pdfDocument = null;\n\n    originalPdfBytes = null;\n\n    currentPage = 1;\n\n    totalPages = 0;\n\n    activeElement = null;\n\n    pdfInput.value = \"\";\n\n    elementLayer.innerHTML = \"\";\n\n    editorSection.hidden = true;\n\n    resultSection.hidden = true;\n\n    uploadSection.hidden = false;\n\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0627\u0633 \u06a9\u06cc \u0627\u0635\u0644 \u0627\u067e \u0644\u0648\u0688 \u062d\u0627\u0644\u062a \u0645\u06cc\u06ba \u0648\u0627\u067e\u0633 \u06a9\u0631 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_67_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0622\u067e\u0634\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0645\u0646\u062a\u062e\u0628 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06cc\u0627 \u0679\u06cc\u06a9\u0633\u0679 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0644\u0627\u0626\u06cc \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062e\u062a\u0645 \u06a9\u0631\u06cc\u06ba \u0628\u0679\u0646\u06d4\" style=\"display:block;margin:0 auto\" width=\"362\" height=\"86\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0645\u0631\u062d\u0644\u06c1 \u0627\u0628 \u0645\u06a9\u0645\u0644 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0645\u062a\u0646 \u06a9\u0627 \u0639\u0646\u0635\u0631 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u06a9\u06cc \u0638\u0627\u06c1\u0631\u06cc \u0634\u06a9\u0644 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06c1\u062f\u0641 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u062d\u062a\u0645\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-generating-the-signed-pdf\">\u062f\u0633\u062a\u062e\u0637 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u0627\u0635\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0648\u0631 \u062a\u06a9\u0645\u06cc\u0644<\/strong>\u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u0635\u0644 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 PDF-lib \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0646\u062a\u062e\u0628 \u062f\u0633\u062a\u062e\u0637\u060c \u0645\u062a\u0646 \u06cc\u0627 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u06a9\u0648 \u06c1\u062f\u0641 \u0648\u0627\u0644\u06d2 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0644\u06a9\u06be\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0635\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0628\u0627\u0626\u0679\u0633 \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function generateFinalPdf(\n    targetPages\n) {\n\n    const pdfDoc =\n        await PDFLib.PDFDocument.load(\n            originalPdfBytes.slice()\n        );\n\n    const pages =\n        pdfDoc.getPages();\n\n}\n<\/code><\/pre>\n<p>\u0639\u0646\u0627\u0635\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0622\u067e \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0646\u0642\u0627\u0637 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<p>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u0635\u0644 PDF \u0635\u0641\u062d\u06c1 \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u0626\u0632 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0633\u0633\u0679\u0645 \u0628\u06be\u06cc \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0644\u0641 Y-axis \u0627\u0635\u0644 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06c1\u0631 \u06c1\u062f\u0641 \u0648\u0627\u0644\u06d2 \u0635\u0641\u062d\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const {\n    width: pdfWidth,\n    height: pdfHeight\n} = page.getSize();\n\nconst scaleX =\n    pdfWidth \/\n    pdfCanvas.width;\n\nconst scaleY =\n    pdfHeight \/\n    pdfCanvas.height;\n<\/code><\/pre>\n<p>\u067e\u06cc\u0634 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">const pdfX =\n    activeElement.x *\n    scaleX;\n\nconst pdfY =\n    pdfHeight -\n    (\n        activeElement.y +\n        activeElement.element.offsetHeight\n    ) * scaleY;\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0627\u0648\u067e\u0631\u06cc \u0628\u0627\u0626\u06cc\u06ba \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0633\u0633\u0679\u0645 \u0633\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u062c \u06a9\u06d2 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0633\u0633\u0679\u0645 \u062a\u06a9 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0627 \u0646\u0642\u0634\u06c1 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-embedding-a-signature\">\u062f\u0633\u062a\u062e\u0637 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2\u06d4<\/h3>\n<p>\u0622\u067e \u06a9\u06d2 \u06a9\u06be\u06cc\u0646\u0686\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u0679\u0627\u0626\u067e \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0627\u0648\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u062f\u0633\u062a\u062e\u0637 \u062a\u0645\u0627\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u06a9\u06be\u0627\u0626\u06d2 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0648\u06c1 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06d2 \u0622\u062e\u0631\u06cc \u0645\u0631\u062d\u0644\u06d2 \u062a\u06a9 \u0646\u06c1 \u067e\u06c1\u0646\u0686 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u062f\u0633\u062a\u062e\u0637\u06cc \u0688\u06cc\u0679\u0627 URL \u06a9\u0648 \u0628\u0627\u0626\u0679\u0633 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function dataUrlToBytes(\n    dataUrl\n) {\n\n    const response =\n        await fetch(dataUrl);\n\n    return await response.arrayBuffer();\n\n}\n<\/code><\/pre>\n<p>\u0627\u067e\u0646\u06cc \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureBytes =\n    await dataUrlToBytes(\n        activeElement.source\n    );\n\nconst signatureImage =\n    await pdfDoc.embedPng(\n        signatureBytes\n    );\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 JPEG \u062f\u0633\u062a\u062e\u0637 \u0645\u0639\u0627\u0648\u0646 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u0632 \u06a9\u0648 \u0627\u0635\u0644 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u0627\u0648\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 <code>embedJpg()<\/code> \u0627\u06af\u0631 \u0645\u0646\u0627\u0633\u0628 \u06c1\u0648\u06d4<\/p>\n<p>\u062d\u062a\u0645\u06cc \u0637\u0648\u0644 \u0648 \u0639\u0631\u0636 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const previewWidth =\n    activeElement\n        .element\n        .offsetWidth *\n    activeElement.scale;\n\nconst previewHeight =\n    activeElement\n        .element\n        .offsetHeight *\n    activeElement.scale;\n\nconst finalWidth =\n    previewWidth *\n    scaleX;\n\nconst finalHeight =\n    previewHeight *\n    scaleY;\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">page.drawImage(\n    signatureImage,\n    {\n        x: pdfX,\n\n        y:\n            pdfHeight -\n            (\n                activeElement.y *\n                scaleY\n            ) -\n            finalHeight,\n\n        width:\n            finalWidth,\n\n        height:\n            finalHeight,\n\n        rotate:\n            PDFLib.degrees(\n                activeElement.rotation\n            ),\n\n        opacity:\n            activeElement.opacity\n    }\n);\n<\/code><\/pre>\n<p>\u062a\u06cc\u0646\u0648\u06ba \u0637\u0631\u06cc\u0642\u06d2 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u062d\u062a\u0645\u06cc \u0634\u06a9\u0644 \u062f\u06cc\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0645\u0646\u0637\u0642 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0633 \u0633\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631 \u06a9\u06c1 \u062f\u0633\u062a\u062e\u0637 \u06a9\u06be\u06cc\u0646\u0686\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0679\u0627\u0626\u067e \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u06cc\u0627 \u0627\u067e \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-adding-text-or-a-stamp\">\u0645\u062a\u0646 \u06cc\u0627 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0645\u062a\u0646 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0644\u06a9\u06be\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u0631\u0646\u06af \u06a9\u0648 \u06c1\u06cc\u06a9\u0633\u0627\u0688\u06cc\u0633\u06cc\u0645\u0644 \u0633\u06d2 \u0622\u0631\u062c\u06cc\u0628\u06cc \u0627\u0642\u062f\u0627\u0631 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function hexToRgb(\n    hex\n) {\n\n    const value =\n        hex.replace(\n            \"#\",\n            \"\"\n        );\n\n    return {\n\n        r:\n            parseInt(\n                value.substring(0, 2),\n                16\n            ) \/ 255,\n\n        g:\n            parseInt(\n                value.substring(2, 4),\n                16\n            ) \/ 255,\n\n        b:\n            parseInt(\n                value.substring(4, 6),\n                16\n            ) \/ 255\n\n    };\n\n}\n<\/code><\/pre>\n<p>\u0645\u062a\u0646 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">const color =\n    hexToRgb(\n        activeElement.color\n    );\n\npage.drawText(\n    activeElement.text,\n    {\n        x:\n            activeElement.x *\n            scaleX,\n\n        y:\n            pdfHeight -\n            (\n                activeElement.y *\n                scaleY\n            ) -\n            activeElement.fontSize,\n\n        size:\n            activeElement.fontSize *\n            scaleY,\n\n        color:\n            PDFLib.rgb(\n                color.r,\n                color.g,\n                color.b\n            ),\n\n        rotate:\n            PDFLib.degrees(\n                activeElement.rotation\n            ),\n\n        opacity:\n            activeElement.opacity\n    }\n);\n<\/code><\/pre>\n<p>\u062a\u0645\u0627\u0645 \u06c1\u062f\u0641 \u0648\u0627\u0644\u06d2 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u062a\u0631\u0645\u06cc\u0645 \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const finalPdfBytes =\n    await pdfDoc.save();\n\nconst finalPdfBlob =\n    new Blob(\n        [finalPdfBytes],\n        {\n            type:\n                \"application\/pdf\"\n        }\n    );\n\nawait showFinalPreview(\n    finalPdfBlob\n);\n<\/code><\/pre>\n<p>\u0627\u0633 \u0648\u0642\u062a\u060c \u0622\u067e \u06a9\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u060c \u0645\u062a\u0646\u060c \u06cc\u0627 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631 \u062f\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-previewing-the-final-pdf\">\u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1<\/h2>\n<p>\u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u06a9\u0645\u0644 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648 \u0627\u06cc\u06a9 \u0639\u0644\u06cc\u062d\u062f\u06c1 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0639\u0644\u0627\u0642\u06d2 \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0633\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u06cc\u06c1 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u0645\u0644\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0639\u0646\u0627\u0635\u0631 \u0635\u062d\u06cc\u062d \u0635\u0641\u062d\u06c1 \u0627\u0648\u0631 \u0645\u062a\u0648\u0642\u0639 \u0645\u0642\u0627\u0645 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06ba\u06d4<\/p>\n<p>PDF.js \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0641\u0627\u0626\u0644 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">let finalPdfDocument = null;\n\nlet finalPage = 1;\n\nasync function showFinalPreview(\n    blob\n) {\n\n    const bytes =\n        await blob.arrayBuffer();\n\n    finalPdfDocument =\n        await pdfjsLib\n            .getDocument({\n                data: bytes\n            })\n            .promise;\n\n    finalPage = 1;\n\n    editorSection.hidden =\n        true;\n\n    resultSection.hidden =\n        false;\n\n    await renderFinalPage(\n        finalPage\n    );\n\n}\n<\/code><\/pre>\n<p>\u0645\u0648\u062c\u0648\u062f\u06c1 \u0646\u062a\u0627\u0626\u062c \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function renderFinalPage(\n    pageNumber\n) {\n\n    const page =\n        await finalPdfDocument\n            .getPage(\n                pageNumber\n            );\n\n    const viewport =\n        page.getViewport({\n            scale: 1.4\n        });\n\n    finalCanvas.width =\n        viewport.width;\n\n    finalCanvas.height =\n        viewport.height;\n\n    await page.render({\n\n        canvasContext:\n            finalCanvas\n                .getContext(\"2d\"),\n\n        viewport\n\n    }).promise;\n\n    finalPageInfo.textContent =\n        `Page ${pageNumber} of ${finalPdfDocument.numPages}`;\n\n}\n<\/code><\/pre>\n<p>\u067e\u0686\u06be\u0644\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u0648\u06c1\u06cc \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u067e\u06cc\u0679\u0631\u0646 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0627\u0635\u0644 PDF \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_454_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0644\u0627\u06af\u0648 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0645\u062a\u0646 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u062f\u06a9\u06be\u0627\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062d\u062a\u0645\u06cc PDF \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1\u06d4\" style=\"display:block;margin:0 auto\" width=\"704\" height=\"547\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-renaming-and-downloading-the-final-pdf\">\u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0641\u0627\u0626\u0646\u0644 PDF \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u067e\u0631\u0648\u0633\u06cc\u0633 \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u062f\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631:<\/p>\n<pre><code class=\"language-text\">document_signed.pdf\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u0627\u0646 \u067e\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" id=\"outputFilename\" value=\"document_signed.pdf\"\/>\n<\/code><\/pre>\n<p>\u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u062f\u0631\u0633\u062a \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function getOutputFilename() {\n\n    let filename =\n        outputFilename\n            .value\n            .trim();\n\n    if (!filename) {\n\n        filename =\n            \"document_signed.pdf\";\n\n    }\n\n    if (\n        !filename\n            .toLowerCase()\n            .endsWith(\".pdf\")\n    ) {\n\n        filename += \".pdf\";\n\n    }\n\n    return filename;\n\n}\n<\/code><\/pre>\n<p>\u0646\u062a\u0627\u0626\u062c \u06a9\u0627 \u0633\u06cc\u06a9\u0634\u0646 \u0635\u0641\u062d\u0627\u062a \u06a9\u06cc \u06a9\u0644 \u062a\u0639\u062f\u0627\u062f \u0627\u0648\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0628\u06be\u06cc \u062f\u06a9\u06be\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function formatFileSize(\n    bytes\n) {\n\n    if (\n        bytes <\n        1024 * 1024\n    ) {\n\n        return (\n            bytes \/ 1024\n        ).toFixed(2) + \" KB\";\n\n    }\n\n    return (\n        bytes \/\n        1024 \/\n        1024\n    ).toFixed(2) + \" MB\";\n\n}\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">filePageCount.textContent =\n    `Total Pages: ${finalPdfDocument.numPages}`;\n\nfileSize.textContent =\n    `File Size: ${\n        formatFileSize(\n            finalPdfBlob.size\n        )\n    }`;\n<\/code><\/pre>\n<p>\u0639\u0627\u0631\u0636\u06cc \u0622\u0628\u062c\u06cc\u06a9\u0679 URL \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u0627\u0626\u0644 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">downloadButton.addEventListener(\n    \"click\",\n    () => {\n\n        const url =\n            URL.createObjectURL(\n                finalPdfBlob\n            );\n\n        const link =\n            document.createElement(\n                \"a\"\n            );\n\n        link.href =\n            url;\n\n        link.download =\n            getOutputFilename();\n\n        link.click();\n\n        URL.revokeObjectURL(\n            url\n        );\n\n    }\n);\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_788_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0642\u0627\u0628\u0644 \u062a\u062f\u0648\u06cc\u0646 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645\u060c \u06a9\u0644 \u0635\u0641\u062d\u0627\u062a\u060c \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0628\u0679\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0633\u062a\u062e\u0637 \u0634\u062f\u06c1 PDF \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0633\u06cc\u06a9\u0634\u0646\u06d4\" style=\"display:block;margin:0 auto\" width=\"355\" height=\"280\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c <strong>\u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba<\/strong> \u0628\u0679\u0646 \u062f\u0628\u0627\u0646\u06d2 \u0633\u06d2 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u06cc \u0633\u06cc\u0679 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u06cc\u06c1 \u062f\u0648\u0633\u0631\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631 \u0633\u06a9\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_994_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0645\u0648\u062c\u0648\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646\u0646\u06af \u0633\u06cc\u0634\u0646 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0679\u0646 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"150\" height=\"54\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u067e \u0644\u0648\u0688 \u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u062a\u06a9 \u067e\u0648\u0631\u06d2 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0688\u0627\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-step-1-upload-the-pdf\">\u0645\u0631\u062d\u0644\u06c1 1: \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0635\u0627\u0631\u0641\u06cc\u0646 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648 \u0627\u067e \u0644\u0648\u0688 \u0627\u06cc\u0631\u06cc\u0627 \u0645\u06cc\u06ba \u06af\u06be\u0633\u06cc\u0679 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 <strong>\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong>.<\/p>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0645\u0642\u0627\u0645\u06cc \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694046_999_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0688\u0631\u06cc\u06af \u0627\u06cc\u0646\u0688 \u0688\u0631\u0627\u067e \u0633\u067e\u0648\u0631\u0679 \u0627\u0648\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0644\u06cc\u06a9\u0634\u0646 \u0628\u0679\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u06af\u0646\u06cc\u0686\u0631 \u0679\u0648\u0644 \u0627\u067e \u0644\u0648\u0688 \u0627\u06cc\u0631\u06cc\u0627\u06d4\" style=\"display:block;margin:0 auto\" width=\"639\" height=\"652\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-2-preview-and-navigate-the-document\">\u0645\u0631\u062d\u0644\u06c1 2: \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0627\u0648\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0645\u0648\u062c\u0648\u062f\u06c1 \u0635\u0641\u062d\u06c1 PDF \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<p>\u067e\u0686\u06be\u0644\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0645\u062a\u0639\u062f\u062f \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0648 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0648\u06c1 \u0635\u0641\u062d\u06c1 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06c1\u0627\u06ba \u0627\u0646\u06c1\u06cc\u06ba \u0639\u0646\u0627\u0635\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_678_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u067e\u0686\u06be\u0644\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u0635\u0641\u062d\u06c1 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0627 \u067e\u06cc\u0634 \u0645\u0646\u0638\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4\" style=\"display:block;margin:0 auto\" width=\"708\" height=\"550\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-3-choose-what-to-add\">\u0645\u0631\u062d\u0644\u06c1 3: \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/h3>\n<p>\u0635\u0627\u0631\u0641\u06cc\u0646 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>\u062f\u0633\u062a\u062e\u0637<\/strong> \u0627\u0648\u0631 <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong>.<\/p>\n<p>\u0627\u0633 \u0633\u06d2 \u06cc\u06c1 \u0637\u06d2 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u06a9\u0648\u0646 \u0633\u06d2 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_874_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u062f\u0633\u062a\u062e\u0637 \u0627\u0648\u0631 \u0645\u062a\u0646 \u06cc\u0627 \u0633\u0679\u06cc\u0645\u067e \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06a9\u0646\u0679\u0631\u0648\u0644\u06d4\" style=\"display:block;margin:0 auto\" width=\"342\" height=\"755\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-4-create-the-signature\">\u0645\u0631\u062d\u0644\u06c1 4: \u0627\u06cc\u06a9 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0627\u06af\u0631 \u0622\u067e \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0635\u0627\u0631\u0641 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>\u0688\u0631\u0627<\/strong>, <strong>\u0632\u0645\u0631\u06c1<\/strong>\u06cc\u0627 <strong>\u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba<\/strong>.<\/p>\n<p>\u0688\u0631\u0627\u0626\u0646\u06af \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062f\u0633\u062a\u062e\u0637\u06cc \u06a9\u06cc\u0646\u0648\u0633 \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0679\u0627\u0626\u067e \u0622\u067e\u0634\u0646 \u0622\u067e \u06a9\u06d2 \u062f\u0627\u062e\u0644 \u06a9\u0631\u062f\u06c1 \u0645\u062a\u0646 \u0633\u06d2 \u062f\u0633\u062a\u062e\u0637\u06cc \u0637\u0631\u0632 \u06a9\u0627 \u0639\u0646\u0635\u0631 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u0627\u067e \u0644\u0648\u0688 \u0627\u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0642\u0628\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_650_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0688\u0631\u0627\u0626\u0646\u06af\u060c \u0679\u0627\u0626\u067e\u0646\u06af \u0627\u0648\u0631 \u0627\u067e \u0644\u0648\u0688 \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be PDF \u062f\u0633\u062a\u062e\u0637 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0646\u0679\u0631\u0648\u0644\u06d4\" style=\"display:block;margin:0 auto\" width=\"543\" height=\"350\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-5-add-custom-text-or-a-preset-stamp\">\u0645\u0631\u062d\u0644\u06c1 5: \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u062a\u0646 \u06cc\u0627 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0633\u06cc\u0679 \u0627\u0633\u0679\u0627\u0645\u067e \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u062f\u0633\u062a\u062e\u0637 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0635\u0627\u0631\u0641 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>\u0679\u06cc\u06a9\u0633\u0679\/\u0633\u0679\u06cc\u0645\u067e<\/strong>.<\/p>\n<p>\u0622\u067e \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0645\u0648\u0627\u062f \u062f\u0631\u062c \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u0627\u06cc\u06a9 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2: <strong>\u0645\u0646\u0638\u0648\u0631 \u0634\u062f\u06c1<\/strong>, <strong>\u062e\u0641\u06cc\u06c1<\/strong>, <strong>\u0645\u0633\u0648\u062f\u06c1<\/strong>\u06cc\u0627 <strong>\u0627\u062f\u0627 \u06a9\u06cc\u0627<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_934_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u062a\u0646 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u0646\u0679\u0631\u0648\u0644\u0632\u06d4\" style=\"display:block;margin:0 auto\" width=\"560\" height=\"423\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-6-position-and-style-the-element\">\u0645\u0631\u062d\u0644\u06c1 6: \u062c\u06af\u06c1 \u0627\u0648\u0631 \u0637\u0631\u0632 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631<\/h3>\n<p>\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0639\u0646\u0627\u0635\u0631 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u0645\u0637\u0644\u0648\u0628\u06c1 \u067e\u0648\u0632\u06cc\u0634\u0646 \u067e\u0631 \u06af\u06be\u0633\u06cc\u0679 \u06a9\u0631 \u0633\u0627\u0626\u0632\u060c \u06af\u0631\u062f\u0634\u060c \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646\u060c X \u067e\u0648\u0632\u06cc\u0634\u0646\u060c Y \u067e\u0648\u0632\u06cc\u0634\u0646 \u0648\u063a\u06cc\u0631\u06c1 \u062c\u06cc\u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u062a\u0646 \u06a9\u06d2 \u0639\u0646\u0627\u0635\u0631 \u0642\u0627\u0628\u0644 \u062a\u0631\u062a\u06cc\u0628 \u0641\u0648\u0646\u0679 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06cc \u0628\u06be\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_287_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u067e\u0644\u06cc\u0633\u0645\u0646\u0679 \u0627\u0648\u0631 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u067e\u0646\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"1047\" height=\"532\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-7-choose-the-target-pages\">\u0645\u0631\u062d\u0644\u06c1 7: \u06c1\u062f\u0641 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0635\u0641\u062d\u06c1\u060c \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0627\u062a\u060c \u06cc\u0627 \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631:<\/p>\n<pre><code class=\"language-text\">1, 3-5, 10\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_978_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u06c1\u062f\u0641 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u06cc\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"329\" height=\"252\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062c\u0628 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u06cc\u0627 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0627 \u0644\u06cc\u0628\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u062a\u0648 \u06cc\u06c1 \u0645\u0641\u06cc\u062f \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-step-8-apply-and-finalize\">\u0645\u0631\u062d\u0644\u06c1 8: \u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062e\u062a\u0645 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0639\u0646\u0635\u0631 \u0627\u0648\u0631 \u06c1\u062f\u0641 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 <strong>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0648\u0631 \u062a\u06a9\u0645\u06cc\u0644<\/strong>.<\/p>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u0642\u0627\u0645 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u062a\u0631\u0645\u06cc\u0645 \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_27_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0645\u0646\u062a\u062e\u0628 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0679\u06cc\u06a9\u0633\u0679 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0679\u0646 \u0644\u06af\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u062e\u062a\u0645 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"204\" height=\"73\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-9-preview-the-completed-pdf\">\u0645\u0631\u062d\u0644\u06c1 9: \u0645\u06a9\u0645\u0644 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u06d4<\/h3>\n<p>\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u062d\u062a\u0645\u06cc \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<p>\u0635\u0627\u0631\u0641 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u062f\u0633\u062a\u062e\u0637\u060c \u0645\u062a\u0646\u060c \u06cc\u0627 \u0688\u0627\u06a9 \u0679\u06a9\u0679 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0635\u062d\u06cc\u062d \u0637\u0648\u0631 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_62_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"    \u0645\u06a9\u0645\u0644 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0627 \u0627\u06cc\u06a9 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u062c\u0633 \u0645\u06cc\u06ba \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0644\u0627\u06af\u0648 \u062f\u0633\u062a\u062e\u0637 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"704\" height=\"547\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-step-10-rename-and-download\">\u0645\u0631\u062d\u0644\u06c1 10: \u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0641\u0627\u0626\u0646\u0644 \u0633\u06cc\u06a9\u0634\u0646 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0622\u0624\u0679 \u067e\u0679 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0635\u0641\u062d\u0627\u062a \u06a9\u06cc \u06a9\u0644 \u062a\u0639\u062f\u0627\u062f \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba <strong>\u0688\u0627\u0624\u0646 \u0644\u0648\u0688<\/strong> \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784694047_143_\u062c\u0627\u0648\u0627-\u0627\u0633\u06a9\u0631\u067e\u0679-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0628\u0631\u0627\u0624\u0632\u0631-\u067e\u0631-\u0645\u0628\u0646\u06cc-\u067e\u06cc.png\" alt=\"\u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645\u060c \u0635\u0641\u062d\u0627\u062a \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f\u060c \u0641\u0627\u0626\u0644 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0628\u0679\u0646 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u062a\u0645\u06cc PDF \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0633\u06cc\u06a9\u0634\u0646\u06d4\" style=\"display:block;margin:0 auto\" width=\"355\" height=\"280\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0622\u0628 \u0648 \u06c1\u0648\u0627\u060c <strong>\u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba<\/strong> \u0633\u06cc\u0634\u0646 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e \u0644\u0648\u0688 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u067e\u0631 \u0648\u0627\u067e\u0633 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-handling-signature-transparency\">\u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u0627<\/h2>\n<p>\u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637 \u0627\u06a9\u062b\u0631 \u0627\u0633 \u0648\u0642\u062a \u0628\u06c1\u062a\u0631\u06cc\u0646 \u062f\u06cc\u06a9\u06be\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u067e\u0633 \u0645\u0646\u0638\u0631 \u0634\u0641\u0627\u0641 \u06c1\u0648\u06d4<\/p>\n<p>\u0634\u0641\u0627\u0641 PNGs \u0645\u06cc\u06ba \u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u0635\u0631\u0641 \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0633\u0679\u0631\u0648\u06a9 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0627\u0635\u0644 PDF \u0645\u0648\u0627\u062f \u062f\u0633\u062a\u062e\u0637 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u06d2 \u0645\u0642\u0627\u0628\u0644\u06d2 \u0645\u06cc\u06ba\u060c JPEG \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u06cc\u06ba \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0679\u06be\u0648\u0633 \u0631\u0646\u06af \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0633\u0641\u06cc\u062f \u06a9\u0627\u063a\u0630 \u0633\u06d2 \u0627\u0633\u06a9\u06cc\u0646 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u060c \u062a\u0648 \u0627\u0633\u06d2 \u0631\u0646\u06af\u06cc\u0646 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u06cc\u0631\u06cc\u0627 \u067e\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u0627\u06cc\u06a9 \u0646\u0645\u0627\u06cc\u0627\u06ba \u0633\u0641\u06cc\u062f \u0645\u0633\u062a\u0637\u06cc\u0644 \u0628\u0646 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0644\u06c1\u0630\u0627\u060c \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0634\u0641\u0627\u0641 PNG \u0641\u0627\u0626\u0644\u06cc\u06ba \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0628\u06c1\u062a\u0631 \u0622\u067e\u0634\u0646 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06cc\u0627 \u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u067e\u0631 \u0628\u06be\u06cc \u06cc\u06c1\u06cc \u0627\u0635\u0648\u0644 \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 PNG \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a\u060c \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u0631\u0646\u06af \u0633\u06d2 \u0646\u06c1 \u0628\u06be\u0631\u06cc\u06ba \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0622\u067e \u06a9\u0648 \u062c\u0627\u0646 \u0628\u0648\u062c\u06be \u06a9\u0631 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1 \u06c1\u0648\u06d4<\/p>\n<pre><code class=\"language-javascript\">const signatureImage =\n    signatureCanvas.toDataURL(\n        \"image\/png\"\n    );\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0634\u0641\u0627\u0641 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u067e\u0646\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba \u0627\u06cc\u0645\u0628\u06cc\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-important-notes-and-common-mistakes\">\u0627\u06c1\u0645 \u0646\u0648\u0679\u0633 \u0627\u0648\u0631 \u0639\u0627\u0645 \u063a\u0644\u0637\u06cc\u0627\u06ba<\/h2>\n<p>\u0627\u06cc\u06a9 \u0639\u0627\u0645 \u063a\u0644\u0637\u06cc \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0627\u0648\u0631 \u0627\u0635\u0644 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0627\u06cc\u06a9 \u06c1\u06cc \u0646\u0642\u0627\u0637 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062d\u062a\u0645\u06cc \u0639\u0646\u0635\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u0645\u06cc\u0634\u06c1 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u06c1\u062f\u0641 \u06a9\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0639\u0644\u0642 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">const scaleX =\n    pdfWidth \/\n    pdfCanvas.width;\n\nconst scaleY =\n    pdfHeight \/\n    pdfCanvas.height;\n<\/code><\/pre>\n<p>\u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0645\u0633\u0626\u0644\u06c1 \u067e\u06cc\u062f\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 A4 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062f\u0631\u0633\u062a \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0648\u0627\u0644\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u0632\u0645\u06cc\u0646 \u06a9\u06cc \u062a\u0632\u0626\u06cc\u0646 \u06a9\u06d2 \u0635\u0641\u062d\u06d2 \u067e\u0631 \u06cc\u0627 \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u0628\u0635\u0631\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u062f\u0633\u062a\u062e\u0637\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u06cc \u0628\u06be\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const allowedTypes = [\n    \"image\/png\",\n    \"image\/jpeg\"\n];\n\nif (\n    !allowedTypes.includes(\n        file.type\n    )\n) {\n\n    alert(\n        \"Please upload a PNG or JPEG image.\"\n    );\n\n    return;\n\n}\n<\/code><\/pre>\n<p>\u062d\u062a\u0645\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0632 \u06a9\u0648 \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u0691\u06be\u0627\u0646\u06d2 \u0633\u06d2 \u0628\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0628\u06c1\u062a \u0628\u0691\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0646 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<p>\u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0645\u06a9\u0645\u0644 \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0627 \u0628\u06be\u06cc \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u06af\u06be\u0645\u0627\u0624\u060c \u0627\u0633\u06a9\u06cc\u0644\u0646\u06af\u060c \u06cc\u0627 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u062a\u0631\u062c\u0645\u06d2 \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u062d\u062a\u0645\u06cc \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0645\u06cc\u06ba \u0634\u0646\u0627\u062e\u062a \u06a9\u0631\u0646\u0627 \u0627\u0633 \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0641\u0627\u0626\u0644 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0634\u06cc\u0626\u0631 \u06a9\u0631 \u062f\u06cc \u06af\u0626\u06cc \u06c1\u0648\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0627\u0633 \u0645\u0646\u0635\u0648\u0628\u06d2 <strong>\u0628\u0635\u0631\u06cc \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646\u06a9 \u062f\u0633\u062a\u062e\u0637<\/strong> \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0645\u06cc\u06ba\u06d4 \u06c1\u0645 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u067e\u0631 \u0645\u0628\u0646\u06cc \u06a9\u0631\u067e\u0679\u0648\u06af\u0631\u0627\u0641\u06a9 \u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637 \u062a\u06cc\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0634\u0646\u0627\u062e\u062a \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u0641\u0631\u0627\u06c1\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0646\u06d2 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0645\u0628\u0646\u06cc \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646\u0646\u06af \u0679\u0648\u0644 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u0646\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0627\u067e \u0644\u0648\u0688 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u0633\u06cc\u06a9\u06be\u0627\u060c \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0679 \u06a9\u0631\u0646\u0627\u060c \u062a\u0635\u0648\u06cc\u0631 \u06a9\u06be\u06cc\u0646\u0686\u0646\u0627\u060c \u0679\u0627\u0626\u067e \u06cc\u0627 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u062f\u0633\u062a\u062e\u0637 \u0628\u0646\u0627\u0646\u0627\u060c \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0633\u06cc\u0679 \u0627\u0633\u0679\u0627\u0645\u067e \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627\u060c \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u0638\u0627\u06c1\u0631\u06cc \u0634\u06a9\u0644 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u0646\u0627\u060c \u06c1\u062f\u0641 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u0627\u060c \u0627\u0648\u0631 PDF-lib \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0628\u0646\u0627\u0646\u0627\u06d4<\/p>\n<p>\u0622\u067e \u0646\u06d2 \u06cc\u06c1 \u0628\u06be\u06cc \u0633\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0646\u0642\u0627\u0637 \u06a9\u0648 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0645\u06cc\u06ba \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u062f\u0633\u062a\u062e\u0637 \u06a9\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u06cc\u0648\u06ba \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u062d\u062a\u0645\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u062a\u06cc\u0627\u0631 \u0634\u062f\u06c1 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2\u060c \u0622\u0624\u0679 \u067e\u0679 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2\u060c \u0635\u0641\u062d\u06c1 \u06a9\u06cc \u06af\u0646\u062a\u06cc \u0627\u0648\u0631 \u0633\u0627\u0626\u0632 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0628\u0631\u0627\u0624\u0632\u0631 \u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06c1\u0645\u0627\u0631\u06d2 \u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u0633\u0627\u0626\u0646\u0646\u06af \u0679\u0648\u0644 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0648\u0631\u06d2 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u0627\u067e\u0646\u06d2 \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679\u0633 \u06a9\u0648 \u0641\u06cc \u0635\u0641\u062d\u06c1 \u0645\u062a\u0639\u062f\u062f \u0639\u0646\u0627\u0635\u0631\u060c \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u062f\u0633\u062a\u062e\u0637\u06cc \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u0632\u060c \u062a\u0627\u0631\u06cc\u062e \u06a9\u06d2 \u0642\u0637\u0639\u0627\u062a\u060c \u0627\u0628\u062a\u062f\u0627\u0626\u06cc\u06c1\u060c \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0641\u0648\u0646\u0679\u0633\u060c \u062d\u062a\u0645\u06cc \u0634\u06a9\u0644 \u062f\u06cc\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2\u060c \u06cc\u0627 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0688\u06cc\u062c\u06cc\u0679\u0644 \u062f\u0633\u062a\u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0633\u0631\u0634\u0627\u0631 \u062f\u0633\u062a\u062e\u0637\u06cc \u0627\u0646\u0641\u0631\u0627\u0633\u0679\u0631\u06a9\u0686\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0632\u06cc\u062f \u0628\u0691\u06be\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u067e\u06cc \u0688\u06cc \u0627\u06cc\u0641 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0639\u0627\u06c1\u062f\u0648\u06ba\u060c \u0641\u0627\u0631\u0645\u0648\u06ba\u060c \u0645\u0646\u0638\u0648\u0631\u06cc\u0648\u06ba\u060c \u0631\u0633\u06cc\u062f\u0648\u06ba\u060c \u0631\u067e\u0648\u0631\u0679\u0633\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0648 \u0634\u06cc\u0626\u0631 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06cc\u0627 \u0627\u0636\u0627\u0641\u06cc \u0645\u062a\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u067e\u0691 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4 \u0631\u0648\u0627\u06cc\u062a\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0645\u06cc\u06ba \u0627\u06a9\u062b\u0631 \u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u067e\u0631\u0646\u0679 \u06a9\u0631\u0646\u0627\u060c \u0630\u0627\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633 \u067e\u0631 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0631\u0646\u0627\u060c \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":27082,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/27081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/comments?post=27081"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/27081\/revisions"}],"predecessor-version":[{"id":27083,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/27081\/revisions\/27083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media\/27082"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media?parent=27081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/categories?post=27081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/tags?post=27081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}