Could someone please point me to a tutorial/page that will explain how to view a binary image from a database (or if its simple please tell me)?
I'm using cshtml and can query the database but the image part has got me stumped.
Thank you
I found a way and hope this helps anyone with the same question.
I created a querySingle to return my image binary data in 'var=file'.
I then created the following string variables:
string imageBase64 = Convert.ToBase64String(file.FileContent);
string imageSrc = string.Format("data:image/png;base64,{0}", imageBase64);
*FileContent being my binary data.
And finally created the img:
<img src="#imageSrc" alt="#file.FileName" />
Please up-mark if you find this helpful.
I use this in foto.cshtml Razor
I have fotos and thumbnails in he database. This is for the thumbnails.
#{
// Cache the image for a minute
Response.OutputCache(60);
var fotoId = UrlData[0].AsInt();
var db = Database.Open("albums");
var foto = db.QuerySingle("SELECT * FROM Fotos WHERE Id = #0", fotoId);
if (foto == null){
Response.Redirect("~/");
}
new WebImage(foto.Mini).Write();
//Geef maximale breedte en hoogte aan
//var width = 120;
//var height = 60;
//var image = new WebImage(foto.Mini);
//image.Write();//Or image.Resize(width, height).Write();
}
Related
I wrote a script to add an image from my Google Drive and some custom text to a Google Doc. (I got the image insertion code from here).
The resulting document is created ok, but my image is added twice for some reason...
function myFunction(e) {
var doc = DocumentApp.create('fileTest');
var body = doc.getBody();
var matchedFiles = DriveApp.getFilesByName('logo.png');
if (matchedFiles.hasNext()) {
var image = matchedFiles.next().getBlob();
var positionedImage = body.getParagraphs()[0].addPositionedImage(image);
}
body.appendParagraph('Test line of text for testing');
doc.saveAndClose();
}
However, if I get rid of my appendParagraph code (body.appendParagraph(t1);) I only get one image (but obviously without the paragraph of text I want)
What's going on here? And how do I add both one picture and my paragraph of text?
I have not even the slightest clue as to why, but I found a way to make this work.
Switching the order of my code seemed to do the trick. I simply moved the image-insertion code to the end (i.e., after the appendParagraph code), and it worked fine. No duplicate image!
function myFunction(e) {
var doc = DocumentApp.create('fileTest');
var body = doc.getBody();
body.appendParagraph('Test line of text for testing');
var matchedFiles = DriveApp.getFilesByName('logo.png');
if (matchedFiles.hasNext()) {
var image = matchedFiles.next().getBlob();
var positionedImage = body.getParagraphs()[0].addPositionedImage(image);
}
doc.saveAndClose();
}
I use AS3 flash. Can someone help me? I want that if you press the save_image button, then it saves "guy" movieclip as png. But It's not work:
import com.adobe.images.JPGEncoder;
import com.adobe.images.PNGEncoder
save_image.addEventListener(MouseEvent.CLICK, save_image_function);
function save_image_function(event:MouseEvent):void
{
var bmd:BitmapData = new BitmapData(50,50);
bmd.draw(guy);
var encorder:PNGEncoder = new PNGEncoder();
var bytes:ByteArray = encorder.encode(bmd);
var file:FileReference = new FileReference();
file.save( bytes, "Image.png" );
}
Can someone help me? The error code is this:
ReferenceError: Error #1069: Property encode not found on com.adobe.images.PNGEncoder and there is no default value.
at pr2sets_fla::MainTimeline/save_image_function()
The encode method is static, you need to call it this way.
var bytes:ByteArray = PNGEncoder.encode( bmd );
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").innerHTML = img;
}
Test 1 works and shows the image, but test 2 doesn't. I am not sure how to solve it but i will need the way test 2 works further along my project since i'm going to have to circle through a large amount of images.
The images are created by JFreeCharts, saved to png and then have to be posted to a site. As a side question: is it possible to push the freecharts objects straight to the jscript instead of having to save them prior (i could throw them into the dictionary and then look them up later but i'm not sure if this works)
Use .appendChild(img) instead of .innerHTML:
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").appendChild(img);
}
Demo
This is because img is an image object, not an html string, so you have to append it to the DOM.
P.S., don't forget that the alt attribute is required in the img tag!
I am working on a project which generates an image on the HTML Canvas, and then offers to download the image as a PNG.
The program has to be clientside (javascript).
I can convert the canvas to image by using
var canvas=document.getElementById('canvas');
var img = canvas.toDataURL("image/png;base64");
And the code that is supposed to download the picture is:
var container = document.querySelector('#container2');
//container2 is a div in HTML
var output = container.querySelector('output');
//output is inside container2
window.URL = window.webkitURL || window.URL;
var prevLink = output.querySelector('a');
if (prevLink) {
window.URL.revokeObjectURL(prevLink.href);
output.innerHTML = '';}
//removes the download link if already there
var bb = new Blob([img], {data: "image/png;base64"});
//creates new blob from the img variable
var a = document.createElement('a');
a.download = 'test' + '.png';
//file name
a.href = window.URL.createObjectURL(bb);
//create URL from blob
a.textContent = 'Click here for download';
a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':');
output.appendChild(a);
This works perfectly if the blobvariable is a string of text instead of the "img" variable. Instead of an image, I get af corrupted .png file which, opened in notepad gives data:image/png;base64,iVBORw0KGgoAAAANSUhEU...(long string of base64 letters), which is the correct string, but apparantly not good for PNG images. But if I write
document.write('<img src="'+img+'"/>');
The image is opened correctly in a new tab.
How can i make the downloaded image uncorrupted?
(it seems impossible to download the data generated by Canvas2image )
looks like you need to convert the base64 string back to a blob. here's how:
Base64 encoding and decoding in client-side Javascript
The document.write might work on some browsers, if they are able to handle base64 natively.
The other problem is that JavaScript usually works with string, but to download the file you need something like a ByteArray. Here's an implementation, I've found: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js
That's how I got it working then:
var ab = Base64Binary.decodeArrayBuffer(img.substring(22));
var bb = new Blob([ab]);
var a = document.createElement('a');
a.download = 'test' + '.png';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Click here for download';
output.appendChild(a);
I am using RadMosaicTile in my windows store application. I want to bind images with it.
I tried this
RadMosaicHubTile tile = new RadMosaicHubTile();
tile.ImageSources.Add("Image1.jpg");
tile.ImageSources.Add("Image2.jpg");
but it is not working. images are not binded.
Can anyone help me?
Thanks.
The have this code sample on the telerik forum - does this work for you?
Collection<object> imageSources = new Collection<object>();
ImageSource image = GetImageFromWeb();
imageSources.Add(image);
RadMosaicHubTile hubTile = new RadMosaicHubTile();
hubTile.CreateImageSource = (source) =>
{
return (ImageSource)source;
};
hubTile.ImageSources = imageSources;