如何从HTML或Javascript for Windows Phone访问图像文件

Question

我在wp8中有一个要求，用户选择的图片需要在浏览器中显示。 要浏览并选择照片，我正在使用照片选择器任务。

我能够获得所选图像的物理位置，但是在从c＃传递给JavaScript时它不显示图像。

在谷歌搜索遇到以下链接如何从HTML或Javascript访问Windows Phone和PhoneGap应用程序的隔离存储文件但它没有解决我的问题。

作为参考，我使用的图像的位置是：

C：\\数据\\用户\\ DefApps \\应用程序数据{FA586990-6E21-0130-BF9E-3C075409010C} \\本地\\ sample_photo_00.jpg

这是我的Javascript代码：

function myPicture(data) {
    document.getElementById("capturedImage").src = data.imageUri;
    alert("data.imageUri   " + document.getElementById("capturedImage").src );
    var width = data.imageWidth;
    var height = data.imageHeight;

    alert("image width" + width );
    alert("image height" + height );
}

这是我的C＃代码：

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
string[] picList = Directory.GetFiles(localFolder.Path, "*.jpg");

foreach (string DeleteFile in picList) { 
    File.Delete(DeleteFile); 
}

StorageFile storageFile = await localFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
using (Stream outputStream = await storageFile.OpenStreamForWriteAsync())
{
    await file.CopyToAsync(outputStream);
}

send (storageFile.Path);

现在send函数应该在图片中添加MyHTML。

Answer 1

您可以通过WebBrowser.InvokeScript从C＃调用JavaScript函数，并在args参数中发送图像。 但是args是字符串，所以你必须使用一些算法将你的图像编码为字符串...例如Base64：

string ImageToBase64String(Image image)
{
    using (MemoryStream stream = new MemoryStream())
    {
        image.Save(stream, image.RawFormat);
        return Convert.ToBase64String(stream.ToArray());
    }
}

你会得到一些像这样的长字符串iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

另一方面 - 在您调用的JavaScript函数中，您将获得该Base64字符串并将其用作img元素的src属性：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />

有关数据uri scheme的更多信息。

更新 ：更简单的解决方案。 我想你可以发送你的图像路径，宽度和高度：

ImageProperties properties = await storageFile.Properties.GetImagePropertiesAsync();
webBrowser.InvokeScript("myPicture", storageFile.Path, (string)properties.Width, (string)properties.Height);

---

function myPicture(src, width, height) {
    document.getElementById("capturedImage").src = src;
    alert("data.imageUri   " + document.getElementById("capturedImage").src );

    alert("image width" + width );
    alert("image height" + height );
}