使用javascript在html画布中添加图像不起作用
Posted
技术标签:
【中文标题】使用javascript在html画布中添加图像不起作用【英文标题】：adding image inside html canvas using javascript not working 【发布时间】：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" >
</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>但是图像没有显示在画布内，谁能告诉我这里可能出了什么问题，提前谢谢
【问题讨论】：
【参考方案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 提供的吗？ - 您的脚本是否在任何地方出错？如果您仔细查看数据，您可能会找到原因
图片路径正确且控制台不显示任何错误以上是关于使用javascript在html画布中添加图像不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 在 html 画布内绘制图像以获取特殊过滤器