locked
Drawing an Image from temp file.

    Question

  • Hello,

    I am trying to load a file from my temporary application folder, and draw it in a canvas element. I have verified that the file is in the directory and is readable, (I am able to navigate to it, and open it). But when I try to create a new Image using javascript and embed it in a canvas, I get a TypeMismatchError. Here is my code:

    var img = new Image();
    img.src = "ms-appdata:///temp/tempform.gif";
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.drawImage(img, 0, 0); 


    Tuesday, October 02, 2012 10:09 PM

Answers

  • I was able to figure out my own question. I solved it by setting the data as an image element's src attribure as follows:

    this.tempFolder.getFileAsync("tempform.gif").then(function (file) {
    
    		  document.getElementById("temp_image_storage").src = window.URL.createObjectURL(file, { oneTimeOnly: true });
    		        var canvas = document.createElement("canvas");
    		        var ctx = canvas.getContext("2d");
    
    		        ctx.drawImage(document.getElementById("temp_image_storage"), 0, 0);
    
    });


    • Edited by Jlange88 Tuesday, October 02, 2012 11:05 PM
    • Marked as answer by Jlange88 Tuesday, October 02, 2012 11:05 PM
    Tuesday, October 02, 2012 11:04 PM

All replies

  • I was able to figure out my own question. I solved it by setting the data as an image element's src attribure as follows:

    this.tempFolder.getFileAsync("tempform.gif").then(function (file) {
    
    		  document.getElementById("temp_image_storage").src = window.URL.createObjectURL(file, { oneTimeOnly: true });
    		        var canvas = document.createElement("canvas");
    		        var ctx = canvas.getContext("2d");
    
    		        ctx.drawImage(document.getElementById("temp_image_storage"), 0, 0);
    
    });


    • Edited by Jlange88 Tuesday, October 02, 2012 11:05 PM
    • Marked as answer by Jlange88 Tuesday, October 02, 2012 11:05 PM
    Tuesday, October 02, 2012 11:04 PM
  • I tried your code with two little additions 1)tempFolder -- just to check with debugger if am having box1.png sample in the right folder 2) added document.body.appendChild in the end. The image showed up fine while running the app. Can you elaborate where you get the TypeMismatchError exactly?

    var img = new Image();
    img.src = "ms-appdata:///temp/box1.png"
    var tempFolder = Windows.Storage.ApplicationData.current.temporaryFolder;
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");                
    ctx.drawImage(img, 0, 0);
    document.body.appendChild(canvas);

    Tuesday, October 02, 2012 11:49 PM
  • I was getting the error on the line "ctx.drawImage(img, 0, 0);" I think it may have something to do with drawing a .gif file. Can you try your sample with a .gif file? 
    Wednesday, October 03, 2012 4:10 PM