locked
sharing an image from my canvas using share Contract

    Question

  • sharing image from my canvas using  share Contract

    Hi friends i'm trying to use the sharing  contract in my app but i want to put an image from my canvas
    this is my code

     ondata: function (param) {
                 
                    var canvas = document.getElementById("micanvas");
                    var canvasimagen = canvas.toDataURL("image/png");
                    var contenido = '<img src="' + canvasimagen + '"/>';
                    var htmlformato = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(contenido);
                    var request = param.request;
                    request.data.setHtmlFormat(htmlformato);
                    request.data.properties.title = "Compartiendo mi canvas";
                    request.data.properties.description = "Mi descripcion";
                },

    but  unfortunately  i get this result

    please i hope you can help me

    pd: perdón si no se entiende bien , soy Mexicano y entonces no domino muy bien el ingles


    Saludos desde México DF

    Monday, December 24, 2012 7:30 AM

Answers

  • Hi,

    Please refer to the example as follow:

    //// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
    //// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
    //// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
    //// PARTICULAR PURPOSE.
    ////
    //// Copyright (c) Microsoft Corporation. All rights reserved
    
    (function () {
        "use strict";
        var imageFile;
    
        var page = WinJS.UI.Pages.define("/html/image.html", {
            ready: function (element, options) {
                imageFile = null;
                var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
                dataTransferManager.addEventListener("datarequested", dataRequested);
                document.getElementById("chooseImageButton").addEventListener("click", chooseImage, false);
                document.getElementById("shareButton").addEventListener("click", showShareUI, false);
            },
            unload: function () {
                var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
                dataTransferManager.removeEventListener("datarequested", dataRequested);
            }
        });
    
        function dataRequested(e) {
            var request = e.request;
    
            // Title is required
            var dataPackageTitle = document.getElementById("titleInputBox").value;
            if ((typeof dataPackageTitle === "string") && (dataPackageTitle !== "")) {
                if (imageFile) {
                    request.data.properties.title = dataPackageTitle;
    
                    // The description is optional.
                    var dataPackageDescription = document.getElementById("descriptionInputBox").value;
                    if ((typeof dataPackageDescription === "string") && (dataPackageDescription !== "")) {
                        request.data.properties.description = dataPackageDescription;
                    }
    
                    var streamReference = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
                    request.data.properties.thumbnail = streamReference;
    
                    // It's recommended to always use both setBitmap and setStorageItems for sharing a single image
                    // since the Target app may only support one or the other
    
                    // Put the image file in an array and pass it to setStorageItems
                    request.data.setStorageItems([imageFile]);
    
                    // The setBitmap method requires a RandomAccessStreamReference
                    request.data.setBitmap(streamReference);
                } else {
                    request.failWithDisplayText("Select an image you would like to share and try again.");
                }
            } else {
                request.failWithDisplayText(SdkSample.missingTitleError);
            }
        }
    
        function chooseImage() {
            // Verify that we are currently not snapped, or that we can unsnap to open the picker
            var currentState = Windows.UI.ViewManagement.ApplicationView.value;
            if ((currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped) && !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
                // fail gracefully if we can't unsnap
                WinJS.log && WinJS.log("Cannot unsnap the sample application.", "sample", "status");
                return;
            }
    
            var picker = new Windows.Storage.Pickers.FileOpenPicker();
            picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
            picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
            picker.pickSingleFileAsync().done(function (file) {
                if (file) {
                    // Display the image to the user
                   // document.getElementById("imageHolder").src = URL.createObjectURL(file, { oneTimeOnly: true });
    
                    //add canvas
                    var c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");
                    ctx.fillStyle = "#FF0000";
                    ctx.fillRect(0, 0, 150, 75);
                    var dataUrl = c.toDataURL();
                    document.getElementById("imageHolder").src = dataUrl;
                    // The imageFile variable will be set to shareValue when the user clicks Set
                    imageFile = file;
                    document.getElementById("scenarioOutput").className = "unhidden";
                }
            });
        }
    
        function showShareUI() {
            Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
        }
    })();
    

    More details, please refer to Sharing content source app sample.

    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, December 25, 2012 6:28 AM

All replies

  • Hi,

    Please refer to the example as follow:

    //// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
    //// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
    //// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
    //// PARTICULAR PURPOSE.
    ////
    //// Copyright (c) Microsoft Corporation. All rights reserved
    
    (function () {
        "use strict";
        var imageFile;
    
        var page = WinJS.UI.Pages.define("/html/image.html", {
            ready: function (element, options) {
                imageFile = null;
                var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
                dataTransferManager.addEventListener("datarequested", dataRequested);
                document.getElementById("chooseImageButton").addEventListener("click", chooseImage, false);
                document.getElementById("shareButton").addEventListener("click", showShareUI, false);
            },
            unload: function () {
                var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
                dataTransferManager.removeEventListener("datarequested", dataRequested);
            }
        });
    
        function dataRequested(e) {
            var request = e.request;
    
            // Title is required
            var dataPackageTitle = document.getElementById("titleInputBox").value;
            if ((typeof dataPackageTitle === "string") && (dataPackageTitle !== "")) {
                if (imageFile) {
                    request.data.properties.title = dataPackageTitle;
    
                    // The description is optional.
                    var dataPackageDescription = document.getElementById("descriptionInputBox").value;
                    if ((typeof dataPackageDescription === "string") && (dataPackageDescription !== "")) {
                        request.data.properties.description = dataPackageDescription;
                    }
    
                    var streamReference = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
                    request.data.properties.thumbnail = streamReference;
    
                    // It's recommended to always use both setBitmap and setStorageItems for sharing a single image
                    // since the Target app may only support one or the other
    
                    // Put the image file in an array and pass it to setStorageItems
                    request.data.setStorageItems([imageFile]);
    
                    // The setBitmap method requires a RandomAccessStreamReference
                    request.data.setBitmap(streamReference);
                } else {
                    request.failWithDisplayText("Select an image you would like to share and try again.");
                }
            } else {
                request.failWithDisplayText(SdkSample.missingTitleError);
            }
        }
    
        function chooseImage() {
            // Verify that we are currently not snapped, or that we can unsnap to open the picker
            var currentState = Windows.UI.ViewManagement.ApplicationView.value;
            if ((currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped) && !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
                // fail gracefully if we can't unsnap
                WinJS.log && WinJS.log("Cannot unsnap the sample application.", "sample", "status");
                return;
            }
    
            var picker = new Windows.Storage.Pickers.FileOpenPicker();
            picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
            picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
            picker.pickSingleFileAsync().done(function (file) {
                if (file) {
                    // Display the image to the user
                   // document.getElementById("imageHolder").src = URL.createObjectURL(file, { oneTimeOnly: true });
    
                    //add canvas
                    var c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");
                    ctx.fillStyle = "#FF0000";
                    ctx.fillRect(0, 0, 150, 75);
                    var dataUrl = c.toDataURL();
                    document.getElementById("imageHolder").src = dataUrl;
                    // The imageFile variable will be set to shareValue when the user clicks Set
                    imageFile = file;
                    document.getElementById("scenarioOutput").className = "unhidden";
                }
            });
        }
    
        function showShareUI() {
            Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
        }
    })();
    

    More details, please refer to Sharing content source app sample.

    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, December 25, 2012 6:28 AM
  • thanks a lot of

    Saludos desde México DF

    Friday, December 28, 2012 3:06 AM