We Keep Coding

I'm trying to display an image from my database, but the image wont populate the src of the img html attribute

I have an image saved to a database by converting to a byte array to a string then i am trying to remake the image on the view. But I wanted to make it for if the image was null(no image upload) that they will get a default "no image" image. But it seems when i try to make an if statement within my view with razor. The img src is not able to find the var in the if statement. The reason i need it to fill the src on the img outside of the if statement is because when i submit the form i need it to send the img data back to the action in the controller to reconvert it and save it on the database.
I trying a view different ways to fix it, the best i can do it make scripts inside my if statement. but it still will not connect to my img src.
<!--Remaking the image from a stromg to a char
array to a byte array to a imagefrom the
database to the original image-->
#if (Model.ImagePath != null)
{
char[] imageChars = Model.ImagePath.ToCharArray();
byte[] imageBytes = imageChars.Select(b => (byte)b).ToArray();
var base64 = Convert.ToBase64String(imageBytes);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
}
else
{
<script>
var img = getElementById("ImagePath");
img.src = "~/Content/no-image-icon.jpg";
getElementById("ImagePath").width = "100";
getElementById("ImagePath").height = "100";
</script>
}
<img id="ImagePath" alt=""/>
when i inspect the page the script has the image converted back into the right format it just wont send it to the img src.

You have:
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
That looks like it is setting img.src.src, which doesn't make sense. That should probably be this, correct? :
<script>
var img = getElementById("ImagePath");
img.src = "#imgSrc";
</script>
And you could also make sure to remove all line breaks:
<script>
var img = getElementById("ImagePath");
var imgSrc = "#imgSrc";
img.src = imgSrc.replace(/[\r|\n]/gm,'');
</script>
Also, as noted by Divya, your image element should come before your script tags, otherwise when you have getElementById("ImagePath");, it won't be able to find that element, since it has not loaded yet.

I figured it out i made a new vareriable in my model and added the string to it in my action that loads the page then just set that as the img src. Thank you for the help tho!

How to load an image generated by an aspx file into html

The following image: http://www.oscn.net/dockets/GetDocument.aspx?ct=tulsa&cn=SC-2011-361&bc=1014242988&fmt=tif
How would I go about downloading this image and displaying it in html using javascript?

Here you go..
If you need to modify any properties of the image (size/color enhancement/etc.) use new_elem.setAttribute('attribute', 'value'); Just like in HTML <img attribute="value" />
var element = document.getElementById('mytargetlocation');
var new_elem = document.createElement('img');
var locationtoimage = 'https://www.sourcecertain.com/img/Example.png';
/*
Note: if your site uses HTTPS, this file will need to be loaded
over HTTPS, if it doesn't, you could just use the original
URL without downloading the image at all
*/
new_elem.setAttribute('src', locationtoimage);
new_elem.setAttribute('alt', 'image not found at specified URL');
element.append(new_elem);
<div id="mytargetlocation"></div>

Preloading img and inserting src into another img without reloading it

I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!

Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine

Download a Html5 canvas element as an image with the file extension with Javascript

I would like to be able to download a Html5 canvas element as an image with the file extension with Javascript.
The CanvasToImage library does not seem to be able to achieve this.
Here is my code so far which you can see at this JsFiddle.
<div id="canvas_container">
</div>
<p>
create
download
</p>
$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});
$("#download_image").click(function() {
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});
function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');
canvas.id = 'smiley_canvas';
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
return canvas;
}

This seems to work for me:
<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

In order to force/suggest a file name in the browser's download dialog, you would need to send the Content-Disposition: attachment; filename=foobar.png header.
This is not possible to do via window.open, so you're out of luck unless there are some browser-specific hacks for this.
If you really need the filename, you could try using the new download attribute in a, <a href="put stuff here" download="filename here">. It isn't very widely supported yet though.
Another alternative would be to first submit the data to the server using ajax, then redirect the browser to some server-side script which would then serve the data with the correct header.

Hi i have created a jquery plugin which will let you do the same task with ease but it also make use of php to download the image. let me explain how it works
Plugin has 2 sub function that you can call independently to add image to the canvas and the other one is to download the current image lying on the canvas.
Add image to the canvas
For this you need to pass the id of the canvas element and the path of the image you want to add
download image from the canvas
For this you need to pass the id of the canvas element
$('body').CanvasToPhp.upload({
canvasId: "canvas", // passing the canvasId
image: "455.jpg" // passing the image path
});
// downloading file
$('#download').click(function(){
$('body').CanvasToPhp.download({
canvasId: "canvas" // passing the canvas id
}); //
});
First you need to download the plugin file which you can find here http://www.thetutlage.com/post=TUT213
I have also created a little demo http://thetutlage.com/demo/canvasImageDownload

How to display image from JavaScript

How to display an image using JavaScript from an array creating in JavaScript.
Any help please?
Thanks.

If you've got an image tag in your HTML layout, with a given id, you can control its content with javascript:
function updateFullImage(id, url) {
var img = document.getElementById(id);
img.src = url ;
}
and the browser (FF at leat) will automatically reload your image

You can create an image in JavaScript: var img = new Image(); img.src = "path-to-image"; and then add it to the DOM (depending on if you're using a js library like jQuery or not this will vary in complexity). Can you be more specific as to your circumstances?