使用选定的背景保存 Canvas

Question

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

我的问题是，当我尝试用背景保存 canvas 时，保存的图像只显示绘图但不显示图像背景...有人可以帮我解决这个问题吗？

此致！

这里是代码：

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

Answer 1

canvas 元素的背景（图像）不是 canvas 内容的一部分，因此未保存。

无法重绘的解决方法canvas

如果您想要背景，只需在使用合成操作 "destination-over" 保存之前将其渲染到 canvas 上，它只会添加 canvas 透明或半透明的像素，并且您会看到 Elements 背景。

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

加载 canvas 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);

替代解决方案使用屏幕外 canvas 并先绘制背景，然后再绘制原始 canvas。

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

Answer 2

你快完成了。尝试更改此代码：

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

并且将与您放入 select 列表中的任何图像一起使用，请记住它必须伴随着 Access-Control-Allow-Origin header 以允许您的页面来源（可能通过* 通配符）。

使用选定的背景保存 Canvas

Save Canvas with selected background

javascript

canvas

background-image