Сохранить холст с выбранным фоном

Я работаю с холстом, сейчас я могу сохранить в БД, и я могу изменить фоновое изображение на один, который я выбираю из списка изображений.

Моя проблема в том, что когда я попытался сохранить холст с фоном, сохраненное изображение просто покажет мне ничью, но не будет фоном изображения... может ли кто-нибудь помочь мне с этим?

С наилучшими пожеланиями!

Здесь код:

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

Здесь форма с изображениями:

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

CODE EDITED

Здесь код:

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

ОТВЕТЫ

Ответ 1

Ты почти закончил. Попробуйте изменить этот код:

    $(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);
                });
            }
        }
    });

И будет работать с любым изображением, которое вы помещаете в список выбора, помните, что он должен сопровождаться заголовком Access-Control-Allow-Origin, разрешающим начало вашей страницы (возможно, с помощью подстановочного символа *).

Ответ 2

Фон элемента canvas (изображение) не является частью содержимого холста и, таким образом, не сохраняется.

Решение, если вы не можете перерисовать холст

Если вы хотите, чтобы фон просто визуализировал его на холсте, прежде чем вы сохраните его, используя композитную операцию "назначение-поверх", она добавит только пиксели, где холст будет прозрачным или полупрозрачным, и вы увидите фон Elements.

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