Javascript HTML context.drawimage不工作

我试图在画布中显示图像，但运气不佳。context.filltext显示，但图像不显示。如果直接显示图像，则图像可以工作，但添加到画布时不显示。TaggedImage包含文本和图像

function onCameraPicSuccess(imgData)
{

document.getElementById('tempImg').src = "data:image/jpeg;base64," + imgData;
var lat = parseFloat(document.getElementById('lat').innerHTML);
var long = parseFloat(document.getElementById('long').innerHTML);
var accuracy = parseInt(document.getElementById('accuracy').innerHTML);

drawCanvas(lat, long);
var dataURL = document.getElementById("canvasPnl").toDataURL();
document.getElementById('taggedImage').src = dataURL;
document.getElementById('tempImg').style.display = 'block';
document.getElementById('taggedImage').style.display = 'block';

var radius = accuracy / 2;
var circle = L.circle([lat, long], radius, {
    color: 'yellow',
    fillColor: '#FF0',
    fillOpacity: 0.5
}).addTo(map).bindPopup("Captured picture <br />" + document.getElementById('taggedImage').outerHTML).openPopup();

}

 function drawCanvas(latitude, longitude)
{
var exif;
var canvas = document.getElementById("canvasPnl");
var locationtxt = "Latitude: " + latitude + ", Longitude: " + longitude;

var context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillText(locationtxt, 10, 50);
var image = new Image();
image.onload = function(){

    context.drawImage(image, 10, 10, 200, 200);
    alert('image loaded');
};
image.src = document.getElementById('tempImg').src;
}

函数onCameraPicSuccess（imgData）
{
document.getElementById（'tempImg'）.src=“data:image/jpeg；base64，”+imgData；
var lat=parseFloat（document.getElementById（'lat'）.innerHTML）；
var long=parseFloat（document.getElementById（'long'）.innerHTML）；
var accurity=parseInt（document.getElementById（'accurity'）.innerHTML）；
拉丝帆布（横向、纵向）；
var dataURL=document.getElementById（“canvasPnl”）.toDataURL（）；
document.getElementById（'taggedImage'）。src=dataURL；
document.getElementById（'tempImg'）.style.display='block'；
document.getElementById（'taggedImage'）.style.display='block'；
var半径=精度/2；
变量圆=L圆（[lat，long]，半径{
颜色：'黄色'，
填充颜色：'#FF0'，
填充不透明度：0.5
}).addTo（map）.bindPopup（“捕获的图片
”+document.getElementById（'taggedImage'）.outerHTML）.openPopup（）；
}
函数drawCanvas（纬度、经度）
{
var-exif；
var canvas=document.getElementById（“canvasPnl”）；
var locationtxt=“纬度：“+纬度+”，经度：“+经度；
var context=canvas.getContext（'2d'）；
context.imageSmoothingEnabled=false；
context.fillText（locationtxt，10,50）；
var image=新图像（）；
image.onload=函数（）{
drawImage（图像，10，10，200，200）；
警报（“图像已加载”）；
};
image.src=document.getElementById（'tempImg'）.src；
}

这只是一个猜测，我认为错误在于在这行中指定图像的src属性时，因为浏览器可能会在原始图像的src中执行某种内部转换，从base64转换为其他内容

您可以尝试将

imgData

传递到

drawCanvas

函数并执行以下操作

image.src='数据：image/jpeg；base64，“+imgData