如何在画布元素上渲染 blob?

新手上路,请多包涵

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

到目前为止,我有这两个(简化的)函数来捕获图像,将其转换为 blob 并最终 在此 codepen 中的画布上渲染 blob,它只返回默认的黑色图像。

 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 543
1 个回答

我认为您需要稍微整理一下代码。很难知道您要实现什么,因为有许多不必要的代码行。主要问题是 blob 在这里未定义

HTMLCanvasElement.prototype.renderImage = function(blob){

因为 photo 永远不会在 toBlob 函数中初始化…这对于你想要实现的目标来说是不必要的。

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

 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>

原文由 Leo 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题