0

すべての意図と目的のために、ユーザーが画像 URL を入力し、ボタンをクリックして、URL の反対側にあるリソースのデータ URI (例: Google ロゴ）。

読んでみると、次のように画像のデータ URI を取得できることがわかりました。

function imageToDataURI(src,callback)
{
    var canvas = document.createElement('canvas'),
        img    = document.createElement('img');

    img.onload = 
        function()
        {
            canvas.width  = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0);
            callback(canvas.toDataURL());
        };
    img.src = src;
}

ただし、多くの人 (私自身を含む) が "SECURITY_ERR: DOM Exception 18" を取得しています。これは、クロスドメインの画像が描画されるとキャンバス要素が汚染され、汚染されたキャンバスが canvas.toDataURL() で上記のエラーを返すためです (理由を参照) canvas.toDataURL() はセキュリティ例外をスローしますか? )。私の問題は、クロスドメイン URL をサポートする必要があることです。

私に何ができる？

4

1 に答える 1

2

クロスドメイン データを取得するための利用可能なオプションについては、こちらを参照してください。ソリューションには、ほぼ 3 つのカテゴリがあります。

  1. Web ページに巨大なセキュリティ ホールを作成するもの
  2. クロスドメインサーバーの制御を必要としないもの
  3. 独自のサーバーをプロキシにする必要があるもの

＃1を買う余裕がなく、＃2に参加せず、node.jsサーバーを自由に使用できる場合は、＃3を実行する非常にシンプルなプラグアンドプレイnode.jsモジュールを次に示します.

/* return a datauri encoding of the resource at the given url */
exports.dataurize = 
    function(url,callback)
    {
        var request = 
            require('http').request(
                {'host':url.host || 'localhost', 
                 'port':url.port || 80, 
                 'path':url.path || '/'},
                function(resp)
                {
                    var data = '';
                    resp.setEncoding('binary');
                    resp.on('data', function(chunk) {data += chunk;});
                    resp.on('end',
                        function()
                        {
                            if( resp.statusCode == 200 )
                                callback(
                                    undefined,
                                    'data:'+resp.headers['content-type']+';base64,'+
                                       new Buffer(data,'binary').toString('base64'));
                            else
                                callback({'statusCode':resp.statusCode, 'reason':data});
                        });
                });
        request.on('error',
            function(err)
            {
                callback({'statusCode':0, 'reason':err});
            });

        request.end();
    };

それをバックエンドに統合すれば、#3 を無料で利用できます。元の問題に戻ると、imageToDataURI() は node.js バックエンドに URL を照会し、バックエンドは次の結果で応答します。

require('./dataurize').dataurize(...)

つまり、目的の dataURI を使用します。

于 2012-07-20T04:17:34.820 に答える