توفّرواجهة Clipboard
لواجهة برمجة التطبيقات Async Clipboard API إذنًا بقراءة محتوى حافظة النظام والكتابة فيه. يتيح هذا لتطبيق الويب تنفيذ ميزات
القص والنسخ واللصق. يمكنك لصق البيانات من الحافظة في تطبيق عن طريق استدعاء الطريقة read()
، ونسخ البيانات إلى الحافظة من خلال استدعاء الطريقة write()
.
بصرف النظر عن النص
والصور بتنسيق رسومات الشبكة المحمولة (PNG)
وملف HTML المصحَّح وغير المصحَّح
والتنسيقات المخصّصة على الويب،
أصبحت واجهة برمجة التطبيقات Async Clipboard API متوافقة أيضًا مع نسخ صور SVG ولصقها، ما يعني أنّه يمكنك في النهاية التفاعل مع برنامج تعديل الصور الذي يتعامل مع ملفات SVG (رسومات الرسومات الموجّهة التي يمكن تغيير حجمها
) بشكل طبيعي عن طريق نسخ ملفات SVG أو صورتها ولصقها في صور بدلاً من ذلك.
دعم الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) لرصد الميزات
اكتشاف توافق صور SVG (وأي نوع MIME آخر) من خلال طلب طريقة ClipboardItem.supports()
الثابتة وتمريرها إلى نوع MIME المطلوب
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
نسخ صورة SVG
انسخ صورة SVG من خلال تعبئة
ClipboardItem
كائن. الكائن الثنائي الكبير (blob) الذي يتضمن بيانات صورة SVG هو القيمة ونوع الكائن الثنائي الكبير
(أي 'image/svg+xml'
في هذه الحالة) كمفتاح له.
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
لصق صورة SVG
للصق صورة SVG، عليك قراءة ClipboardItem
من الحافظة، والحصول على النوع المطلوب (أي 'image/svg+xml'
في هذه الحالة) باستخدام الطريقة getType()
. يؤدي ذلك إلى عرض كائن ثنائي كبير (blob) يمكن تعيينه بعد تحويله إلى عنوان URL لملف blob يمكنك تعيينه إلى سمة src
لـ <img>
.
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
التنظيف
وSVG هو تنسيق فعّال يسمح مثلاً بالنصوص البرمجية المضمّنة. وقد يمثل ذلك خطرًا عندما يلصق المستخدم محتوى من مصادر غير معروفة، لذلك ينفِّذ المتصفح خطوة تعقيم. عند نسخ البيانات، تنشئ Async Clipboard API
مستند SVG منسّقًا بشكل جيد ثم تكتبه في الحافظة. عند لصق البيانات، يتم إنتاج جزء SVG تمت معالجته بدقة بواسطة المحلل اللغوي للجزء. لذلك، قبل عملية اللصق، لا تزال سمات معالج أحداث "onclick
" متوفّرة، ولكن تتم إزالتها بعد اللصق.
عرض توضيحي
يمكنك استكشاف نسخ ملفات SVG ولصقها في العرض التوضيحي في أداة Glitch. اطّلع على
رمز المصدر
لمعرفة طريقة عملها. تأكد من تجربة النقر على أي دائرة من الدوائر قبل
النسخ واللصق وبعده. بعد اللصق، تتم إزالة سمات معالج أحداث onclick
التي يُحتمل أن تكون خطيرة.
روابط ذات صلة
- برنامج الإنتاج الذي يستخدم هذه الميزة:
- إدخال ChromeStatus
- نية الشحن
- خطأ Chromium
- موضع معايير WebKit
- موضع معايير Mozilla
شكر وتقدير
وافق فريق Microsoft Edge على دعم SVG (واجهة برمجة تطبيقات Async Clipboard API في Chromium). تمت مراجعة هذه المشاركة بواسطة راشيل أندرو وأنوبام سنيغدها.