تصدير صور قماش HTML5 وتحميل وظائف الخادم

تصدير صور HTML5 Canvas وتحميلها إلى الخادم

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

ولذلك، قد تكون الطريقة التالية هي ما تحتاجه ~

1. استخدم طريقة toDataURL() لتصدير صورة اللوحة القماشية والحصول على بيانات base64.

2. قم بتغليف بيانات base64 في كائنات blob

3. تجميع بيانات النموذج

4. تحميل اياكس

بالطبع، تتطلب عملية التحميل تعاونًا من جانب الخادم، مثل تعيين النطاقات المشتركة، مثل الحقول المتفق عليها. . .

عرض توضيحي بسيط:

 function HandleSave () { // تصدير بيانات الصورة بتنسيق base64 var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); // تغليف كائن blob var blob = dataURItoBlob(base64Data); // تجميع بيانات النموذج var fd = new FormData(); blob); // يتم تخصيص بيانات الملف fd.append(fileName, 123jpg); // يتم تخصيص اسم الملف، ويتم إنشاء الاسم بشكل عشوائي أو ترميزه، اعتمادًا على المتطلبات // تحميل ajax، وشكل ajax تعسفي، و لا توجد مشكلة في كتابة JQ // تجدر الإشارة إلى أنه يجب ضبط الخادم للسماح بالطلبات عبر المجال. لا تختلف طريقة تلقي البيانات عن الملف الذي تم تحميله بواسطة <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST، عنوان url الذي أرسلته لطلب التحميل)؛ localStorage.token);// قم بتعيين رأس الطلب، قم بتعيينه حسب الحاجة، اختياري xmlHttp.send(fd); //ajax callback xmlHttp.onreadystatechange = () => { // todo your code... }; (base64Data) { var byteString if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(' ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString. length); i < byteString. length; i++) { ia[i] = byteString.charCodeAt(i) } إرجاع Blob جديد([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } return new Uint8Array(img_buffer);}var b64Image = Canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = new XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

باستخدام الطريقة المذكورة أعلاه، تتم معالجتها من خلال js على الواجهة الأمامية، ولا يلزم إجراء معالجة إضافية من جانب الخادم.

أعتقد أن هذه هي الطريقة الأكثر ملاءمة ومباشرة، ومع ذلك، هناك العديد من الردود عالية الإعجاب وتتطلب معالجة مختلفة من قبل الخادم، وهو أمر غير مستحسن.

اضطررت إلى تحويل صورة قماشية مشفرة بـ Base64 إلى Uint8Array Blob .

المرجع: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

ما ورد أعلاه هو وظيفة تصدير صور HTML5 Canvas وتحميلها إلى الخادم الذي قدمه المحرر، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!

إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!