چطور با جاوا اسکریپت، یک svg را به صورت png دانلود کنیم؟

در یکی از پروژه‌ها نیاز بود تا کاربر بتواند یک تصویر svg را به صورت png دانلود کند (! نیازه دیگه چه میشه کرد!?)؛ با مقداری تحقیق و بررسی و ترکیب تعدادی کد با یکدیگر به این کد رسیدم:

روش کار کد به صورت خلاصه این است که ابتدا svg در یک متغیر ذخیره شده و سپس یک canvas نامرئی ساخته می‌شود؛ در ادامه تصویر svg درون canvas رسم شده و در نهایت با ترفندِ ساخت لینک مخفی و کلیک مصنوعی، تصویر برای کاربر دریافت می‌شود.

  • ابعاد canvas بر مبنای ابعاد svg تنظیم می‌شود. برای اینکه تصویر زیادی کوچک نباشد، عرض و ارتفاع تصویر در 5 ضرب شده است که می‌توانید آن را تغییر دهید.
  • برای اینکه پس‌زمینه تصویر نهایی نامرئی نباشد، ابتدا یک مستطیل سفید در ابعاد کل canvas رسم شده (
    ctx.fillRect) و سپس تصویر svg رسم می‌شود.

توسط

کارشناس مهندسی برق؛ علاقه‌مند به الکترونیک، برنامه‌نویسی، گرافیک و ایده‌پردازی.

مطالب دیگر:

دیدگاهتان را بنویسید

14 − سه =