HTML context.drawimage 不工作答案

【问题标题】：HTML context.drawimage not workingHTML context.drawimage 不工作
【发布时间】：2014-01-04 02:40:33
【问题描述】：

我正在尝试在画布中显示图像，但没有成功。 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;
}

【问题讨论】：

标签： javascript html image canvas

【解决方案1】：

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

您可以尝试将imgData 传递给drawCanvas 函数并执行

image.src = 'data:image/jpeg;base64,' + imgData;

【讨论】：