file-upload - Drupal 7 Forms API でフォーム コントロールを上書きする

Question

ページに 3 つのフォーム コントロールがあります。フィールドセット、アイテム タイプ、管理ファイルです。

function myid_user_page_form(){  
    $form = array();
    $form['id'] = array(
        '#type' => 'fieldset',
        '#title' => t('ID Information'),
        '#collapsible' => TRUE, 
        '#collapsed' => FALSE,
    );
    $form['id']['mymarkup'] = array(
        '#type' => 'item',
        '#markup' => 
            '<canvas id="cnv" name="cnv" width="500" height="100" style="border: 1px solid black;"></canvas>'
    );  
    $form['id']['custom_content_block_image'] = array(
        '#type' => 'managed_file',
        '#name' => 'custom_content_block_image',    
        '#size' => 40,      
        '#upload_location' => 'public://',
        '#theme' => 'myid_signature_upload',
    ); 
}

[ファイルを選択] ボタンをクリックして画像をアップロードすると、次のようになります。

最初のフォーム コントロールの場所/キャンバスの場所に画像を表示したい。どうすればいいですか？

これらは私のコードです：

/**
  * Implements myid_signature_upload theme callback.
  */

function theme_myid_signature_upload($variables) {    
    $element = $variables['element'];
    $output = '';  
    if($element['fid']['#value'] != 0) {    
        $output .= '<div class="multifield-thumbnail">';
        $output .= theme('image_style', array('style_name' => 'thumbnail',                   'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
        $output .= drupal_render_children($element);
        $output .= '</div>';
    }
    return $output;  
}
function myid_theme(){
    return array(    
        'myid_signature_upload' => array(
            'render element' => 'element',     
        ),
    ); 
}

Answer 1

theme_myid_signature_upload()アップロードされた画像表示をキャンバス マークアップでラップしてみてください。

function theme_myid_signature_upload($variables) {    
    $element = $variables['element'];
    $output = '';  
    if($element['fid']['#value'] != 0) {
        // open canvas tag <canvas ... >    
        $output .= '<canvas id="cnv" name="cnv" width="500" height="100" style="border: 1px solid black;">';
        $output .= theme('image_style', array('style_name' => 'thumbnail',                   
                   'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
        $output .= drupal_render_children($element);
        // close canvas tag </canvas>
        $output .= '</canvas>';
    }
    return $output;  
}