Javascript 使用选定的背景保存画布

我正在使用canvas，现在我可以保存到DB中，我可以将背景图像更改为我从图像列表中选择的图像

我的问题是，当我试图用背景保存画布时，保存的图像只显示绘图，但图像背景不显示…有人能帮我吗

致以最良好的祝愿

代码如下：

    <script src="js/drawingboard.min.js"></script>
    <script data-example="1">
        var defaultBoard = new DrawingBoard.Board("default-board", {
            background: "#ffff",
            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) {}
                }
            }
        });
// with this code I can change the background
            $(document).ready(function () {
                $("#cambiocanvas > input").click(function () {
                    var img = $(this).attr("src");
                    $(".drawing-board-canvas").css("background", "url(" + img + ")");
                });
            });
        </script>

<script src="js/drawingboard.min.js"></script>
<script data-example="1">
    var defaultBoard = new DrawingBoard.Board("default-board", {
        background: "#ffff",
        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 canvas = $("#default-board")[0];
        var context = canvas.getContext("2d");
        var background = new Image;
        background.src = canvas.style.background.replace(/url\(/|\)/gi,"").trim();
        background.onload = function(){
            var $img = $("<img>", { src: e.target.result });
            $img.load(function() {
                 context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
                 context.drawImage(this, 0, 0);
            });
        }
    }
});

var defaultBoard=新建DrawingBoard.Board（“默认板”）{
背景：“ffff”，
真的，
网站存储：错误，
放大你的容器：对，
addToBoard：是的，
stretchImg:错
});
defaultBoard.addControl（“下载”）；
$（“.drawing form”）。在（提交）功能（e）上{
var img=defaultBoard.getImg（）；
var imgInput=（defaultBoard.blankCanvas==img）？“”：img；
$（this.find（“input[name=image]”）val（imgInput）；
defaultBoard.clearWebStorage（）；
});
$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
变量$img=$（“
var iHasRangeInput=函数（）{
var inputElem=document.createElement（“输入”），
微笑=“：）”，
docElement=document.documentElement，
inputElemType=“范围”，
可用的；
setAttribute（“类型”，inputElemType）；
可用=inputElem.type！=“文本”；
inputElem.value=微笑；
inputElem.style.cssText=“位置：绝对；可见性：隐藏；”；
if（/^range$/.test（inputElemType）&&inputElem.style.WebkitAppearance！==未定义）{
docElement.appendChild（inputElem）；
defaultView=document.defaultView；
available=defaultView.getComputedStyle&&
defaultView.getComputedStyle（inputElem，null）.WebkitAppearance！==“textfield”&&
（inputElem.offsetHeight！==0）；
docElement.removeChild（inputElem）；
}
返回！！可用；
};
耶普诺普({
测试：iHasRangeInput（），
否：[“css/fd slider.min.css”，“js/fd slider.min.js”]，
回调：函数（id，testResult）{
如果窗口中的（“fdSlider”&&typeof（fdSlider.onDomReady）！=“未定义”）{
尝试{fdSlider.onDomReady（）；}catch（err）{
}
}
});
//有了这段代码，我可以改变背景
$（文档）.ready（函数（）{
$（“#cambiocanvas>input”）。单击（函数（）{
var img=$（this.attr（“src”）；
$（“.drawing board canvas”）.css（“背景”、“url”（+img+））；
});
});

以下是带有图像的表格：

<div class="tab-pane" id="derm">
    <div class="row-fluid sortable">
        <div class="box span3">
            <section id="cambiocanvas">
                <input id="yellowcanvas" class="canvasborder" type="image" src="http://2.imimg.com/data2/MB/BH/MY-651900/23-250x250.jpg">
                <input id="bluecanvas" class="canvasborder" type="image" src="http://jsfiddle.net/img/logo.png">
                <input id="greencanvas" class="canvasborder" type="image" src="https://www.gravatar.com/avatar/86364f16634c5ecbb25bea33dd9819da?s=128&d=identicon&r=PG&f=1">
            </section>
        </div>
    <div class="box span9">
    <div class="box-header well" data-original-title>
        <h2><i class="icon-tasks"></i> </h2>
        <div class="box-icon">
            <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
            <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
        </div>
    </div>
    <div class="box-content">
        <div id="container">
            <div class="example" data-example="1">
                <div class="board" id="default-board"></div>
            </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="id_user" value="<?php echo $id" />
<br><hr>
                <button class="btn btn-info" id="btnUpload">Save</button>
            </form>
            <div id="ldiag" style="display:none;"><img src="images/loading4.gif" /></div>
            <div class="progress1"></div>
            <div id="diaga"></div>
        </div>
    </div>
</div>

画布元素的背景（图像）不是画布内容的一部分，因此不会保存

如果无法重新绘制画布，则解决方案

如果需要背景，只需在保存之前将其渲染到画布上，然后使用复合操作“destination over”，它将仅在画布透明或半透明的位置添加像素，并且您将看到背景元素

ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(backgroundImage,0,0);
ctx.globalCompositeOperation = "source-over";  // restore default

加载画布CSS背景图像

var background = new Image;
background.src = canvas.style.background.replace(/url\(/|\)/gi,"").trim();
// wait till it has loaded.

您可能需要拉伸图像

ctx.drawImage(background,0,0,ctx.canvas.width,ctx.canvas.height);

替代解决方案使用屏幕外画布，首先绘制背景，然后绘制原始画布

// ensure that the image has loaded before running this code.
// canvas is the original canvas that you want to add the background to
// ctx is the origin canvas context
var can2 = document.createElement("canvas");
can2.width = canvas.width;
can2.height = canvas.height;
var ctx2 = can2.getContext("2d");
ctx2.drawImage(background,0,0,ctx.canvas.width,ctx.canvas.height);
ctx2.drawImage(canvas,0,0);
// put the new result back in the original canvas so you can save it without changing code.
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(can2,0,0);

或者提供复制粘贴解决方案

    function fileOnload(e) {
        var canvas = $("#default-board")[0];
        var context = canvas.getContext("2d");
        var background = new Image;
        background.src = canvas.style.background.replace(/url\(|\)/gi,"").trim();
        background.onload = function(){
            var $img = $("<img>", { src: e.target.result });
            $img.load(function() {
                 context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
                 context.drawImage(this, 0, 0);
            });
        }
    }); 

函数fileOnload（e）{
var canvas=$（“#默认板”）[0]；
var context=canvas.getContext（“2d”）；
var background=新图像；
background.src=canvas.style.background.replace（/url\（|\）/gi，“”）.trim（）；
background.onload=函数（）{
var$img=$（“您几乎完成了。请尝试更改此代码：

    $(document).ready(function () {
        $("#cambiocanvas > input").click(function () {
            var img = $(this).attr("src");
            $("#default-board").css("background", "url(" + img + ")");
        });
    });

对于这一点：

    $(".canvasborder").click(function(){
        var src = $(this).attr("src");
        defaultBoard.setImg(src);
    }); 

像这样：

    var defaultBoard = new DrawingBoard.Board("default-board", {
        background: "#fff",
        droppable: true,
        webStorage: false,
        enlargeYourContainer: true,
        addToBoard: true,
        stretchImg: true
    });
    defaultBoard.addControl("Download");

    $(".canvasborder").click(function(){
        var src = $(this).attr("src");
        defaultBoard.setImg(src);
    });     


    $(".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 canvas = $("#default-board")[0];
            var context = canvas.getContext("2d");
            var background = new Image;
            background.src = canvas.style.background.replace(/url\(|\)/gi,"").trim();
            background.onload = function(){
                var $img = $("<img>", { src: e.target.result });
                $img.load(function() {
                    context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
                    context.drawImage(this, 0, 0);
                });
            }
        }
    });

var defaultBoard=newdrawingboard.Board（“默认板”{
背景：“fff”，
真的，
网站存储：错误，
放大你的容器：对，
addToBoard：是的，
斯特拉奇姆：是的
});
defaultBoard.addControl（“下载”）；
$（“.canvasborder”）。单击（函数（）{
var src=$（this.attr（“src”）；
defaultBoard.setImg（src）；
});     
$（“.drawing form”）。在（提交）功能（e）上{
var img=defaultBoard.getImg（）；
var imgInput=（defaultBoard.blankCanvas==img）？“”：img；
$（this.find（“input[name=image]”）val（imgInput）；
defaultBoard.clearWebStorage（）；
});
$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
var canvas=$（“#默认板”）[0]；
var context=canvas.getContext（“2d”）；
var background=新图像；
background.src=canvas.style.background.replace（/url\（|\）/gi，“”）.trim（）；
background.onload=函数（）{
变量$img=$（“
并将与您在t中输入的任何图像一起工作