jquery - 如何在照片上嵌入文字

Question

我想将文本嵌入到 div 中的照片中。因此，当有人保存该照片时，它应该与文字一起保存。我试过使用下面的脚本。但是，我无法得到我所期望的。

It give an error on ctx = canvas.getContext('2d'), line as undefined is not a function.

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 and you are fetching from div.