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

Answer 1

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.

Answer 2

thanks a lot of

---

Saludos desde México DF