无法将base64绘制到canvas

Question

我正面临显示已上传的个人资料照片的问题。我使用picedit.js lib上传ui。上传个人资料照片即可。但问题是，当我想显示上传的个人资料图片时，它不能。我从服务器获得了base64 img并将其绘制到画布中。没有例外，也看不到个人资料照片。如果我手动分配image.src并在另一个画布上绘制（而不是使用picedit的画布）。 picedit.js lib是否有问题。

这是我的controller.js

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var image = new Image();

image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = $scope.user.profilePic;

这是我的页面

<div style="margin: 10% auto 0 auto; display: table;">
    <!-- begin_picedit_box -->
    <div class="picedit_box">
        <!-- Placeholder for messaging -->
        <div class="picedit_message">
            <span class="picedit_control ico-picedit-close"
                data-action="hide_messagebox"></span>
            <div></div>
        </div>
        <!-- Picedit navigation -->
        <div class="picedit_nav_box picedit_gray_gradient">
            <div class="picedit_pos_elements"></div>
            <div class="picedit_nav_elements">


                <!-- Picedit button element end -->
                <!-- Picedit button element begin -->
                <div class="picedit_element">
                    <span
                        class="picedit_control picedit_action ico-picedit-insertpicture"
                        title="Crop" data-action="crop_open"></span>
                </div>
                <!-- Picedit button element end -->
                <!-- Picedit button element begin -->
                <div class="picedit_element">
                    <span class="picedit_control picedit_action ico-picedit-redo"
                        title="Rotate"></span>
                    <div class="picedit_control_menu">
                        <div
                            class="picedit_control_menu_container picedit_tooltip picedit_elm_1">
                            <label> <span>90° CW</span> <span
                                class="picedit_control picedit_action ico-picedit-redo"
                                data-action="rotate_cw"></span>
                            </label> <label> <span>90° CCW</span> <span
                                class="picedit_control picedit_action ico-picedit-undo"
                                data-action="rotate_ccw"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- Picedit button element end -->
                <!-- Picedit button element begin -->
                <div class="picedit_element">
                    <span
                        class="picedit_control picedit_action ico-picedit-arrow-maximise"
                        title="Resize"></span>
                    <div class="picedit_control_menu">
                        <div
                            class="picedit_control_menu_container picedit_tooltip picedit_elm_2">
                            <label> <span
                                class="picedit_control picedit_action ico-picedit-checkmark"
                                data-action="resize_image"></span> <span
                                class="picedit_control picedit_action ico-picedit-close"
                                data-action=""></span>
                            </label> <label> <span>Width (px)</span> <input type="text"
                                class="picedit_input" data-variable="resize_width"
                                value="0">
                            </label> <label class="picedit_nomargin"> <span
                                class="picedit_control ico-picedit-link"
                                data-action="toggle_button"
                                data-variable="resize_proportions"></span>
                            </label> <label> <span>Height (px)</span> <input
                                type="text" class="picedit_input"
                                data-variable="resize_height" value="0">
                            </label>
                        </div>
                    </div>
                </div>
                <!-- Picedit button element end -->
            </div>
        </div>
        <!-- Picedit canvas element -->
        <div class="picedit_canvas_box">
            <div class="picedit_painter" >
                <canvas id="mycanvasweb"></canvas>
            </div>
            <div class="picedit_canvas">
                <canvas id="mycanvas"></canvas>
            </div>
            <div class="picedit_action_btns active">
                <div class="picedit_control ico-picedit-picture"
                    data-action="load_image"></div>
                <div class="picedit_control ico-picedit-camera"
                    data-action="camera_open"></div>
                <div class="center">or copy/paste image here</div>
            </div>

        </div>
        <!-- Picedit Video Box -->
        <div class="picedit_video">
            <video autoplay></video>
            <div class="picedit_video_controls">
                <span
                    class="picedit_control picedit_action ico-picedit-checkmark"
                    data-action="take_photo"></span> <span
                    class="picedit_control picedit_action ico-picedit-close"
                    data-action="camera_close"></span>
            </div>
        </div>
        <!-- Picedit draggable and resizeable div to outline cropping boundaries -->
        <div class="picedit_drag_resize">
            <div class="picedit_drag_resize_canvas"></div>
            <div class="picedit_drag_resize_box">
                <div class="picedit_drag_resize_box_corner_wrap">
                    <div class="picedit_drag_resize_box_corner"></div>
                </div>
                <div class="picedit_drag_resize_box_elements">
                    <span
                        class="picedit_control picedit_action ico-picedit-checkmark"
                        data-action="crop_image"></span> <span
                        class="picedit_control picedit_action ico-picedit-close"
                        data-action="crop_close"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- end_picedit_box -->
</div>

当我手动将base64分配给image.src时，如image.src =“base64 .....”，并添加到mycanvas1，就可以了。

<div>
    <canvas id="mycanvas1"></canvas>
</div>

但mycanvas和mycanvasweb没什么问题。帮助我，我是棱角分明的新人。