Saya memiliki plugin TinyMCE yang menghasilkan gambar PNG menggunakan HTMLCanvasElement.toDataURL()( MDN ). Saat ini, saya hanya menampilkannya di backend dengan meletakkan data-URI dalam tag gambar, tetapi saya benar-benar ingin menambahkan ini ke WordPress Media Library.
Apa cara terbaik (yaitu, yang memenuhi persyaratan VIP) untuk mengunggah gambar yang saat ini diserialkan sebagai data-URI berbasis kode 64?
Inilah fungsi unggahan saya sejauh ini:
<?php
/**
* AJAX callback that inserts chart as attachment into the WP database
*/
public static function insert_axis_attachment() {
// Get config
$axis_config = json_decode( $_POST['axisConfig'] );
if ( ! isset( $_POST['axisJS_nonce'] )
|| ! wp_verify_nonce( $_POST['axisJS_nonce'] )
|| ! current_user_can( 'upload_files' )
|| ! current_user_can( 'edit_post', $_POST['post_id'] )
|| ( isset( $axis_config->ID ) && ! current_user_can( 'edit_post', $axis_config->ID ) )
) {
return false;
}
// Begin saving PNG to filesystem
if ( false === ( $creds = request_filesystem_credentials( 'admin-ajax.php', '', false, false, null ) ) ) {
return false; // stop processing here
}
if ( ! WP_Filesystem( $creds ) ) {
request_filesystem_credentials( 'admin-ajax.php', '', true, false, null );
return false;
}
global $wp_filesystem;
$upload_dir = wp_upload_dir();
$chart_filename = sanitize_title_with_dashes( $axis_config->chartTitle ) . '_' . time() . '.png';
$filename = trailingslashit( $upload_dir['path'] ) . $chart_filename;
$uriPhp = 'data://' . substr( $_POST['axisChart'], 5 ); // Via http://stackoverflow.com/questions/6735414/php-data-uri-to-file/6735458#6735458
$binary = wpcom_vip_file_get_contents( $uriPhp );
$wp_filesystem->put_contents(
$filename,
$binary,
FS_CHMOD_FILE // predefined mode settings for WP files
);
// Insert or update attachment.
if ( ! $axis_config->ID ) {
$attachment = array(
'guid' => $upload_dir['url'] . '/' . basename( $filename ),
'post_title' => $axis_config->chartTitle,
'post_content' => '', // Must be empty string
'post_status' => 'published',
'post_mime_type' => 'image/png',
'post_status' => 'inherit',
);
$attach_id = wp_insert_attachment( $attachment, $filename, $_POST['post_id'] );
// Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
require_once( ABSPATH . 'wp-admin/includes/image.php' );
// Generate the metadata for the attachment, and update the database record.
$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
wp_update_attachment_metadata( $attach_id, $attach_data );
update_post_meta( $attach_id, '_axisWP', $axis_config );
echo esc_attr( $attach_id );
die();
} else {
update_attached_file( $axis_config->ID, $filename );
update_post_meta( $axis_config->ID, '_axisWP', $axis_config );
echo esc_attr( $axis_config->ID );
die();
}
}
Apakah cara saya menggunakan WP_Filesystemdan wp_insert_attachment()memperbaiki? Atau haruskah saya menemukan cara untuk menggunakannya media_handle_upload()?
Terima kasih!
plugin-development
ajax
uploads
media
aendrew
sumber
sumber
media_handle_upload()memerlukan id posting, dan "teman" -nyawp_handle_upload()memerlukan file di dalam$_FILESarray, jadi saya pikir mereka tidak sesuai dengan kebutuhan Anda. IMHO Anda dapat menggunakan pendekatan Anda saat ini, mungkin saya telah menggunakanwp_upload_bitsdaripada berurusan dengan sistem file WP. Selain itu,wpcom_vip_file_get_contentsbuat kode Anda hanya tersedia dalam kontes VIP, jika Anda membutuhkan pendekatan yang lebih umum, standarfile_get_contentsharus baik-baik saja, dan jika Anda perlu cache, maka transien harus melakukan trik.wp_upload_bits- itu sangat membantu. Terima kasih!Jawaban:
Dalam plugin tinymce sebelumnya yang saya buat - saya mengatur transport ajax khusus sehingga saya bisa menggunakan gumpalan langsung dari src gambar img jarak jauh daripada base64 pada atribut data, dan kemudian menggunakan REST API untuk mengunggah gambar ke perpustakaan media di js.
Base64 akan menjadi sekitar 35% lebih besar dari gumpalan, jadi jika ada banyak grafik atau unggahan, ini akan membantu mengurangi bandwidth unggahan sedikit, bahkan dengan hanya satu img, kinerja harus dipertimbangkan karena banyak pengguna cenderung memiliki satu ton plugin terpasang. Anda mungkin sudah tahu bagaimana sumber daya intensif hanya editor dan tinymce bisa di tempat pertama.
Plus, secara keseluruhan saya benci keluar dari JS ke PHP ketika itu tidak 100% diperlukan: P
Karena Anda sudah memiliki set data di base64 - Anda dapat menggunakan konverter sederhana - ada banyak di luar sana saya baru saja menyalin dan menempel yang saya temukan untuk contoh di bawah ini. https://www.npmjs.com/package/base64toblob berfungsi dengan baik jika Anda menginginkan sesuatu yang cepat diintegrasikan ke dalam bangunan Anda.
Berikut adalah contoh kerja cepat menggunakan data base64 gambar placeholder, saya hanya melemparkannya dalam tema untuk pengujian, tetapi Anda dapat menggunakannya di mana pun Anda inginkan:
theme / functions.php:
theme / js / js-plugin-name.js:
File akan bertambah -1, -2 secara otomatis seperti biasa sehingga Anda tidak menimpa barang yadda yadda, dan respons akan berisi objek media dengan apa pun yang Anda butuhkan.
beberapa params berguna sebagai tanggapan:
Jika Anda mengonversi ke base64 maka Anda juga bisa menulis transport jquery ajax khusus dan ambil img src dan lompati melakukan semua decode base64 ke blob stuff juga, dan itu akan membantu kinerja hit dari pengkodean hanya untuk memecahkan kode dll.
EDIT:
Saya lupa menyebutkan: REST API tersedia untuk semua situs vip, jadi ini tidak masalah. Saya berasumsi Anda membuat grafik di editor tinymce di bagian belakang - jadi pengguna sudah diautentikasi. Contoh di atas adalah hanya mengirimkan titik masuk melalui header dalam permintaan ajax, yang merupakan persyaratan untuk keamanan di vip.
Anda dapat merujuk ke dokumentasi untuk kepatuhan di sini: https://vip.wordpress.com/documentation/api/
Juga saya tidak melihat Anda menggunakan HTMLCanvasElement.toDataURL ()! - Anda dapat melewati decoding dari b64 dan mendapatkan gumpalan secara langsung karena Anda tidak mengambil gambar dari jarak jauh dan mencoba menambahkannya dan menggunakan HTMLCanvasElement.toBlob () ( MDN )
sumber