將背景圖片和可拖動圖片添加到HTML5畫布

Question

這是我的畫布圖像文本編輯器，我想添加背景圖像和可以拖放的圖像。 我發現代碼片段可以執行類似的操作，但是對於我的代碼來說，它卻無法正常工作。

在這里編碼

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

這是工作示例的jsfiddle鏈接。 http://jsfiddle.net/57gfqsm3/7/

請幫忙

Answer 1

我花了很長時間嘗試將圖像拖放到畫布標簽上，並最終使用了dynamic.js。

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

如果有人有更好的解決方案，我會看這篇文章。

Answer 2

我找到了一個稱為Fabric的復雜javascript畫布庫。 點擊這里