29

私の目標は、iPadのユーザーに画像をキャンバスに読み込んでもらい、オフラインでベース64でエンコードされた画像をすべて取得することです。

JSFiddle

JSFiddle

コード

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../js/libs/jquery-1.7.1.min.js"></script>
    <script>
      $(document).ready(function(){ 
        //Get the canvas
        var canvas = document.getElementById('testCanvas');
        var context = canvas.getContext('2d');   

        $("#testButton").click(function(){
          var base_image = new Image();

          base_image.src = $("#testImg").val();
          //base_image.src = '1.jpg';

          //When the image loads
          $(base_image).load(function(){
            //Resize canvas for image
            $("#testCanvas").attr({
              width: base_image.width,
              height: base_image.height
            });

            //Draw image on canvas
            context.drawImage(base_image, 0, 0);

            //Get base64 encoded image
            var imageString = canvas.toDataURL("image/jpeg");
            $("#imageString").val(imageString);

            //alert($("#imageString").val().length);
            $("#imageOutput").attr("src", imageString);
          });//image load
        });//Test Button Click
      });//doc ready
    </script>
  </head>

  <body>
    <form>
      <input type="file" name="testImg" id="testImg" />
    </form>
    <button id="testButton">Test</button>
    <canvas id="testCanvas" style="border: 1px solid black;">Your Browser does not support canvas</canvas>
    <br />
    <fieldset>
      <legend>Image Data</legend>
      <textarea id="imageString"></textarea>

      <img id="imageOutput" src="" />
    </fieldset>
  </body>
</html>

画像が実際にから読み込まれていないことは知っていますが、<input type='file' />一見の価値があると思いました。Chromeコンソールでは次のようになります。

ローカルリソースのロードは許可されていません

iPadからキャンバス要素に画像を取り込む方法はありますか？

ヘルプ、ヒント、アドバイスは大歓迎です！ありがとう！

4

2 に答える 2

72

ファイル入力を使用して画像をアップロードし、キャンバス内に配置し、base64 データ URL を読み戻す方法を示す機能するフィドル (この回答の以前の作業に基づく)があります。

つまり、次のことを行う必要があります。

  1. ファイル APIを使用して画像を読み込みます (onchange入力要素のリスナーでこれを行う場合があります)。
var file = input.files[0];
var fr = new FileReader();
fr.onload = createImage;   // onload fires after reading is complete
fr.readAsDataURL(file);    // begin reading
  1. FileReader のonloadコールバック (ここでは)で、FileReaderのcreateImageを読み取ります (ここでは)。それがあなたの画像データの URL です。resultfr.result

オプションの手順(キャンバス上の画像を操作する場合にのみ必要):

  1. FileReader のonloadコールバック (ここではcreateImage) で、新しいImageオブジェクトを作成し、FileReader の に設定しsrcますresult。
img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
  1. 最後に、イメージのonloadコールバックでキャンバスに描画canvas.toDataUrlし、データに使用します。
canvas.width = img.width;      // set canvas size big enough for the image
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);         // draw the image

// do some manipulations...

canvas.toDataURL("image/png");  // get the data URL
于 2012-12-18T18:25:30.567 に答える