Trying to display image in an HTML5 canvas - javascript

I've tried all code variations that are online. I just want to display an image on a canvas. I've tried code from this site.
window.onLoad=function(){
function draw(){
var ctx = document.getElementById("canvas1").getContext("2d");
var img = new Image();
img.src = 'images/ball.png';
img.onload = function(){
ctx.drawImage(img,0,0);
};
};
};
It's not the file path that's a problem, that has been tested without the images folder. There are no errors in the console. Thanks.

One search in google and there you go with complete jsfiddle example:
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
http://jsfiddle.net/jimrhoskins/Sv87G/

Related

Resize and preview base64 image, javascript

i am a newbie to programming,
I have an HTML code for displaying base64 image the image is dynamic link, always come with different sizes
I need to resize that image and create preview mode with smaller image with an aspect ratio
ex:
my original image on html are 600x300 I need to preview it 300x150
my original image HTML are 1000x500 I need to preview 500x250
I have a javascript for resizing but can't figure out how to get image base64 from my HTML code
Please who can give me some help on these to archive my goal
I cant paste HTMl code here because is to long please check HTMl on codepin
https://codepen.io/Gilavani/pen/JjLXBOb
function resizedataURL(datas, wantedWidth, wantedHeight)
{
// We create an image to receive the Data URI
var img = document.createElement('img');
// When the event "onload" is triggered we can resize the image.
img.onload = function()
{
// We create a canvas and get its context.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// We set the dimensions at the wanted size.
canvas.width = wantedWidth;
canvas.height = wantedHeight;
// We resize the image with the canvas method drawImage();
ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);
var dataURI = canvas.toDataURL();
/////////////////////////////////////////
// Use and treat your Data URI here !! //
/////////////////////////////////////////
};
// We put the Data URI in the image's src attribute
img.src = datas;
}
Thanks you in Advice
Best Regards
let srcImg = document.getElementById("orignal").src;
let prev = document.getElementById("preview");
function resizedataURL(datas, wantedWidth, wantedHeight)
{
prev.src = datas;
prev.onload = function()
{
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = wantedWidth;
canvas.height = wantedHeight;
ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);
prev.src = canvas.toDataURL();
};
}
resizedataURL(srcImg, 150,150);
<html>
<body>
<img id="orignal" src="data:image/png;base64,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">
<h2>Preview</h2>
<img id="preview" src="#">
</body>
</html>

Execute Function After Canvas toDataURL() Function is Complete

I'm converting images to base64 using canvas. What i need to do is convert those images and then show the result to the user (original image and base64 version). Everything works as expected with small images, but when i try to convert large images (>3MB) and the conversion time increases, the base64 version is empty.
This might be is caused because the result is shown before the toDataURL() function is completed.
I need to show the result after all the needed processing has ended, for testing purposes.
Here's my code:
var convertToBase64 = function(url, callback)
{
var image = new Image();
image.onload = function ()
{
//create canvas and draw image...
var imageData = canvas.toDataURL('image/png');
callback(imageData);
};
image.src = url;
};
convertToBase64('img/circle.png', function(imageData)
{
window.open(imageData);
});
Even though i'm using image.onload() with a callback, i'm unable to show the result after the toDataURL() has been processed.
What am i doing wrong?
UPDATE: I tried both the solutions below and they didn't work. I'm using AngularJS and Electron in this project. Any way i can force the code to be synchronous? Or maybe some solution using Promises?
UPDATE #2: #Kaiido pointed out that toDataURL() is in fact synchronous and this issue is more likely due to maximum URI length. Since i'm using Electron and the image preview was for testing purposes only, i'm going to save the file in a folder and analise it from there.
Your code seems absolutely fine. Not sure why isn't working you. Maybe, there are some issues with your browser. Perhaps try using a different one. Also you could use a custom event, which gets triggered when the image conversion is competed.
// using jQuery for custom event
function convertToBase64(url) {
var image = new Image();
image.src = url;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
var imageData = canvas.toDataURL();
$(document).trigger('conversionCompleted', imageData);
};
};
convertToBase64('4mb.jpg');
$(document).on('conversionCompleted', function(e, d) {
window.open(d);
});
This approach might work for you. It shows the image onscreen using the native html element, then draws it to a canvas, then converts the canvas to Base64, then clears the canvas and draws the converted image onto the canvas. You can then scroll between the top image (original) and the bottom image (converted). I tried it on large images and it takes a second or two for the second image to draw but it seems to work...
Html is here:
<img id="imageID">
<canvas id="myCanvas" style="width:400;height:400;">
</canvas>
Script is here:
var ctx;
function convertToBase64(url, callback)
{
var image = document.getElementById("imageID");
image.onload = function() {
var canvas = document.getElementById("myCanvas");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx = canvas.getContext("2d");
ctx.drawImage(image,0,0);
var imageData = canvas.toDataURL('image/png');
ctx.fillStyle ="#FFFFFF";
ctx.fillRect(0,0,canvas.width,canvas.height);
callback(imageData);
};
image.src = url;
};
var imagename = 'images/bigfiletest.jpg';
window.onload = function () {
convertToBase64(imagename, function(imageData) {
var myImage = new Image();
myImage.src = imageData;
ctx.drawImage(myImage,0,0);
});
}
Note that I also tried it without the callback and it worked fine as well...

Add image to HTML5 Canvas from a file

In HTML5 Canvas I am trying to add and image.
The line:
imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
is not correct.
How do I add a file to HTML5 Canvas Image?
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var imageObj = new Image();
imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
imageObj.onload = function () {
context.drawImage(imageObj, centerX, centerY);
};
</script>
The below example will explain how to use relative paths.
Assume the project structure is like this:
project(think of this as root)/
|->index.html
|->css/
|->main.css
|->images/
|-> cartoon.jpg
|->cat.jpg
|->other_pages/
|->about.html
|->contact.html
Now if we are in index.html page and we should set the image src as:
img = new Image();
cat = new Image();
//accessing cat.jpg
cat.src = "cat.jpg";
//accessing cartoon.jpg
img.src = "images/cartoon.jpg";
Now lets move to about.html page, here we can access the images in the following manner:
img = new Image();
cat = new Image();
//accessing cat.jpg
cat.src = "../cat.jpg";
// accessing cartoon.jpg
img.src = "../images/cartoon.jpg";
// here .. signifies moving one step back
//.. is similar to executing **cd ..** in command line.
For absolute path try this:
Right click on the image and open it in browser, copy the path and set it in imageObj.src (you can use this method if you are working in local environment and want to test it out with few of your local images.)
imageObj.src should be a relative path. For example to an image in the same path, if would be something like imageObj.src = 'image1.jpg';
Path is relative to the html file that is running.

Drawing an image onto a canvas in Javascript

I'm looking to draw an image onto a canvas for my HTML page using a separate Javascript file. The HTML I have thus far is fine, my problem seems to lie within the script. This is what I have currently:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var pic = new image();
pic.src="http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg";
pic.addEventListener("load", function(){canvas.drawImage(pic,0,0,x.width,x.height)}, false);
}
window.addEventListener("load", doFirst, false);
Can anyone tell me what I might have done wrong or forgot?
The constructor is Image, not image - capitalization matters!
var pic = new Image();
function doFirst() {
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var pic = new Image();
pic.src = "http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg";
pic.addEventListener("load", function() {
canvas.drawImage(pic, 0, 0, x.width, x.height)
}, false);
}
window.addEventListener("load", doFirst, false);
<canvas id="canvas"></canvas>

Display Image using canvas in JavaScript/jQuery

I have the following code :
function createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function() {
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');
}
pastedImage.src = source;
}
Here I am displaying the image through html image tag which I wrote in document.write and provide appropriate height and width to image.
My question is can it possible to displaying image into the canvas instead of html img tag? So that I can drag and crop that image as I want?
But how can I display it in canvas?
Further I want to implement save that image using PHP but for now let me know about previous issue.
Try This
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image(); // Create new img element
img.onload = function(){
// execute drawImage statements here This is essential as it waits till image is loaded before drawing it.
ctx.drawImage(img , 0, 0);
};
img.src = 'myImage.png'; // Set source path
Make sure the image is hosted in same domain as your site. Read this for Javascript Security Restrictions Same Origin Policy.
E.g. If your site is http://example.com/
then the Image should be hosted on http://example.com/../myImage.png
if you try http://facebook.com/..image/ or something then it will throw security error.
Use
CanvasRenderingContext2D.drawImage.
function createImage(source) {
var ctx = document.getElementById('canvas').getContext('2d');
var pastedImage = new Image();
pastedImage.onload = function(){
ctx.drawImage(pastedImage, 0, 0);
};
pastedImage = source;
}
Also MDN seems to be have nice examples.

Categories