在html5畫布中顯示圖像？

我有一個圖像位置存儲在json文件中作爲一個字符串。現在，我必須從json文件中獲取圖像位置，並且必須在html5 canvas中顯示它。請幫助我這樣做。我不知道如何使用javascript檢索json文件中的圖像路徑。這是我的json文件的內容。在html5畫布中顯示圖像？

{"image1":"\/root\/Desktop\/project\/Screenshot.png"}

我必須在html頁面中顯示此圖像。這是我的Java代碼來創建JSON文件

import java.awt.image.BufferedImage; 
import java.io.ByteArrayInputStream; 
import java.io.ByteArrayOutputStream; 
import java.io.File; 
import java.io.IOException; 
import javax.imageio.ImageIO; 
import org.json.simple.JSONObject; 
import org.json.simple.JSONArray; 
import java.io.FileWriter; 
import java.io.FileReader; 
import javax.xml.bind.DatatypeConverter; 
import org.json.simple.parser.JSONParser; 
import org.json.simple.parser.ParseException; 

    public class Simple27 
    { 
     public static void main(String[] args) throws IOException 
     { 

      BufferedImage img=ImageIO.read(new File("/root/Desktop/project","Screenshot.png")); 
      //the string is written into a json file 
      try 
      { 
       FileWriter wr=new FileWriter("/root/Desktop/project/code/json/imagepath.jsonp");  
       String ip="/root/Desktop/project/Screenshot.png"; 
       JSONObject imgpath=new JSONObject(); 
       imgpath.put("image1",ip); 
       wr.write(imgpath.toString()); 
       wr.close(); 
      } 
      catch(IOException e) 
      { 
       e.printStackTrace(); 
      } 
     } 
    }

來源

2014-02-28 ambrosia1993

這是在您的本地文件系統或某些服務器上的JSON文件？ –

在我的本地文件系統中 – ambrosia1993

您需要存儲您的JSON文件與.jsonp擴展。在該文件中做寫你的對象是這樣的：

jsonContents = [ {"image1":"\/root\/Desktop\/project\/Screenshot.png"} ];

然後你可以請求文件中<head>這樣的：

<script src="file://path to your jsonp file"></script>

您可以訪問JSON內容爲：

<script> 
    console.log((jsonContents)); 
    var contents = jsonContents; 

    for(var i=0;i<jsonContents.length;i++){ 

     var obj = jsonContents[i]; 
     var imageSrc = obj.image1; 
     console.log(imageSrc); 
     var img = new Image(); 
     img.src = imageSrc; 
     context.drawImage(img,x,y); //context = your context variable 

    } 

</script>

來源

2014-02-28 06:13:05

我使用java代碼創建了json文件 – ambrosia1993

您不能在Java代碼中更改該結構嗎？因爲由於相同的原始策略，您將無法訪問本地文件系統中的JS文件。您必須將其部署在Web服務器中或使用JSONP回調。 –

是jsonContents是一個JSONArray嗎？我應該在java中創建一個名爲jsonContents的JSONArray並將其存儲在jsonp中？ – ambrosia1993

在html5畫布中顯示圖像？

回答

相關問題