javascript - 除非硬编码或在 setTimeout 中设置为 0，否则不显示 Base64 图像

Question

我正在将 SVG 转换为 PNG，它工作正常，除了一些 super 奇怪的行为，将图像 src 设置为 b64 值仅在将其设置为 0 的 setTimeout 时才有效。如果复制 b64 值并对其进行硬编码作为 src 它也可以。这是 JS:

var testSVG = {
  height: 31.987199999999998,
  template: '<svg width="19.2" height="31.987199999999998" viewBox="0 0 149.39 248.95" xmlns="http://www.w3.org/2000/svg"><path fill="#c599fe" stroke="#000" stroke-miterlimit="10" stroke-width="5" d="M74.89,236.14c-5.35-26.25-14.78-48.1-26.2-68.35-8.47-15-18.29-28.88-27.37-43.45-3-4.86-5.65-10-8.56-15C6.94,99.2,2.21,87.5,2.51,72.32A68.92,68.92,0,0,1,13.28,35.88,71.31,71.31,0,0,1,63.34,3.32,75.55,75.55,0,0,1,112,12.53a70.38,70.38,0,0,1,24,23.22,68.1,68.1,0,0,1,10.9,36.32A67.12,67.12,0,0,1,144,92.82c-1.8,6-4.69,11-7.26,16.34-5,10.44-11.32,20-17.64,29.57C100.29,167.24,82.62,196.3,74.89,236.14Z"/><circle cx="74.69" cy="72.16" r="25.29"/></svg>',
 width: 19.2
}

// Pass in the testSVG object
var convertSVGtoBitmap = function (svgObject) {
  if(!svgObject) return null;

  var canvas = document.createElement("canvas");
  canvas.width = Math.ceil(svgObject.width);
  canvas.height = Math.ceil(svgObject.height);
  var ctx = canvas.getContext("2d");

  // Convert the SVG string into a base64 and append a header
  var svg = btoa(svgObject.template);
  var b64Start = 'data:image/svg+xml;base64,';
  var image64 = b64Start + svg;

  // Draw the SVG onto the canvas instance
  var img = new Image();
  img.src = image64;
  ctx.drawImage(img, 0, 0);

  // Return both svg base64 and png base64
  return {svg: image64, png: canvas.toDataURL()};
};

console.warn('test')
// Get SVG base64 stuff
var svgimg = document.createElement("img");
document.getElementById('svg-render').appendChild(svgimg);
svgimg.src = convertSVGtoBitmap(testSVG).svg;

// Get converted PNG base64 stuff
var pngimg = document.createElement("img");
document.getElementById('png-render').appendChild(pngimg);
setTimeout(function () {
  pngimg.src = convertSVGtoBitmap(testSVG).png;
}, 0)

请注意，这是因为 setTimeout 为 0。如果我将其更改为 pngimg.src = convertSVGtoBitmap(testSVG).png; 而没有 setTimeout，它不会显示。如果我执行 pngimg.src = '...' 其中 ... 是硬编码的 b64 值，它也可以工作。如果你想弄乱它，这里有一个 JSBin。

https://jsbin.com/qecedev/2/edit?html,js,output

我还尝试将其放入 jQuery 的 document.ready 中，并将 onload 添加到 pngimg 对象并在其中添加 src。

Answer 1

我想通了。问题区域是这个

  // Draw the SVG onto the canvas instance
  var img = new Image();
  img.src = image64;
  ctx.drawImage(img, 0, 0);

  // Return both svg base64 and png base64
  return {svg: image64, png: canvas.toDataURL()};

尚未加载返回中的 png 值。我将其转换为具有回调(您也可以使用 async 或 promises)并开始工作。

// USE CALLBACK
var convertSVGtoBitmap = function (svgObject, callback) {
  if(!svgObject) return null;

  var canvas = document.createElement("canvas");
  canvas.width = Math.ceil(svgObject.width);
  canvas.height = Math.ceil(svgObject.height);
  var ctx = canvas.getContext("2d");

  var svg = btoa(svgObject.template);
  var b64Start = 'data:image/svg+xml;base64,';
  var image64 = b64Start + svg;

  var img = new Image();
  // WAIT FOR IMAGE TO LOAD
  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    // NOW WE CAN RETURN VALUES!
    callback(image64, canvas.toDataURL());
  }
  img.src = image64;
};