locked
Sharing drawing Canvas not working

    Question

  • I've managed to pull an image from the camera and be able to sketch ink ontop of it using the SDk samples.  Now I'm trying to add a few lines of code to implement the share contract but its telling me there was a problem with CanvasPaint data!  Here's my code that I set up in the onLoad() event. 

    Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView().addEventListener("datarequested", function (e) {
            var data = new Windows.ApplicationModel.DataTransfer.DataPackage();
            data.properties.title = "My work of Art";
            data.properties.applicationName = "DoodleApp";
            data.setBitmap(canvas.msToBlob().msDetachStream());
            e.request.data = data;
        });

    Any help greatly appreciated, this has driven me nuts!!

    Wednesday, May 30, 2012 4:05 AM

Answers

  • DataPackage.setBitmap takes a RandomAccessStreamReference as it's argument, while blob.msDeatchStream() only provides a RandomAccessStream, so you'll need to do this: 

    Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView().addEventListener("datarequested", function (e) {
        var canvas = document.querySelector("canvas");
        var data = new Windows.ApplicationModel.DataTransfer.DataPackage();
        data.properties.title = "My work of Art";
        data.properties.applicationName = "DoodleApp";
        data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromStream(canvas.msToBlob().msDetachStream()));
        e.request.data = data;
    });
    

    Thursday, May 31, 2012 12:54 PM

All replies

  • I have the similar problem.

    As a workaround, I save the canvas image to file then read the file for sharing.

    It works, but I still want to know how to do that directly.

     

    woodhead is as woodhead does

    Wednesday, May 30, 2012 4:13 AM
  • Would you be able to post the save code?  Agreed that would work as a workaround until someone can show us how to do it directly

    Wednesday, May 30, 2012 4:15 AM
  • Here is it:

    var dataURI = canvas.toDataURL();
    var byteString = dataURI.split(',')[1];
    var buf = Windows.Security.Cryptography.CryptographicBuffer.decodeFromBase64String(byteString);
    var applicationData = Windows.Storage.ApplicationData.current;
    var localFolder = applicationData.localFolder;
    localFolder.createFileAsync("temp.png", Windows.Storage.CreationCollisionOption.replaceExisting)
    .then(function (file) {
    	return Windows.Storage.FileIO.writeBufferAsync(file, buf);
    });



    woodhead is as woodhead does

    Wednesday, May 30, 2012 4:22 AM
  • DataPackage.setBitmap takes a RandomAccessStreamReference as it's argument, while blob.msDeatchStream() only provides a RandomAccessStream, so you'll need to do this: 

    Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView().addEventListener("datarequested", function (e) {
        var canvas = document.querySelector("canvas");
        var data = new Windows.ApplicationModel.DataTransfer.DataPackage();
        data.properties.title = "My work of Art";
        data.properties.applicationName = "DoodleApp";
        data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromStream(canvas.msToBlob().msDetachStream()));
        e.request.data = data;
    });
    

    Thursday, May 31, 2012 12:54 PM