图像引用问题，而不是从HTML5画布导出

Question

老实说，我对JS并不是很精通。我已经在互联网上进行了几天的研究，并且似乎无法进一步推进。我希望有人可以帮助我。

我一直试图让一个T恤设计师工作，我想要做的是使用“保存我”按钮为用户导出/下载画布上的编辑图像，这是代码（我删除了不必要/不相关的一堆）。

T恤的容器：

// 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>

页面如何显示：

从上图中，顶部的“保存我”按钮是我尝试添加功能的按钮。我得到的错误是这样的：

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>