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

Я работаю с 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>

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

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

код Отредактировано

вот код:

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

10
background-image canvas javascript

2 ответов

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

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

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

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

для загрузки фона CSS canvas изображение

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

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

    $(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 заголовок, позволяющий происхождение вашей страницы (потенциально через * подстановки).

0