Проблема со ссылками на изображения, не экспортируемая из HTML5 canvas

Question

Честно говоря, я не очень хорошо разбираюсь в JS.Я занимался этим в течение нескольких дней, занимаясь исследованиями в Интернете, и я не могу продвинуться дальше в этом.Я надеюсь, что кто-нибудь может помочь мне в этом.

Я пытался заставить дизайнер футболок работать, и я пытаюсь сделать так, чтобы отредактированное изображение на холсте было экспортировано / загружено для пользователя с помощью «сохранить меня».кнопка, это код (я удалил ненужную / нерелевантную связку).

Контейнер для футболки:

// The Javascript code I'm trying to have the save me button to download the image:
var saveme, img;

var valueSelect = $("#tshirttype").val();
$("#tshirttype").change(function() {
  valueSelect = $(this).val();
});

saveme = document.getElementById("save");
img = document.getElementById("img");

saveme.onclick = function(event) {
  var tmp = tcanvas.toDataURL();
  img.src = tmp;
  img.style.display = 'inline';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="flipback" type="button" class="btn" title="Rotate View"><i class="icon-retweet" style="height:19px;"></i></button>
<input type="button" value="save me" id="save" />
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
  <img name="tshirtview" id="tshirtFacing" src="img/crew_front.png">
  <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
    <canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    <img id="img" />
  </div>
</div>

Как выглядит страница:

На изображении выше кнопка «Сохранить меня» наtop - это то, к чему я пытаюсь добавить функцию.Я получаю следующую ошибку:

TypeError: img is undefined

Но после добавления строки <img id="img" /> я остаюсь без ошибок, но функция не отображает изображение.Спасибо!Надеюсь, кто-нибудь сможет мне помочь.Я действительно хочу учиться.

Answer 1

Попробуйте построить из кода ниже.Из того, что я вижу, tcanvas не определено в вашем коде.

// The Javascript code I'm trying to have the save me button to download the image:
var saveme = document.getElementById("save");
var img = document.getElementById("img");
var tcanvas = document.getElementById("tcanvas");

// Drawing something on the canvas
var ctx = tcanvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 200, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

saveme.onclick = function(event) {
  img.src = tcanvas.toDataURL();
  img.style.display = 'inline';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="save me" id="save" />
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
  <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
    <canvas id="tcanvas" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    <img id="img" />
  </div>
</div>