كيف تنقذ رسم قماش؟

Question

لديّ تطبيق إقرار الأصابع هذا وأريد أن يحفظ المستخدمون ما يرسمونه ويعودون لاحقًا ويستمرون في الرسم.

ما هي الطريقة الخفيفة للقيام بذلك؟

Answer 1

طريقة واحدة يمكنك القيام بها هي:

احفظ محتويات القماش كصورة PNG مشفرة BASE64 عن طريق الاتصال canvas.todataurl () وتخزين السلسلة المشفرة في الصفحة التخزين المحلي.

عندما ترغب في استعادة اللوحة القماشية ، ستنشئ صورة ، وتعيين SRC لتكون القيمة المخزنة محليًا مسبقًا ثم رسم تلك الصورة على القماش.

هناك طرق أخرى ، مثل تسجيل جميع عمليات الرسم ، وتخزينها محليًا أو في جلسة خادم و "إعادة تشغيلها" عند زيارتها في الصفحة التالية.

Answer 2

زر حفظ HTML:

  <input type="button" id="save" value="Save to PNG"> 

ثم السيناريو:

  document.getElementById('save').onclick = function () {
    window.location = document.getElementById("canvas").toDataURL('image/png');
  };

بعد ذلك ، سيتعين عليك استخدام Drawimage's Canvases مع الصورة التي تم حفظها. كيف/حيث تقوم بحفظ الصورة (الخادم الخاص بك ، مجلد التنزيلات الخاص بهم) يعتمد على كيفية تحميلها مرة أخرى.

Answer 3

يمكنك استخدام النسيج JS. لديها طريقة تساعد في التسلسل إلى JSON ومن ثم يمكنك حفظ هذا JSON في DB.توثيق