通常のpng画像をjsonデータに変換してオブジェクトに格納する

Question

var imageUrl = {}; 

function convertToDataURLviaCanvas(url, item, outputFormat){ 
    var img = new Image(); 
    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(); 
     storemapImage(item, dataURL); 
     console.log(imageUrl); 
    }; 
} 

function storemapImage(propertyName, url){ 
    imageUrl[propertyName] = { 
    objectImage: url 
    }; 
    return; 
} 


var src = "http://orig11.deviantart.net/c565/f/2013/092/1/6/mario_pixel_by_juli95-d607odz.png" 

function capture(){ 
    convertToDataURLviaCanvas(src, "display1", "Image/png"); 
} 

通常のpng画像をjsonデータに変換してオブジェクト（imageUrl）に格納することを目的としています。まだそれから何かを得ていない、誰も私のために見てみることができますか？

Demo

Answer 1

私はあなたがここで答えと幸せにしようとしているとは思いません。

まず、あなたの「デモ」リンクとここのコードは一致しません。

上記のコードでは、実際に設定する前にimageUrlをコンソールログに記録しているため、正しく表示されません。 console.logをstoremapImageの最後に移動すると、値を取得する必要があります。 あなたのデモでは、convertToDataURLviaCanvasを呼び出した直後にconsole.logにしようとしていますが、実際にイメージをダウンロードするには少なくとも2ミリ秒かかるため、もう一度設定されません。 実際にはimg.srcを設定していないので、ロードしようとすることはありません。また、onloadは実行されません。

これをすべて修正すると、原点の要求を交差させることになります。あなたのブラウザには、javascriptが他のドメインのものにアクセスするのを防ぐセキュリティ設定があります。 JavascriptはImageオブジェクトを作成して読み込むように指示し、キャンバスに保存することができますが、これを行うと、キャンバスは汚染されているとみなされ、URLに変換することはできません。

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_imageです。

リモートサーバーがCORSヘッダーを有効にしている場合、それは実行できますが、逸脱した技術はそうしていません。

var imageUrl = {}; 

function convertToDataURLviaCanvas(url, item, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = "Anonymous"; 
    img.src = url; 
    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(); 
     storemapImage(item, url); 
    }; 
} 

function storemapImage(propertyName, url){ 
    imageUrl[propertyName] = { 
    objectImage: url 
    }; 
    console.log('imageUrl', imageUrl) 
    return; 
} 

function capture(){ 
    //convertToDataURLviaCanvas("https://orig11.deviantart.net/c565/f/2013/092/1/6/mario_pixel_by_juli95-d607odz.png", "display1", "Image/png"); 
    convertToDataURLviaCanvas("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png", "display1", "Image/png"); 
} 

https://jsfiddle.net/svr4r681/仕事をするイメージで更新フィドルが、それでもがdeviantartでは動作しません。