canvas输出图片码流时默认背景色

1,357 阅读1分钟

用canvas画完图之后,点击下载按钮,将所画的图形生成图片流下载出来。但是我发现个事不同,导出的图片背景色不同。jpg格式的背景是黑色,png格式的背景是透明色。

function saveFile (data, filename) { //下载图片
  const save_link = document.createElement('a')
  save_link.href = data
  save_link.download = filename

  var event = document.createEvent('MouseEvents')
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  save_link.dispatchEvent(event)
}
function getImgData () { //生成图片
  let canvas = document.querySelector("#myDiagramDiv canvas");
  if (canvas) {
      let strDataURI = canvas.toDataURL("image/jpeg") //jpg格式的背景是黑色
      //let strDataURI = canvas.toDataURL("image/png") //png格式的背景是透明色
      saveFile(saveFile,'image')
  }
}

这是下载出来的图片