使用javascript在html画布中添加图像不起作用答案

【问题标题】：adding image inside html canvas using javascript not working使用javascript在html画布中添加图像不起作用
【发布时间】：2021-12-22 20:57:12
【问题描述】：

我正在尝试创建一个图像画布，用户可以在其中放大图像，我从这里获得的代码enter link description here，现在我尝试在其中添加图像，我做了以下代码：

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'https://www.gstatic.com/webp/gallery3/1.sm.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

window.onload = function() {
  var canvas = document.getElementById("myCanvas");

  var translatePos = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var scale = 1.0;
  var scaleMultiplier = 0.8;
  var startDragOffset = {};
  var mouseDown = false;

  // add button event listeners
  document.getElementById("plus").addEventListener("click", function() {
    scale /= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  document.getElementById("minus").addEventListener("click", function() {
    scale *= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  // add event listeners to handle screen drag
  canvas.addEventListener("mousedown", function(evt) {
    mouseDown = true;
    startDragOffset.x = evt.clientX - translatePos.x;
    startDragOffset.y = evt.clientY - translatePos.y;
  });

  canvas.addEventListener("mouseup", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseover", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseout", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mousemove", function(evt) {
    if (mouseDown) {
      translatePos.x = evt.clientX - startDragOffset.x;
      translatePos.y = evt.clientY - startDragOffset.y;
      draw(scale, translatePos);
    }
  });

  draw(scale, translatePos);
};



jQuery(document).ready(function() {
  $("#wrapper").mouseover(function(e) {
    $('#status').html(e.pageX + ', ' + e.pageY);
  });
})

body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  position: relative;
  border: 1px solid #9C9898;
  width: 578px;
  height: 200px;
}

#buttonWrapper {
  position: absolute;
  width: 30px;
  top: 2px;
  right: 2px;
}

input[type="button"] {
  padding: 5px;
  width: 30px;
  margin: 0px 0px 2px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body onmousedown="return false;">
  <div id="wrapper">
    <canvas id="myCanvas" width="578" height="200">
  </canvas>
    <div id="buttonWrapper">
      <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
    </div>
  </div>
  <h2 id="status">
    0, 0
  </h2>
</body>

但是图像没有显示在画布内，谁能告诉我这里可能出了什么问题，提前谢谢

【问题讨论】：

标签： javascript html jquery ajax canvas

【解决方案1】：

您的draw 函数从未真正绘制到画布上。您在前 2 行中获得了画布和上下文，但您需要使用图像调用 drawImage 才能将其实际添加到画布本身。

我怀疑你想像这样在里面调用make_base：

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base();
}

您还需要将上下文置于与使用它相同的范围内。目前，变量context只存在于draw函数内部，不存在make_base函数内部，因此您无法从make_base内部访问它。

您可以像这样将它作为变量传递：

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'a2.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

每次您想要更改 HTML 画布上的任何内容时，您都需要调用绘图函数来更改那里的内容。

【讨论】：

图像是否在“隐含路径”的正确文件夹中？脚本是在 head 元素中还是在适当的 html 元素中作为其文档状态？
我试过你的代码兄弟，静止图像没有显示
你可以编辑整个代码并在这里显示一个例子
@ZubairNazerOliyat 如果您的代码现在无法正常工作，则可能存在其他问题，正如 Samuel Marchant 所建议的那样。我建议检查： - 确保您的脚本实际加载。检查浏览器的开发工具以查看是否加载了脚本，或者进行一些控制台日志记录 - 确保图像路径正确并正在加载。您的图片是从[domain]/a2.jpg 提供的吗？ - 您的脚本是否在任何地方出错？如果您仔细查看数据，您可能会找到原因
图片路径正确且控制台不显示任何错误