In the code below $('#initialModel') is a button which opens up a file loader and $('#initialModelImage') is my canvas and am trying to load the image dynamically on to the canvas from the file uploader ,but am not able to see the uploaded image on the canvas.Could someone help me correct my code.Thanks.
$('#initialModel').on('change',function(e){
var modelFile=document.querySelector('#initialModel').files[0];
var reader=new FileReader();
if (modelFile)
reader.readAsDataURL(modelFile);
else
$('#initialModelImage').src = "";
reader.onloadend = function (_file)
{
var canv=document.getElementById("initialModelImage");
var ctx = canv.getContext('2d');
ctx.drawImage(reader.result,640,480);
}
});
Related
I am using vue2 in my project. I have an img tag which i have added crossorigin = "anonymous" to it.
I need to use canvas to print screen from a video in a specific time and show it. After I draw the image when I try to assign canvas.datatourl() to my img tag src, I get the error which you can see in title.
I searched the whole internet. All solutions were to put crossorigin="anonymous" and the problem would be solved. I tried this (as I said inside img tag or the moment before I assign canvas.datatourl() to my img tag src) but I still get this error. This is my img tag:
<img id="imgeBeforeMainVideo" class="beforeMainVideo" crossorigin="anonymous"/>
and this is my screen shot function:
var video = document.getElementById(videoId);
var w = video.videoWidth;
var h = video.videoHeight;
var canvas2 = document.createElement("canvas");
canvas2.width = w;
canvas2.height = h;
document.getElementById("imgeBeforeMainVideo").crossorigin = "anonymous";
var ctx = canvas2.getContext("2d");
ctx.drawImage(video, 0, 0, canvas2.width, canvas2.height);
let image = canvas2.toDataURL("image/jpeg")
document.getElementById("imgeBeforeMainVideo").src = image;
I've been using TuesPechkin to create images of some HTML code from my application.
I'e been using the following code successfully when using HTML, but if I try to load ASPX files instead, the code doesn't work.
var htmlDocument = File.ReadAllText(#"C:\Dev\Git\Groups\viz\slides\Slide menu\003#Survey\form.aspx");
var document = new HtmlToImageDocument
{
ScreenHeight = 350,
ScreenWidth = 500,
Format = "png",
LoadSettings = new LoadSettings { WindowStatus = settings.WindowStatus ?? "load-complete" },
In = htmlDocument
};
IConverter converter =
new StandardConverter(
new ImageToolset(
new Win32EmbeddedDeployment(
new TempFolderDeployment())));
var resultBytes = converter.Convert(document);
I have even tried to read the HTML to string and load that, but it is not working.
I am using TuesPechkin version 2.1.1.
I am creating a camera app for the Windows Phone but when I want to retrieve my saved photo as a BitmapImage, nothing seems to work. I am using IsolatedStorageSettings to save the path of the images as shown below:
Picture p = mediaLibrary.SavePictureToCameraRoll(fileName, e.ImageStream);
if (!settings.Contains("lastImageTaken"))
{
//GetPath() requires using Microsoft.Xna.Framework.Media.PhoneExtensions;
settings.Add("lastImageTaken", p.GetPath());
}
else
{
settings["lastImageTaken"] = p.GetPath();
}
settings.Save();
then once the app starts up, I try to retrieve that last photo taken as shown below:
lastImageTaken = IsolatedStorageSettings.ApplicationSettings["lastImageTaken"] as string;
Uri uri = new System.Uri(lastImageTaken, UriKind.RelativeOrAbsolute);
BitmapImage image = new BitmapImage(uri);
previouseImage.Source = image;
if (image.PixelWidth < 1)
debugText.Text += " FAILED";
I have also tried something like this:
Uri uri = new System.Uri("file:///" + lastImageTaken.Replace("\\", "/"), UriKind.RelativeOrAbsolute);
BitmapImage image = new BitmapImage(uri);
but nothing seems to display the image. The width of to image always is shown as 0 which displays a "FAILED" text on a debug text. lastImageTaken is shown as C:\Data\Users\Public\Camera Roll\SMCA_jpg.jpg
I have also added the capabilities of ID_CAP_MEDIALIB_PHOTO
It seems that you are saving the image to CameraRoll, but trying to retrieve image from IsolatedStorage. Those are two different storage areas, and they are accessed differently.
In order to save an image to IsolatedStorage you need to replace this :
library.SavePictureToCameraRoll(fileName, e.ImageStream);
with this :
using (IsolatedStorageFile isStore = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream targetStream = isStore.OpenFile(fileName, FileMode.Create, FileAccess.Write))
{
// Initialize the buffer for 4KB disk pages.
byte[] readBuffer = new byte[4096];
int bytesRead = -1;
// Copy the image to the local folder.
while ((bytesRead = e.ImageStream.Read(readBuffer, 0, readBuffer.Length)) > 0)
{
targetStream.Write(readBuffer, 0, bytesRead);
}
}
}
Then access the image the same way you've described in your original post.
Source : http://msdn.microsoft.com/en-us/library/windows/apps/hh202956(v=vs.105).aspx#BKMK_SavingToTheMediaLibraryAndIsolatedStorage
I want to put an image from SQLite but the code below does't work:
var imageView = Ti.UI.createImageView({
image:services.fieldByName('image')
});
do this to convert the blob to a string before saving it
var stringToSaveInDatabase = Ti.Utils.base64encode(thumbBlob).toString();
when you are ready to add it to a view, do this
var imageBlob = Ti.Utils.base64decode(stringRetrievedFromDatabase);
Ti.UI.createImageView({ image:imageBlob });
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.Utils-method-base64encode
I'm trying to create IconicTile using image saved on isolated storage.
At first, I saved image to isolated storage.
// bitmap is Stream of image source (e.g. from PhotoChooserTask)
var wbmp = new WriteableBitmap(bitmap);
var file = "Shared/ShellContent/IconicTile.png";
// when file exists, delete it
if (storage.FileExists(file))
{
storage.DeleteFile(file);
}
using (var isoFileStream = new IsolatedStorageFileStream(file, FileMode.Create, storage))
{
// use ToolStackPNGWriterExtensions
wbmp.WritePNG(isoFileStream);
}
And I have confirmed PNG file is successfully created using Isostorage Explorer Tools.
Then I try to create IconicTile.
var initialData = new IconicTileData
{
BackgroundColor = SelectedColor,
IconImage = new Uri("isostore:/Shared/ShellContent/IconicTile.png", UriKind.Absolute),
Title = tbTitle.Text,
WideContent1 = tbWideContent1.Text,
WideContent2 = tbWideContent2.Text,
WideContent3 = tbWideContent3.Text
};
var uri = string.Format("/SecondaryPage.xaml");
var TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(uri));
if (TileToFind == null)
ShellTile.Create(new Uri(uri, UriKind.Relative), initialData, true);
else
TileToFind.Update(initialData);
But image in the created tile are white.
(I'd like to attach image but my reputation is too low. Sorry.)
I tried not only PNG format but also JPG format, but neither doesn't work.
Is there anyway to create IconicTile using image on IsolatedStorage?
The iconic tile format expects a transparent background, based on your comment at the first line (PhotoChooserTask), I suspect you're using some type of image with no transparency.