0
Я хочу вставить текст в фотографию в div. Поэтому, когда кто-то сохраняет эту фотографию, он должен сохранять текст с текстом. Я пробовал использовать скрипт ниже. Но я не мог получить то, что ожидал.Как вставлять текст на фотографию
Это сообщение об ошибке ctx = canvas.getContext ('2d'), строка как 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]);
});
});