2

キャンバスに画像を追加するコードを次に示します。これは、SVG ファイルをローカルの [root]/uploads フォルダーにアップロードする Uploadify のインスタンスを作成することです。次に、その画像をサイズの異なる 3 つのキャンバスに広告します。http:// アドレスを使用して画像が参照されることはありません。画像パスへのすべての参照はローカル相対です。

    var folder = '/uploads';
    var fullpath = folder + '/' + $('input#canonical').val() + ".svg";
    $('#file_upload').uploadify({
        'uploader': '/uploadify/uploadify.swf',
        'script': '/uploadify/uploadify.php',
        'cancelImg': '/uploadify/cancel.png',
        'folder': folder,
        'fileExt': '*.svg',
        'fileDesc': 'SVG files',
        'scriptData':   {'rename': $('input#canonical').val() + ".svg"},
        'onAllComplete': function(){
            $('#upload-wrap').hide();

            var img = new Image();
            img.onload = function(){

                var ar = img.width / img.height;
                var swidth = ( ar >= 1 ) ? small : small * ar;
                var mwidth = ( ar >= 1 ) ? medium : medium * ar;
                var lwidth = ( ar >= 1 ) ? large : large * ar;

                var sheight = ( ar <= 1 ) ? small : small / ar;
                var mheight = ( ar <= 1 ) ? medium : medium / ar;
                var lheight = ( ar <= 1 ) ? large : large / ar;

                var sc = sCanvas.getContext('2d');    
                var mc = mCanvas.getContext('2d');   
                var lc = lCanvas.getContext('2d');    

                scObj.css({width:swidth, height: sheight});
                mcObj.css({width:mwidth, height: mheight});
                lcObj.css({width:lwidth, height: lheight});

                sc.drawImage(img,0,0,swidth,sheight);
                mc.drawImage(img,0,0,mwidth,mheight);
                lc.drawImage(img,0,0,lwidth,lheight);
            };
            img.src = fullpath;
        }
    });

canvas.toDataUrl() を呼び出そうとするとUncaught Error: SECURITY_ERR: DOM Exception 18、コンソールで問題が発生します。これを修正する方法はありますか？さらに情報が必要な場合はお知らせください。

4

2 に答える 2

4

http:// アドレスを使用して画像が参照されることはありません。イメージ パスへのすべての参照はローカルです。

それが問題です。この方法でローカル ファイルを使用することはできません。ここでは、Canvas イメージのセキュリティ ルールについて少し説明します。

キャンバスがローカル ファイルを自分自身に描画することを許可されている場合、ローカル ドライブ上にある (プライベートな) ファイルを描画し、その imageData を取得して、そのファイルをサーバーにアップロードし、効果的に画像を盗む可能性があります。それができないため、「ローカル ファイルはオリジン クリーンを破る」というルールが適用されます。

Chrome で実際にそのルールをオフにすることができます。

C:\Users\theUser\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

しかし、それはデバッグのためだけであるべきです。

于 2012-04-17T14:41:40.697 に答える
2

これは、ここで説明されている問題と同じです:ドキュメント内の SVG をキャンバスにラスタライズする

基本的に、SVG をキャンバスに追加するとキャンバスが汚染され、toDataURL() を呼び出すことができなくなります。どうやら Firefox 12 ではこれが修正されているようですが、Chrome ではまだ修正されていません。

于 2012-04-26T07:28:06.827 に答える