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

我花了很长时间尝试将图像拖放到画布标签上并最终使用kinetic.js。

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

如果有人有更好的解决方案，我会留意这篇文章。

Answer 2

我找到了一个名为Fabric的复杂的javascript画布库。 Click Here

添加背景图片＆amp;可拖动的图像到HTML5画布

2 个答案: