将画布转换为PNG会返回空白图像

Question

我在将画布转换为PNG时遇到问题。 尽管画布的外观完全符合我的期望，并且从画布到数据URL PNG的转换似乎正确，但是图像为空白。 我也尝试将div转换为PNG，但对我来说不起作用，因为我希望应用灰度滤镜。有人有什么想法吗？

---

JavaScript

var imgis = new Image();
var bubble = new Image();
var canvasWidth;
var canvasHeight;
var ctx = canvas.getContext('2d');
bubble.onload = function() {
  var imgis = new Image();
  var bubble = new Image();
  var ctx = canvas.getContext('2d');
  bubble.onload = function() {
  // set the canvas' size
  canvas.width = this.width;
  canvas.height = this.height;
  // first fill a rect
  ctx.fillStyle = 'rgba(255, 255, 255, 0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // set the gCO
  ctx.globalCompositeOperation = 'luminosity';
  // if the browser doesn't support Blend Modes
  console.log(ctx.globalCompositeOperation)
  if (ctx.globalCompositeOperation !== 'luminosity')
    fallback(this);
  else {
    // draw the image
    ctx.drawImage(this, 0, 0);
    ctx.drawImage(imgis, 30, 60);
    // reset the gCO
    ctx.globalCompositeOperation = 'source-over';
  }
}
imgis.crossOrigin = "anonymous";
bubble.crossOrigin = "anonymous";
imgis.src = "image1 src";
bubble.src = "image2 src";
function fallback(img) {
  // first remove our black rectangle
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //draw the image
  ctx.drawImage(img, 0, 0);
  ctx.drawImage(imgis, 30, 60);

  // get the image data
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var d = imgData.data;
  // loop through all pixels
  // each pixel is decomposed in its 4 rgba values
  for (var i = 0; i < d.length; i += 4) {
    // get the medium of the 3 first values
    var med = (d[i] + d[i + 1] + d[i + 2]) / 3;
    // set it to each value
    d[i] = d[i + 1] = d[i + 2] = med;
  }
  // redraw the new computed image
  ctx.putImageData(imgData, 0, 0);
 }

canvas = document.getElementById('canvas');
 var image = Canvas2Image.convertToPNG(canvas);
 console.log(image.src);
 // document.getElementById('theDemo').src = image.src;
 var image_data = $(image).attr('src');
 console.log(image_data);
 $("#theDemo").attr('src', image_data);

HTML

<canvas id='canvas' > </canvas>
    <img src="" id="theDemo" />

Answer 1

我假设您正在使用canvas2image。您应将var image = Canvas2Image.convertToPNG(canvas);替换为Canvas2Image.convertToPNG(canvas, width, height)。希望有帮助！

编辑，因为问题出在实际的画布到base64的转换上，所以您可以尝试使用.toDataURL()方法而不是使用该库。我的评论解释了如何在您的特定代码中对此进行测试。