把一個普通的PNG圖像爲JSON數據，然後存儲到對象

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），這是我的代碼，我測試了很多，但仍然沒有從它得到任何東西，任何人都可以看看我？把一個普通的PNG圖像爲JSON數據，然後存儲到對象

Demo

來源

2016-04-22 darkness

我不認爲你會很樂意與這裏的答案。

首先，你的「演示」鏈接，這裏的代碼不匹配。

在上面的代碼，你是控制檯記錄IMAGEURL之前您實際上設置它，所以它不會是正確的。如果你將console.log移動到你的storemapImage的結尾，你應該得到一個值。在您的演示中，您正在嘗試調用convertToDataURLviaCanvas之後的console.log，但它不會被設置爲onload需要至少幾毫秒才能真正下載圖像。你實際上並沒有設置img.src，因此它永遠不會嘗試加載，也不會觸發onload。

因此修復這一切，它歸結爲跨越原點請求。您的瀏覽器具有安全設置，可防止JavaScript訪問其他域中的內容。 Javascript可以創建一個Image對象並告訴它加載，並且可以將其保存到畫布上，但一旦完成後，畫布就會被視爲受污染，您無法將其轉換爲網址。

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的。

來源

2016-04-22 06:57:33

把一個普通的PNG圖像爲JSON數據，然後存儲到對象

回答

相關問題