JavaScriptを使ってpng画像をblob画像に変換しますか？

Question

"png"バイナリデータを含むキャンバスタグで生成された画像タグを表示できません。この新しい画像をTinyMCEエディタに表示したいので、FMathプラグインで編集することができます。私は空でimgタグの上に置くと

は、私は「与えられたURLのロードに失敗しました」エラーが発生します。

下の画像は、pngデータを含むキャンバスタグです。

var tinymceapp = (function (jq, tmce) {'use strict'; 
    var canvas = null, 
     ctx = null, 
     base64String = "", 
     img = null, 
     blob = null; 

    return { 
     pageReady: function() { 
      tmce.init({ 
       selector: '#editor', 
       height: 500, 
       theme: 'modern', 
       plugins: [ 
        'other plugins FMathEditor' 
       ], 
       toolbar1: 'toolbar 1 buttons', 
       toolbar2: 'toolbar 2 buttons | FMathEditor', 

       init_instance_callback : function(editor) { 
        img = new Image(); 
        canvas = document.getElementById('canvas'); 
        ctx = canvas.getContext('2d'); 

        img.onload = function() { 
         canvas.width = this.width; 
         canvas.height = this.height; 
         ctx.drawImage(img, 0, 0); 
        }; 

        img.src = 'img/math.png'; 

        base64String = canvas.toDataURL('image/png', 1.0); 

        blob = canvas.toBlob(function (blob) { 
         var newImg = document.createElement('img'), 
         url = window.URL.createObjectURL(blob); 
         console.log(url); 
         newImg.onload = function() { 
          // no longer need to read the blob so it's revoked 
          window.URL.revokeObjectURL(url); 
         }; 

         newImg.src = url; 
         document.body.appendChild(newImg); 
        }, 'image/png', 1.0); 

        tmce.activeEditor.insertContent('<img alt="MathML (base64):' + base64String.substring(22, base64String.length) + '" src="' + base64String + '"/>'); 

       } 
      }); 
     } 
    }; 
}($, tinymce)); 

$(document).ready(tinymceapp.pageReady); 

私は両方試してみました：

私が使用していたコードはこれです：私はFMathエディタで編集できるように、私は何とかブロブアドレスでのimgタグにそのPNGデータを転送する必要がありますCanvas.toDataUrl（）とCanvas.toBlob（）を使用してアプローチします。しかし、どちらも空の画像を生成します。

私は間違っていますか？何か案は？これは表示できません例えば、IMGタグである

：

<img src="blob:http://localhost:8081/9fd2d43d-3b7f-42cd-a50d-161263d70c55" alt="MathML (base64):iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=" data-mce-selected="1"> 

これは底ある

下の画像はtoBlob（）コードを使用して生成するIMGタグを表示しますcanvas.toBlob（）によって生成された空のimgタグ：

<img src="blob:http://localhost:8081/eede9470-3728-4031-8c58-9c29a4c8979f"> 

Answer 1

イメージの読み込みがまだ完了していないときにBLOBを取得しようとしています。 blob（async）のキャプチャを続行するには、基本的にイメージが読み込まれるまで待つ必要があります。このステップで

だからここに：

img.onload = function() { 
    canvas.width = this.width; 
    canvas.height = this.height; 
    ctx.drawImage(img, 0, 0); 
    // YOU SHOULD PROCESS/CALLBACK IT HERE 
}; 
// HERE IS WHERE YOU DO IT AS OF NOW