تعليق: تحتاج إلى استخدام جزء من صفحة الويب كنص رئيسي ، وتحويل صفحة الويب الأصلية إلى PDF كمرفق ، وإرسال بريد إلكتروني إلى الرئيس ، وتحويل SVG إلى قماش لعرضه ، ولكن في وقت لاحق ، لا يمكن أن تعرضها قماشًا بشكل طبيعي ، لذلك في النهاية ، يجب عليك تحويل علامة قماش إلى نموذج الصورة مرة أخرى مرة أخرى
في الآونة الأخيرة ، هناك حاجة إلى وضع جزء من محتوى صفحة الويب في النص الرئيسي ، وتحويل صفحة الويب الأصلية إلى PDF كمرفق ، وإرسال بريد إلكتروني إلى الرئيس. نظرًا لأننا موقع ويب من نوع التقرير ، في HTML5 ، فإن تطوير التحكم ليس أكثر من قماش أو SVG. لدينا هنا العديد من عناصر التحكم التي تستخدم SVG ، ولا يمكن عرض SVG بشكل طبيعي في هيئة البريد الإلكتروني لـ Foxmail ، لذلك فكرنا في تحويل SVG إلى قماش لعرضه ، ولكن في وقت لاحق وجدنا أنه لا يمكن عرض القماش بشكل طبيعي. في النهاية ، لم يكن لدينا خيار سوى تحويل علامة القماش إلى تنسيق الصورة مرة أخرى ، والتي حلت هذه المشكلة أخيرًا. دعنا نقدم بإيجاز عملية التنفيذ أدناه. فيما يلي علامة SVG<viv>
<svg> </svg>
</div>
أولاً ، تحتاج إلى الحصول على علامة SVG والمحتوى:
var svghtml = svgContainer.innerhtml () ؛
يتطلب تحويل SVG إلى Canvas canvg plugin google. يمكنك تنزيله على موقع الويب الرسمي أو الرجوع إليه مباشرة عن بُعد.
بعد ذلك ، استدعاء طريقة canvg (canvasid ، svghtml) للمكون الإضافي لتحويله إلى قماش. المعلمة الأولى من هذه الطريقة هي معرف علامة القماش ، والثاني هو محتوى علامة SVG بشكل طبيعي. وبهذه الطريقة ، يتم تحويل SVG إلى قماش
ثم قم بتحويل قماش إلى صور ، وهو أمر أسهل
var imgsrc = document.getElementById (canvasid) .Todataurl (Image/PNG) ؛ // هذا يتم تحويل القماش إلى صورة وإرجاع جميع بيانات محتوى الصورة ، على النحو التالي لعرض الصورة:
<img src = imgsrc />
هذه هي كيفية تنفيذها من صورة svg-> canvas->. لا يزال هذا مفيدًا جدًا لأن المتصفحات المختلفة تدعم SVG و Canvas مختلفة. وبهذه الطريقة ، ستتمكن ضوابطنا على الأقل من عرضها بشكل صحيح ، حتى لو كان بإمكاننا استخدام الصور في النهاية فقط.