Why is this little script not working?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="can" height="500" width="500"></canvas>
<script type="text/javascript">
var image = new Image().src="1.jpg";
context = document.getElementById("can").getContext("2d");
context.drawImage(image,10,10,480,480);
</script>
</body>
</html>
Firebug in Firefox (latest Version) shows:
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
[Bei diesem Fehler anhalten]
context.drawImage(image,10,10,480,480);
Chrome can't show the image either, they just say ERROR.
image.src is async, you need to draw it with a callback.
var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....
All you need to do is change:
ctx.drawImage(i, 0, 0, arg.width, arg.height);
to:
ctx.drawImage(arg.img, 0, 0, arg.width, arg.height);
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'm following this tutorial (http://www.yeahbutisitflash.com/?p=5226), using Chrome, and can't figure out why this isn't working. Here is my console output:
init() successfully called.
pixi.dev.js:224 Pixi.js v2.2.7 - webGL http://www.pixijs.com/ ♥♥♥
index2.html:26 PIXI.WebGLRenderer
index2.html:28 render complete.
And here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Endless Runner Game Demo</title>
</head>
<body onload="init();">
<div align="center">
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
<script src="js/pixi.js-master/bin/pixi.dev.js"></script>
<script>
function init() {
console.log("init() successfully called.");
stage = new PIXI.Stage(0x66FF99);
renderer = PIXI.autoDetectRenderer(
512,
384,
document.getElementById("game-canvas")
);
console.log(renderer);
renderer.render(stage);
console.log("render complete.");
}
</script>
</body>
</html>
Yet, it displays nothing. The tutorial says I should see the background color set on the stage at this point.
Thanks.
The third argument of PIXI.autoDetectRenderer should be an Object, not an element. You should set the Object property "view" to be your canvas element.
var renderer = PIXI.autoDetectRenderer( 512, 384, {
view: document.getElementById("game-canvas")
});
Also note that you may need to run a local server in order to view it in Chrome.
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>
<!DOCTYPE html>
<html land="en">
<head>
<meta charset="utf-8">
<title>Using video in the canvas tag</title>
<script type="text/javascript">
var vid,ctx;
function init(){
window.addEventListener("resize",onResize,false);
var can = document.getElementById('canvas1');
ctx = can.getContext('2d');
vid = document.createElement('video');
vid.src = 'video.mp4';
vid.autoplay = true;
vid.loop = true;
vid.addEventListener("canplaythrough", play, false);
}
function play(){
setInterval(function() {
ctx.drawImage(vid, 0, 0);
}, 1000/23.976);
}
</script>
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onLoad="init();">
<canvas id="canvas1" width="1280" height="720"></canvas>
</body>
</html>
Im trying to get full screen video by scaling the canvas up, however the code above only works in Chrome. The video does not show up in firefox 10.0.2 nor safari 5.05. I tried three different files: mp4,ogv, and webm. What's wrong with my code. I know there is a tag but can I scale it the same way I can with a canvas?
Some implementations working with all current HTML5 capable browsers including Firefox, Safari and Chrome (based on the new FullScreen API):
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
https://github.com/sindresorhus/screenfull.js
http://www.html5-fullscreen-video.com/html5_fullscreen/tutorial/fullscreen_solutions/18
https://developer.mozilla.org/en/DOM/Using_full-screen_mode
I just finished my first JavaScript book, "Head First HTML5", and I'm feeling quite dumb. If i put the script in the HTML file it works, but doesn't work in a separate JavaScript file.
HTML file:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="canArt.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</head>
JS file:
window.onload = init();
function init() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
please help.
Your immediately executing the init function by including the parens and assigning the result of init, which is nothing, to the onload handler...
change:
window.onload = init();
to:
window.onload = init;
http://jsfiddle.net/sFmNw/