在 Drupal 7 Forms API 中覆盖表单控件

Question

我的页面中有三个表单控件：字段集、项目类型和托管文件。

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;  
}