So I have the following problem: I want my JavaScript to reload an image from my desktop so quickly that the picture in the browser changes as soon as I change/edit the picture on my desktop. It works as intended for maybe the first two times, but then I have to wait a couple of seconds before the picture on my browser changes to the new picture I have on my desktop.
As it's using the same URL, I have a cache breaker so that the browser always loads the new image and I specified at the top as a header that the cache shouldn't store the image, so the browser always checks the image on my desktop. What am I doing wrong? Why isn't it working as intended?
<html>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<title>JavaScript Refresh Example</title>
</head>
<body>
<canvas id="canvas" width="2000" height="2000"/>
<script type="text/JavaScript">
var img = new Image();
var time = new Date();
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
}
function refreshImage() {
var timestamp = new Date().getTime();
var queryString = "?t=" + timestamp;
return "Bild1.jpg" + queryString;
}
function Animate() {
window.requestAnimationFrame(Animate);
draw();
img.src = refreshImage();
}
img.onload = function () {
Animate();
}
img.src = refreshImage();
</script>
</body>
</html>
Related
I need help with my script. I'm trying to generate a code that shows the text in an image and I found the library Tessereact.js, but when the use shows me this error (screenshot):
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
</head>
<body>
<img src="img/ley.jpg"/>
<script>
var img = document.getElementsByTagName("img")[0];
Tesseract.recognize(img, function(result) {
console.log(result);
});
</script>
</body>
</html>
I need to please help, I am very interested in completing this project...
Thank you!
Your image img/ley.jpg by right would be loaded into a canvas by tessereact.js to process further. However, due to the CORS policy, the canvas is "tainted" (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
You can work around this by setting the crossOrigin of the image element to Anonymous provided that the server that hosts the image returns Access-Control-Allow-Origin "*" in the header.
Here is the working code
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var src = "https://i.imgur.com/FkLGnxH.png";
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
Tesseract.recognize(ctx)
.then(function(result) {
document.getElementById("result")
.innerText = result.text;
});
}
img.src = src;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
</head>
<body>
<span id="result"></span>
</body>
</html>
https://jsbin.com/comulejaqa/edit?html,js,output
I have create 2 canvas, load two differnt image and I want to merge both canvas and then display it as image in <div id="test"></div> tag.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas to image</title>
</head>
<body>
<div>
<canvas id="card_canvas" width="800" height="500"></canvas>
<canvas id="card_canvas2" width="800" height="500"></canvas>
</div>
<div id="test"></div>
<button onclick="canvasToImage()">canvas to image</button>
<script>
var img1 = new Image();
img1.src = "images/img1.jpg";
var cuimg;
function canvasToImage(){
var canvass1 = document.getElementById("card_canvas");
var canvass2 = document.getElementById("card_canvas2");
var ctx1 = canvass1.getContext('2d');
var ctx2 = canvass2.getContext('2d');
ctx1.drawImage(img1, 0, 0);
cuimg = new Image();
cuimg.onload = function(){
ctx2.drawImage(cuimg, 7, 92);
}
cuimg.src = "images/img2.jpg";
ctx1.drawImage(canvass2, 0, 0);
var imgdata = canvass1.toDataURL('image/png');
var mergeimg = document.createElement("img");
mergeimg.src = imgdata;
document.getElementById("test").appendChild(mergeimg);
}
</script>
</body>
</html>
Here is img1.jpg:
Here is img2.jpg:
This code ends up in displaying only background image:
I am expecting:
This can be achieve by simply setting following style on canvas2:
<canvas id="card_canvas2" style="position:absolute; left:0px; top:0px;"></canvas>
https://jsfiddle.net/jkjqd7gz/
I've been fiddling with your code a bit, and I think I've figured out the issue. javascript has a funny execution order at times that most people aren't aware of. Your onload lambda function is causing some of the issues your experiencing. Basically, you need to move your ctx1.drawImage(canvass2, 0, 0); line inside your lambda function just after ctx2.drawImage(cuimg, 7, 92); To understand what I mean open your code and hit the canvas to image button twice. The first time populates both canvasses, the second time puts the contents of canvass2 onto canvass1. I could probably explain exactly what's happening in terms of order of execution, but the explanation involves some difficult to understand concepts regarding parallelism, swap buffers, and race conditions.
To put it in a nutshell, whatever function you call ctx2.drawImage in, you need to then follow it with ctx1.drawImage. Honestly though, the best way to make composite images is to create a sprite class that stores an image, its postion, and layer information if desired. Then use a dynamic array to store the sprites. Always clear the canvas every time before you draw on it and loop through the contents of your arrays drawing each sprite in layer order on its respective canvass. Finally, I would use one set of functions to populate the canvas and a second to merge them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas to image</title>
</head>
<body>
<div>
<canvas id="card_canvas" width="800" height="500"></canvas>
<canvas id="card_canvas2" width="800" height="500"></canvas>
</div>
<div id="test"></div>
<button onclick="popCanvas()">Populate Canvasses</button>
<button onclick="canvasToImage()">Canvas Combine</button>
<script>
var img1 = new Image();
img1.src = "images/img1.jpg";
var cuimg = new Image();
var canvass1 = document.getElementById("card_canvas");
var canvass2 = document.getElementById("card_canvas2");
function popCanvas(){
var ctx1 = canvass1.getContext('2d');
var ctx2 = canvass2.getContext('2d');
ctx1.clear()
ctx2.clear()
ctx1.drawImage(img1, 0, 0);
cuimg.onload = function(){
ctx2.drawImage(cuimg, 7, 92);
}
cuimg.src = "images/img2.jpg";
}
function canvasToImage(){
var ctx1 = canvass1.getContext('2d');
var ctx2 = canvass2.getContext('2d');
ctx1.drawImage(canvass2, 0, 0);
var imgdata = canvass1.toDataURL('image/png');
var mergeimg = document.createElement("img");
mergeimg.src = imgdata;
document.getElementById("test").appendChild(mergeimg);
}
</script>
</body>
</html>
Haxe/OpenFL code:
import openfl.net.URLRequest;
import openfl.Lib;
Lib.getURL (new URLRequest (url), "_self");
// Opens the linked document in the same window or tab as it was clicked
Lib.getURL (new URLRequest (url), "_blank");
// Opens the linked document in a new window or tab. (this is default)
However, the second option generate popup that is blocked by Chrome.
How to open a link in another tab without being blocked?
With Javascript this work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>OpenNewTab</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style: solid; border-width: 1px"> </canvas>
</center>
<script>
var canvas;
var linkURL = "http://www.google.com";
createLink();
function createLink() {
canvas = document.getElementById("myCanvas");
canvas.addEventListener("click", Link_click, false);
}
function Link_click(e) {
window.open(linkURL,'_blank');
}
</script>
</body>
</html>
P.s: I use Stencyl and HTML/JavaScript.
I believe if the popup is opened from a user triggered event (like pointer down, click) no popupblocker should prevent opening it.
note: Personally I find it annoying that a developer decides how a window should be opened, why not let the user decide that theirselves?
While I do not find better solution I will use this:
import openfl.net.URLRequest;
import openfl.Lib;
class Web
{
public static function open(s:String, code:Int)
{
var type:String = "_self";
var s:String = s;
var code:Int = code;
if(code==1){
type = "_self";
}else if(code==2){
type = "_blank";
}
#if js
untyped __js__('
var canvas;
var linkURL = s;
var lock = 0;
if(lock==0){
lock =1;
createLink();
}
function createLink() {
canvas = document.getElementById("openfl-content");
canvas.addEventListener("click", Link_click, false);
}
function Link_click(e) {
window.open(linkURL,type);
}
');
#else
Lib.getURL (new URLRequest (s), type);
#end
}
}
This is my htmlcode:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
And this is my Doge.js code:
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var doge = new Image();
doge.src = "images/doge.jpg"
var bitmap = new createjs.Bitmap(doge);
stage.addChild(bitmap);
stage.update();
}
Why it doesn't show anything on the screen?
What is wrong?
The image is not loaded when the stage is updated. I posted an answer here:
ยป easeljs not showing bitmap
You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
Listen for the onload of the image, and update the stage again
Preload the image with something like PreloadJS before you draw it to the stage.
As stated above you cannot draw your image until you have loaded it. Try this:
<!DOCTYPE HTML>
<html>
<title>Easel Test</title>
<head>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script>
var stage;
function init() {
stage = new createjs.Stage("myCanvas");
var image = new Image();
image.src = "path/image";
image.onload = handleImageLoad;
}
function handleImageLoad(event) {
var image = event.target;
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="960" height="580"></canvas>
</body>
</html>
I have this code im using on my website but the image does not load when page opens, I want the image to load from start up then a simple mouse over to change image and a link when clicked. Im not good at coding so any help would be good.
here is the code im using.
<!doctype html>
<html>
<body>
<head>
<script>
function init() {
setImageOne();
}
function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); }
function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); }
function setImage(src) {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
if (context == null) return;
var img = new Image();
img.src = src;
context.drawImage(img, 0, 0, 322, 200);
}
</script>
</head>
No Canvas Support in Browser
You need to wait for the image to load before you draw it. Also, if your browser doesn't support canvas nothing will help you with this approach.
function setImage(src) {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
if (context == null) return;
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, 322, 200);
};
img.src = src;
}
You should wait for the image to load. Thus your code should be (with corrections regarding html markup):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="e" style="width: 100%; height: 100%;"></canvas>
<script>
function init() {
setImageOne();
}
function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); }
function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); }
function setImage(src) {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
if (context == null) return;
var img = new Image;
img.onload = function (){
context.drawImage(img, 10, 10);
};
img.src = src;
}
init();
</script>
</body>
</html>
This only works in browsers that support canvas ex: Chrome(ium)
Also I suggest you read this
Is this the first method you tried? If you are just trying to add an image on a website and a hover over it there is a much simpler way.
First off, instead of using Javascript to create and load an Image, use the HTML <img> tag, example:
<img src="http://earthbounds.com/banners/amazing food.jpg">
Now to add a simple hover image change, this is not the best practice but for an example, and for a single image you can use onmouseover and onmouseout, example:
<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">
Now to make this image a link to another page, or website you use the <a> tag, example:
<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">
Hope this helps, and keep looking and learning!