Question

这是我第一次使用HTML canvas。我得到了一个可以正常工作的相机，该相机返回的图像为base64字符串。我正在尝试将此字符串传递给处理图像大小调整的新函数（当前的大小并不重要，因为我只是在测试调整大小）。

现在，我从generateThumbnail函数中得到一张空白图像。在下面，我附加了应用程序中输出的图像以及控制台输出中的图像。对于第一个附加的图像，您将看到2张照片。左侧的照片是可以正常工作的原始照片（由于覆盖了我的网络摄像头，因此全黑）。尝试调整大小时，右边的照片为空白输出。

generateThumbnail(imageData) {    
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 300, 300);
  }
  img.src = imageData;

  let dataUrl = canvas.toDataURL("image/png");

  console.log(imageData);
  console.log(dataUrl);
  return dataUrl;
}

image of taken photos

image of console output from thumbnail base64

Answer 1

尽管您的代码无法在嵌入式小提琴上运行，但我认为您的问题是因为在执行方法后立即返回dataUrl时，图像尚未加载。

dataUrl

应该在img.onload方法内部返回，也许类似的东西会起作用？

**编辑**

确保同时设置画布的宽度和高度。

const generateThumbnail = (imageData) => {    
  let canvas = document.createElement("canvas");
  canvas.width = 300;
  canvas.height = 300;
  document.querySelector(".canvas").appendChild(canvas);
  
  let ctx = canvas.getContext("2d");
  let img = new Image();
  
  img.onload = () => {
    ctx.drawImage(img, 0 , 0, 300, 300);
     console.log(imageData);
  console.log(dataUrl);
  return dataUrl;
  }
   img.src = imageData;
  let dataUrl = canvas.toDataURL("image/png");
  document.querySelector(".image").appendChild(img);
  
}

window.onload = () => { 
generateThumbnail(window.image_base64);
}

.canvas, .image { 
 position: absolute;
 top: 0;
 left: 0;
  width: 300px;
  height: 300px;
  color: white;
}

.image { border: solid 1px white; }
.canvas { 
  left: 310px;
  top: 0;
  width: 300px;
  height: 300px;
}

body { 
 background: purple;
}

<div class="image"></div>
<div class="canvas"></div>



<script>

window.image_base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAFU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIgogICB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0xMC0yNFQxNjo0NTowNiswMTowMCIKICAgeG1wOk1vZGlmeURhdGU9IjIwMTgtMTAtMjRUMTY6NTE6MTUrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMTAtMjRUMTY6NTE6MTUrMDE6MDAiCiAgIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIyIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N2Q3MTU5YWYtYzM3Ni00YWVhLWFkNTYtYzNlYWFiZTUw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";

</script>

从现有的base64图像创建缩略图

1 个答案: