Question

我需要将图像（由特殊<div>中的用户从剪贴板粘贴）转换为Blob，以便将其上传到服务器。我设法为Chrome和Firefox做了这件事，但无法让它适用于Safari或IE。虽然我尝试的一些解决方案必须在Safari 9和IE 10中运行良好（根据libs的作者），但仍然失败了。

首先，我检查浏览器是否支持clipboardData（目前仅限Chrome），然后在else块中尝试让其他浏览器执行此操作。所以，我尝试了一些方法：

1。我的第一次半成功拍摄：

var pastedImage = new Image();

pastedImage.onload = function() {
  var canvas = document.createElement("canvas");
  canvas.width = this.width;
  canvas.height = this.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(this, 0, 0);

  canvas.toBlob(function(blob){$scope.uploader.addToQueue(blob);});
}
pastedImage.src = child.src; //child is the img pasted by user

在FF中工作得很好，但在IE中根本不起作用（这种浏览器的嘲弄甚至可以使用自己的控制台而没有额外的补丁，而这些补丁并没有设法安装在两者上我的测试PC）和Safari中的抛出和异常如下：

TypeError：canvas.toBlob不是函数。（在＆＃39; canvas.toBlob（函数（BLOB）{$ scope.uploader.addToQueue（BLOB）;}）＆＃39 ;, ＆＃39; canvas.toBlob＆＃39;未定义）

2。我使用了JavaScript-Canvas-to-Blob 。作者声称它会使canvas.toBlob在Safari 6.0+和IE 10.0+中运行。好吧，它只是改变了Safari中的错误：

SecurityError：DOM异常18：尝试突破用户的安全策略 agent.toDataURLcanvas到blob.min.js：1：923 toBlobcanvas-to-blob.min.js：1：923 onloaddirectives.js：411

第3。我使用这段代码手动声明并实现toBlob：

if( !HTMLCanvasElement.prototype.toBlob ) {
  Object.defineProperty( HTMLCanvasElement.prototype, 'toBlob', { 
    value: function( callback, type, quality ) {
      var bin = atob( this.toDataURL( type, quality ).split(',')[1] ),
      len = bin.length,
      len32 = len >> 2,
      a8 = new Uint8Array( len ),
      a32 = new Uint32Array( a8.buffer, 0, len32 );

      for( var i=0, j=0; i < len32; i++ ) {
        a32[i] = bin.charCodeAt(j++)  |
        bin.charCodeAt(j++) << 8  |
        bin.charCodeAt(j++) << 16 |
        bin.charCodeAt(j++) << 24;
      };

      var tailLength = len & 3;

      while( tailLength-- ) {
        a8[ j ] = bin.charCodeAt(j++);
      }

      callback( new Blob( [a8], {'type': type || 'image/png'} ) );
    }
  });
}

它没有改变任何东西。错误仍然相同。

4。我使用jquery.image.blob并将我的代码更改为以下内容：

var blob = $('#imgPasteArea>img').imageBlob().blob();
$scope.uploader.addToQueue(blob);

同样，FF接受此解决方案，但Safari会抛出此异常，指向lib：

错误：null不是对象（评估＆＃39; o＆＃39;）

所以现在我没有任何想法。任何人都可以建议一个可能的解决方案吗？

的JavaScript。在Safari和IE中将图像（<img/>）转换为blob

0 个答案: