Earlier I used something like this (html5+javascript):
var img;
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
context.drawImage(img,0,0);
};
img.src = "maze.png";
Now I learn Haxe (platform-javascript) and can't write this code in accordance with js-libraries. I've found examples only for vector drawing.
Thanks!
It's quite possible to port that code to javascript; to find javascript classes in the Haxe API, just search them on api.haxe.org. In this case, the Image class is js.html.Image. Here is a basic example of image drawing: view example on try.haxe
var canvas = js.Browser.document.createCanvasElement();
canvas.width = 400;
canvas.height = 400;
js.Browser.document.body.appendChild(canvas);
var ctx = canvas.getContext2d();
var img = new js.html.Image();
img.onload = function() {
ctx.drawImage(img,0,0);
};
img.src = "http://dreamicus.com/data/maze/maze-02.jpg";
Alternative libraries exist that make this easier and more cross platform. You are not using the full haxe ecosystem to it's full if you are just writing code to get compiled to javascript - libraries such as kha and phaser will let you draw an image using a standard API that will let you target any platform.
You can port the exact code to Haxe:
https://try.haxe.org/#a7287
import js.Browser.*;
import js.html.*;
class Test {
static function main() {
var img;
window.onload = function() {
var canvas:CanvasElement = cast document.getElementById("myCanvas");
var context = canvas.getContext2d();
img = document.createImageElement();
img.onload = function() {
context.drawImage(img,0,0);
};
img.src = "maze.png";
}
}
}
Related
I started a simple project in javascript a few days ago and found this issue. Every time I reload my google-page i get an empty canvas. I have already tried to take out the drawImage() function out of class and it worked. But what if I need to use that function as a class method? (Also I've already tried passing the canvas as an argument of the draw method but it doesn't work)
So this is working but I don't need it
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
var img = new Image()
img.src = 'some source'
ctx.drawImage(img,10,10)
And this isn't working but supposed to
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
class Person
{
constructor(name){
this.name = name
this.img = new Image()
this.img.src = 'some source'
}
draw(){
ctx.drawImage(this.img,10,10)
}
}
var peter = new Person('Peter Griffin')
peter.draw()
The reason is simple. Your image is not loaded when you want to draw it.
You have to wait until the image is loaded before drawing it in the canvas.
const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')
class Person
{
constructor(name){
this.name = name;
this.img = new Image()
this.img.src = 'monimage.jpg'
}
on_image_loaded(f) {
this.img.onload = f;
}
draw(){
ctx.drawImage(this.img,10,10)
}
}
var peter = new Person('Peter Griffin')
peter.on_image_loaded(function() {
peter.draw();
});
So I was trying to draw animgin a canvas I tried everything but in the console it says img is not a property or something like that I don't remember so can anyone help?
Here's the js
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
c.beginPath();
var img = new image()
img.src = "flappy_bird_bird.png"
img.onload = function(){
c.drawImage(img, 100, 100)
}
}
Edit
Thx to mhkanfer "sorry if the name is wrong" I fixed it
You were mostly right, though their are a couple of things:
Make sure Image() is capitalized
Make sure your image src file actually exists in that directory
And make sure your canvas has a width and height, if you haven't specified that anywhere, you canvas wont be shown
If you were to revise this, it would look something like:
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
canvas.width = canvas.height = 200;
var img = new Image()
img.src = "example.png"
img.onload = function(){
c.drawImage(img, 0, 0)
}
}
I'm trying to use the Incode functionality to resize an image in LogicApps.
I'm not sure if this is possible with the absence of HTML.
var inputImage = workflowContext.actions.GetFileContent.outputs.body.$content;
function resize_image(imagesrc)
{
let image = new Image();
var base = "data:image/png;base64,";
image.src = base.concat(imagesrc);
image.onload = () => {
let width = image.width;
let height = image.height;
let canvas = document.createElement('canvas');
canvas.width = newWidth ;
canvas.height = newHeight;
let context = canvas.getContext('2d');
context.drawImage(image, 450, 0, newWidth-500, newHeight);
}
return image;
}
return resize_image(inputImage);
The error I receive
The inline code action 'JavaScriptCode' execution failed, with error 'Image is not defined'.
$content is the image in Base64, for example, starts like this:
iVBORw0KGgoAAAANSUhEUgAACFwAAAMMCAYAAABkSiF3...
Inline code can only perform some simple JavaScript operations, it may not be able to install canvas.
You can create an Azure Function App to resize your image.
For more details, you can refer to Call functions from Azure Logic Apps.
I'm getting an image file from an input element, which I then catch in a vanilla javascript snippet via e.target.files[0]. Next, I'm attempting to standardize the dimensions of this image (in case it exceeds the benchmarks) via passing e.target.files[0] to source_img in the function below:
function process_img(source_img,new_width, new_height, mime_type, quality){
var canvas = document.createElement('canvas');
canvas.width = new_width;
canvas.height = new_height;
var ctx = canvas.getContext("2d");
ctx.drawImage(source_img, 0, 0, new_width, new_height);
return dataURItoBlob(canvas.toDataURL(mime_type,quality/100),mime_type);
}
function dataURItoBlob(dataURI,mime_type) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); }
return new Blob([ab], { type: mime_type });
}
This is currently giving me the following error:
TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not
be converted to any of: HTMLImageElement, HTMLCanvasElement,
HTMLVideoElement, ImageBitmap.
My question is two-fold:
1) Why am I getting the error and what's the most efficient way to solve it?
2) What's the most efficient way to accomplish this image resizing/processing? E.g. ways to circumvent the base64 string (while ensuring cross-browser compatibility)? Essentially I want to know how the industry pros do it for scalable projects.
I'd prefer answers with illustrative examples (along with explanations).
Note: Professional server-side dev here who's a JS newbie. Let's stick to pure JS for the scope of this question. JQuery's on my radar, but I won't touch it till I learn JS fundamentals.
question 1:change your process_img function to this:
function process_img(source_img, new_width, new_height, mime_type, quality) {
var canvas = document.createElement('canvas');
canvas.width = new_width;
canvas.height = new_height;
var ctx = canvas.getContext("2d");
var reader = new FileReader();
var img = document.createElement('img');
reader.onload = function() {
img.src = this.result;
document.body.appendChild(img); //maybe
img.style.display = 'none'; //maybe
img.onload = function() {//better
ctx.drawImage(img, 0, 0, new_width, new_height);
return dataURItoBlob(canvas.toDataURL(mime_type, quality / 100), mime_type);
};
};
reader.readAsDataURL(source_img);
}
the principle is transform your imageFile to HTMLimgElement with src by FileReader;
I wrote a simple libraryless rotozoomer for html5-canvas, and I'm wondering what is the correct way to let image load to canvas before using getImageData?
var hc = document.getElementById("hiddenCanvas"); var hctx = hc.getContext("2d"); // Hidden canvas for imageload (hctx)
var imageObj = new Image(); imageObj.onload = function() { hctx.drawImage(this, 0, 0); }; imageObj.src = 'img/8.jpg';
alert("Click to start");
// This alert needs to be replaced with "hold-the-script-until-image-is-fully-loaded" or the image_data will be nothing but black.
var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);
function loop()
{ ...
The code works with the alert, because it causes the required "break" for loading the image. I wish not to use JQuery nor Ajax.
Here I use imageObj.onload directly at drawing on canvas. Probably not the right way?
Thanks in advance for the feedback and the solution.
You should put
var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);
inside imageObj.onload function