javascript替换drawingBoard.js中的背景图像

Question

我需要使用leimi drawingboard.js更改画布内的背景图片，但我不知道如何制作它。 我需要显示不同的图像，以便用户可以选择他们将要工作的图像

这是我的表格：

<div id="container">
    <div class="example" data-example="1"> // THIS DIV IS THE CANVAS
        <div class="board" id="default-board"></div> //THIS ID HAVE A IMAGE AND THE CONTROLLERS
    </div>
    <form class="drawing-form" method="post" name="diagram" id="diagram" enctype="multipart/form-data">
        <div id="board"></div>
        <input type="hidden" name="image" value="">
        <input type="hidden" name="idPac" value="<?php echo $id_paciente; ?>" />
        <input type="hidden" name="idDoc" value="<?php echo $user_id; ?>" />
        <br><hr>
        <button class="btn btn-info" id="btnUpload"><?php $translate->__('Save Diagram'); ?></button>
    </form>
    <div id="ldiag" style="display:none;"><img src="images/loading4.gif" /></div>
</div>

javascript代码是：

<script src="js/drawingboard.min.js"></script>
        <script data-example="1">
            var defaultBoard = new DrawingBoard.Board("default-board", {
                background: "imagenes/canvas/cara.jpg", //THIS IS THE IMAGE I NEED TO CHANGE FOR OTHERS IF NEEDED, EXAMPLE  /pie.png, /cuerpo.png
                droppable: true,
                webStorage: false,
                enlargeYourContainer: true,
                addToBoard: true,
                stretchImg: false
            });
            defaultBoard.addControl("Download");
            $(".drawing-form").on("submit", function(e) {
                var img = defaultBoard.getImg();
                var imgInput = (defaultBoard.blankCanvas == img) ? "" : img;
                $(this).find("input[name=image]").val( imgInput );
                defaultBoard.clearWebStorage();
            });
            $(function() {
                $("#file-input").change(function(e) {
                    var file = e.target.files[0],
                    imageType = /image.*/;
                    if (!file.type.match(imageType))
                    return;
                    var reader = new FileReader();
                    reader.onload = fileOnload;
                    reader.readAsDataURL(file);        
                });
                function fileOnload(e) {
                    var $img = $("<img>", { src: e.target.result });
                    var canvas = $("#default-board")[0];
                    var context = canvas.getContext("2d");
                    $img.load(function() {
                        context.drawImage(this, 0, 0);
                    });
                }
            });
        </script>
        <script src="js/yepnope.js"></script>
        <script>
            var iHasRangeInput = function() {
                var inputElem  = document.createElement("input"),
                    smile = ":)",
                    docElement = document.documentElement,
                    inputElemType = "range",
                    available;
                inputElem.setAttribute("type", inputElemType);
                available = inputElem.type !== "text";
                inputElem.value         = smile;
                inputElem.style.cssText = "position:absolute;visibility:hidden;";
                if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {
                    docElement.appendChild(inputElem);
                    defaultView = document.defaultView;
                    available = defaultView.getComputedStyle &&
                        defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== "textfield" &&
                        (inputElem.offsetHeight !== 0);
                    docElement.removeChild(inputElem);
                }
                return !!available;
            };

            yepnope({
                test : iHasRangeInput(),
                nope : ["css/fd-slider.min.css", "js/fd-slider.min.js"],
                callback: function(id, testResult) {
                    if("fdSlider" in window && typeof (fdSlider.onDomReady) != "undefined") {
                        try { fdSlider.onDomReady(); } catch(err) {}
                    }
                }
            });
        </script>