将背景图片和可拖动图片添加到HTML5画布

Question

This is my canvas image text editor and I want to add a background image and an image that can drag and drop. I found code snippets to do things like that but with my code it is somewhat not working.

Code here

<style>canvas{width:450px; height:350px;}</style>

<canvas width="792" height="612"></canvas>
<a id="canvas-download" download="canvas-image.png" href="">Download</a>
<input type="file" id="bgload" name="bgload" />
<input type="file" id="logoload" name="logoload" />

<input id="title" value="[Certificate Title]"/>
<input id="present" value="[Presented to]" />
<input id="receiver" value="[Type Name Here]" />
<input id="awardDate" value="[Awarding Date]" />
<input id="signature" value="[Signature]" />

<script>
    $(function () {
        var cvs = $("canvas"),
                cvsWidth = 792,
                cvsHeight = 612,
                ctx = cvs[0].getContext("2d"),
                title = $("#title"),
                present = $("#present"),
                receiver = $("#receiver"),
                awardDate = $("#awardDate"),
                signature = $("#signature");

        function writeCaption(text, y, size, x) {
            var size = size;
            do {
                size--;
                ctx.font = size + 'px Georgia';
                ctx.lineWidth = size / 32;
            } while (ctx.measureText(text).width > cvsWidth)

            if (x == 0)
                ctx.fillText(text, cvsWidth / 2, y);
            else
                ctx.fillText(text, x, y);
            //ctx.strokeText(text, cvsWidth / 2, y);

        }

        // Setup basic canvas settings
        $.extend(ctx, {
            //strokeStyle: "#000000",
            textAlign: 'center',
            fillStyle: "#000",
            lineCap: "round"
        })

        $("<img />")
                .load(function () {
                    var img = this;
                    $(document.body).on("keyup", function () {
                        var titleText = title.val(),
                                presentText = present.val(),
                                signatureText = signature.val(),
                                awardDateText = awardDate.val(),
                                receiverText = receiver.val();
                        ctx.clearRect(0, 0, cvsWidth, cvsHeight);
                        ctx.drawImage(img, 0, 0, cvsWidth, cvsHeight);

                        //text alignments
                        ctx.textBaseline = 'top';
                        writeCaption(titleText, 150, 40, 0);
                        ctx.textBaseline = 'top';
                        writeCaption(presentText, 240, 20, 0);
                        ctx.textBaseline = 'top';
                        writeCaption(receiverText, 270, 30, 0);
                        ctx.textBaseline = 'bottom';
                        writeCaption(awardDateText, 490, 20, 300);
                        ctx.textBaseline = 'bottom';
                        writeCaption(signatureText, 490, 20, cvsWidth - 300 + ctx.measureText(signatureText).width);
                    }).trigger("keyup");


                })
                .attr("src", "<?php echo _SITE_URL; ?>images/editor/Template1.jpg")
                .attr("id", "canvasimg");

        var download = document.getElementById('canvas-download');
        download.addEventListener('click', function () {
            var canvas = document.getElementById('cs_canvas');
            var data = canvas.toDataURL();
            download.href = data;
        }, false);
    });
</script>

Here's the jsfiddle link for the working example. http://jsfiddle.net/57gfqsm3/7/

Please help

Answer 1

I spent a long time trying to drag and drop images on a canvas tag this and eventually used kinetic.js.

https://github.com/ericdrowell/KineticJS/

I'll watch this post in case anyone has a better solution.

Answer 2

I found a sophisticated javascript canvas library called Fabric. Click Here