【问题标题】:Javascript: How can I reliably derive ImageData from base64?Javascript:如何可靠地从 base64 派生 ImageData?
【发布时间】:2023-01-12 22:01:35
【问题描述】:

考虑以下 MWE:

   var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');
    var str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
    var image = new Image();
    image.src = str;
    ctx.drawImage(image, 0, 0);
    var imageData = ctx.getImageData(0, 0, image.width, image.height);
    console.log('imageDataxD', imageData.data);

在我的浏览器中进行本地测试时,它大约运行了 40% 的时间。我得到的错误是:

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

为什么代码有时接收到宽度,有时却接收不到?

【问题讨论】:

  • 也许需要等待加载事件。我想 onload 还等待位图分配和数据渲染,而不仅仅是从 url 下载。
  • @huseyintugrulbuyukisik 你能推荐我在哪里可以放置这样的代码块/它的外观吗?
  • 您所要做的就是设置一个回调,例如image.onload = () => { /* code below image.src = str */ }

标签: javascript


【解决方案1】:

需要图像加载事件才能处理位图位:

imgage.onload = function() {
   // do work 
};
image.src = "base64 code here";

因为设置src时,它下载/获取内容,为位图分配内存,初始化位图,然后调用onload。

在设置src之前设置onload函数应该没有问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-07-30
    • 2020-03-15
    • 2010-09-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-09
    相关资源
    最近更新 更多