エラーコンソールで表示中に画像URLをangularJSのBase64FromImageUrlに変換する

Question

イメージURLをBase64FromImageUrlに変換していますが、このようなコンソールでエラーが発生しました。原点から

「 http://160.114.10.19/voiceapi/Upload/UserProfile/b4d980b3-3e8e-4e26-913e-e79e4ce34f88.png」での

画像へのアクセスを 「http://localhost:8383は」CORSポリシーによってブロックされました： いいえ「アクセス制御 - 許可 - 起源」ヘッダは、要求された たリソース上に存在しています。したがって、オリジン 'http://localhost:8383'は許可されません。

私のjsのコード

function getBase64FromImageUrl(url) { 
      var img = new Image(); 
      img.setAttribute('crossOrigin', 'Access-Control-Allow-Origin', 'anonymous'); 

      img.onload = function() { 
       var canvas = document.createElement("canvas"); 
       canvas.width = this.width; 
       canvas.height = this.height; 
       var ctx = canvas.getContext("2d"); 
       ctx.drawImage(this, 0, 0); 
       $scope.a = canvas.toDataURL("image/png"); 
      }; 
      img.src = url; 
     } 


getBase64FromImageUrl("http://160.114.10.19/voiceapi/Upload/UserProfile/b4d980b3-3e8e-4e26-913e-e79e4ce34f88.png"); 

Answer 1

img.setAttribute('crossOrigin', 'Anonymous');の場合は動作しない場合は、おそらくCORS制限は、（あなたがあなたとは別のドメイン上のリソースにアクセスしようとしている）があります、これはから固定することができます。バックエンド。 たとえば、別のウェブサイトから2つの画像を変換しようとしましたが、最初の画像は機能しませんが、gravatar.comの2つ目の画像は機能します。したがって、エラーはJSコード自体からではありません。

function toDataURL(src, callback, outputFormat) { 
 
    var img = new Image(); 
 
    img.crossOrigin = 'Anonymous'; 
 
    img.onload = function() { 
 
    var canvas = document.createElement('CANVAS'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var dataURL; 
 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    ctx.drawImage(this, 0, 0); 
 
    dataURL = canvas.toDataURL(outputFormat); 
 
    callback(dataURL); 
 
    }; 
 
    img.src = src; 
 
    if (img.complete || img.complete === undefined) { 
 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
 
    img.src = src; 
 
    } 
 
} 
 

 
toDataURL(
 
    'https://vaadin.com/documents/10187/33841/cors-deployment-setup-with-vaadin.png', 
 
    function(dataUrl) { 
 
    console.log('Src static.srcdn.com:', dataUrl) 
 
    } 
 
) 
 

 
toDataURL(
 
    'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid&f=y', 
 
    function(dataUrl) { 
 
    console.log('Src gravatar.com:', dataUrl) 
 
    } 
 
)