Question

我想在div中的照片中嵌入文字。因此，当有人保存该照片时，它应该保存文本。我试过使用下面的脚本。但是，我无法达到我的预期。

它在ctx = canvas.getContext（'2d'）上出错，line as undefined不是函数。

HTML：

<div id="img_canvas" class="img_canvas" style="background: url('<?= base_url();?>uploads/x-meme-1.0.jpg')no-repeat;width: 100%!important;height: 663px;background-position: 50% 50%;background-size: contain;"></div>

<input type="button" id="add_meme" style="cursor: pointer;" class="right add_meme" value="Submit">

这是我的剧本：

$(document).ready(function() {
        $('#add_meme').on('click', function(ev) {

            var canvas = document.getElementById('img_canvas'),
                ctx = canvas.getContext('2d'),
                reader = new FileReader;
            reader.onload = function(event) {
                var img = new Image;

                img.onload = function() {
                    canvas.width = this.width;
                    canvas.height = this.height;
                    ctx.drawImage(this, 0, 0);
                    ctx.font = "36pt Verdana";

                    ctx.fillStyle = "red";
                    ctx.fillText("Test Text", 42, 82);

                    ctx.fillStyle = "white";
                    ctx.fillText("Test Text", 40, 80);

                };

                img.src = event.target.result;
            };

            reader.readAsDataURL(ev.originalEvent.target.files[0]);

        });
    });

Answer 1

HTML

<div id="img_canvas" class="img_canvas" style="background: url('<?= base_url();?>uploads/x-meme-1.0.jpg')no-repeat;width: 100%!important;height: 663px;background-position: 50% 50%;background-size: contain;"></div>

更改HTML

<canvas id="img_canvas" class="img_canvas" style="background: url('<?= base_url();?>uploads/x-meme-1.0.jpg')no-repeat;width: 100%!important;height: 663px;background-position: 50% 50%;background-size: contain;"></canvas>

canvas.getContext你正在从div中获取。

如何在照片上嵌入文字

1 个答案: