-1

私は自分の chrome アプリに取り組みましたが、コンテンツのセキュリティ ポリシーに神経質になりました。json (string/object/array I don't know)から jpeg 画像を取得したかったのですが、csp は毎回私を止めました。データリンクの方が簡単だとわかったので、コンバーターを検索しました。

function getdt(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);

    // Get the data-URL formatted image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

//Example
getdt('http://ms01.oe3.fm/oe3metafiles/Pictures/200/929203.22.jpg');

残念ながら、これは機能しません。エラーメッセージは次のとおりです。

Uncaught TypeError: 
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
No function was found that matched the signature provided.

誰かが私を助けてくれることを願っています:) 私の悪い英語でごめんなさい

4

1 に答える 1

1

コードに 3 つの問題があります。

  1. @A.Wolff が推測しているように、あなたの img は無効です。Canvas を描画するには、URL だけでなく、完全な Image オブジェクトが必要です。したがって、画像オブジェクトを「新しく」する必要がありますvar img=new Image();

  2. 画像は非同期で読み込まれるため、コールバック内にput your drawImageandを使用する必要があります。これにより、イメージを使用する前にイメージを完全にロードできます。これは、dataURL を使用するすべてのコードを onload コールバック内に配置する必要がないことも意味します。(はい、それは面倒ですが、そうしないと画像が完全に読み込まれません)toDataURLimg.onloadreturn dataURL

  3. セキュリティ上の理由から、toDataURL画像を使用するには、Web ページと同じドメインでホストされている必要があります。それらが異なるドメインである場合toDataURL、セキュリティ エラーで失敗します。このセキュリティ問題は関連するトピックであるため、セキュリティ エラーを回避するために必要なことをここで学ぶことができます: http://enable-cors.org/

...そして: toDataURL の jpg エンコーディングが使用するimage/jpegため、regEx を変更する必要があります。

これは、リファクタリングされたコードであり、セキュリティ エラーを作成しない方法でホストされているイメージを使用しています。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
function start(){

  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  var dataURL=canvas.toDataURL(); // png is the default format

  dataURL=dataURL.replace(/^data:image\/(png|jpeg);base64,/, "");

  // Your dataURL is now available
  // Use it as desired
  alert('The dataURL is '+dataURL.length+' characters long ans starts with: '+dataURL.substring(0,20));

}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>

于 2015-02-14T16:16:43.277 に答える