如何在画布元素上呈现一个二进制大对象？

Question

如何在画布元素上呈现一个二进制大对象？

13

如何将图像blob渲染到画布元素？

到目前为止，我有这两个（简化的）函数来捕获图像，将其转换为blob，并最终在画布上呈现blob。在这个CodePen中，它只返回默认的黑色图像。

var canvas = document.getElementById('canvas');
var input = document.getElementById('input');
var ctx = canvas.getContext('2d');
var photo;


function picToBlob() {
  var file = input.files[0];

  canvas.toBlob(function(blob) {
    var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

    newImg.onload = function() {
      ctx.drawImage(this, 0, 0);
      photo = blob;
      URL.revokeObjectURL(url);
    };

    newImg.src = url;
  }, file.type, 0.5);

  canvas.renderImage(photo);
}

HTMLCanvasElement.prototype.renderImage = function(blob) {

  var canvas = this;
  var ctx = canvas.getContext('2d');
  var img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0)
  }
  img.src = URL.createObjectURL(blob);
}

input.addEventListener('change', picToBlob, false);

- ohav ben yanai

你在 canvas.renderImage 中异步调用 canvas.toBlob，并且想知道为什么输出的是透明图像？我认为这是因为在尝试导出时，你还没有在画布上绘制任何内容。另外，在你的 renderImage 中，别忘了撤销 URL 对象，并且你可能需要调整画布大小。 - Kaiido

3个回答

5

你也可以使用 createImageBitmap 将一个 blob 直接渲染到画布中：

createImageBitmap(blob).then(imageBitmap=>{ctx.drawImage(imageBitmap,0,0)})

var canvas = document.getElementById('canvas');
var input = document.getElementById('input');


function blobToCanvas() {
  createImageBitmap(input.files[0]).then(imageBitmap => {
    console.log(imageBitmap);
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0)
  })
}


input.addEventListener('change', blobToCanvas, false);

<input type='file' accept='image' capture='camera' id='input'>
<canvas id='canvas'></canvas>

- xpy

3

您可以按照以下方式使用它。

function renderImage(canvas, blob) {
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.onload = (event) => {
    URL.revokeObjectURL(event.target.src) //  This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
    ctx.drawImage(event.target, 0, 0)
  }
  img.src = URL.createObjectURL(blob)
}

以下是一个例子。

/**
 * @param {HTMLCanvasElement} canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
 * @param {Blob} blob: https://developer.mozilla.org/en-US/docs/Web/API/Blob
 * */
function renderImage(canvas, blob) {
  const ctx = canvas.getContext('2d')
  switch (blob.type) {
    case "image/jpeg": // Normally, you don't need it (switch), but if you have a special case, then you can consider it.
    case "image/png":
      const img = new Image()
      img.onload = (event) => {
        URL.revokeObjectURL(event.target.src) // Once it loaded the resource, then you can free it at the beginning.
        ctx.drawImage(event.target, 0, 0)
      }
      img.src = URL.createObjectURL(blob)
      break  
  }
}

//  below is test
(() => {
  const canvas = document.querySelector('canvas')
  const input = document.querySelector('input')
  input.addEventListener('change',
    (event) => {
      const file = event.target.files[0]
      const blob = new Blob(
        [file],
        {"type": file.type} // If the type is unknown, default is empty string.
      )
      renderImage(canvas, blob)
    }
  )
})()

<div><input type='file' accept='.png,.jpg'></div>
<canvas></canvas>

这是另一个例子，用来展示revokeObjectURL的效果。

<div></div>
<canvas width="477" height="600"></canvas>
<script>
  async function renderImage(canvas, blob, isNeedRevoke=true) {
    const ctx = canvas.getContext('2d')
    const img = new Image() // The upper part of the painting.
    const img2 = new Image() // The lower part of the painting.

    await new Promise(resolve => {
      img.onload = (event) => {
        if (isNeedRevoke) {
          URL.revokeObjectURL(event.target.src)
        }
        ctx.drawImage(event.target,
          0, 0, 477, 300,
          0, 0, 477, 300
        )
        resolve()
      }
      img.src = URL.createObjectURL(blob)
      setTimeout(resolve, 2000)
    }).then(() => {
      img2.onload = (event) => {
        ctx.drawImage(event.target,
          0, 300, 477, 300,
          0, 300, 477, 300
        )
      }
      img2.src = img.src //  If URL.revokeObjectURL(img.src) happened, then img2.src can't find the resource, such that img2.onload will not happen.
    })
  }

  function CreateTestButton(canvas, btnText, isNeedRevoke) {
    const button = document.createElement("button")
    button.innerText = btnText
    button.onclick = async (event) => {
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height)  // clear canvas
      fetch("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/477px-PNG_Test.png")
        .then(async response=>{
          const blob = await response.blob()
          renderImage(canvas, blob, isNeedRevoke)
        }).catch(err=>console.error(err))
    }
    return button
  }

  (() => {
    window.onload = () => {
      const canvas = document.querySelector('canvas')
      const div = document.querySelector('div')
      const btn1 = CreateTestButton(canvas, "Without URL.revokeObjectURL", false)
      const btn2 = CreateTestButton(canvas, "URL.revokeObjectURL", true)
      div.append(btn1, btn2)
    }
  })()
</script>

- Carson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leo · Accepted Answer

我觉得你需要整理一下代码。由于存在许多不必要的代码行，很难知道你试图实现什么。主要问题是这里的 blob 未定义。

HTMLCanvasElement.prototype.renderImage = function(blob){

在toBlob函数内部，photo从未被初始化，这在您尝试实现的功能中是不必要的。

下面是您代码片段的简化工作版本

var canvas = document.getElementById('canvas');
var input = document.getElementById('input');


  function picToBlob() {
    canvas.renderImage(input.files[0]);
  }

HTMLCanvasElement.prototype.renderImage = function(blob){
  
  var ctx = this.getContext('2d');
  var img = new Image();

  img.onload = function(){
    ctx.drawImage(img, 0, 0)
  }

  img.src = URL.createObjectURL(blob);
};

input.addEventListener('change', picToBlob, false);

<input type='file' accept='image' capture='camera' id='input'>
<canvas id = 'canvas'></canvas>