Question

我尝试使用base64数据将图像绘制到canvas。透明画布出现在屏幕上，没有图像。

HTML代码

<canvas id="c" style ="position: absolute; border: solid; border-color: #000000;"></canvas>

代码

byte[] imgBytes = binaryReader.ReadBytes((int) stream.Length);
System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(imgBytes));
String base64String = Convert.ToBase64String(imgBytes);
String src = String.Format("data:image/png;base64,{0}\"", base64String);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Javascript", "javascript:drawMap(" + src + "); ", true);

的JavaScript

var htmlCanvas = document.getElementById("c");
var context = htmlCanvas.getContext("2d");

function drawMap(imgdata) {
  var image = new Image();
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
  };
  image.src = imgdata;
}

Answer 1

您的JavaScript中有一些错误。这是一个有效的例子：

var htmlCanvas = document.getElementById("c");
var ctx = htmlCanvas.getContext("2d");

function drawMap(imgdata) {
  var image = new Image();
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
  };
  image.src = imgdata;
}

drawMap("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNk+M9Qz0AEYBxVSF+FAAhKDveksOjmAAAAAElFTkSuQmCC");

<canvas id="c" style="position: absolute; border: solid; border-color: #000000;"></canvas>

当您将图像数据字符串传递给drawMap()函数时，必须将图像数据字符串括在引号中，并且不要使用javascript:进行处理：

ScriptManager.RegisterStartupScript(this, this.GetType(),
             "Javascript", "drawMap('" + src + "');", true);

图像未使用base64字符串数据绘制到画布中

1 个答案: