I found this jsfiddle http://jsfiddle.net/t7mv6/86/ that works exactly like I need. Have been searching for examples and studied several online html5 canvas tutorials. I am trying to load several images selected from many in a directory to one html5 canvas.
I wrote this attempt to use the jsfiddle:
<!DOCTYPE html>
<html>
<HEAD>
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('click', handleFiles);
var i=0;
function handleFiles(e) {alert("here");
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
alert("hello");
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
ctx.drawImage(img, 20,20);
alert('the image is drawn');
}
}
</script>
</head>
<Body >
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="800" height="500" id="canvas"/>
</body>
</html>
The above will not work on my chrome or firefox.
It seems to display initial page correctly but the image does not display in the canvas.
I think I may have a security problem or need to wrap it with an onload.
Don't really understand syntax for the onload function.
js console indicates no errors.
Any help appreciated!
Tim
You can select multiple images by adding the multiple attribute to your input.
<input type="file" multiple id="input"/>
Here's example code an a Demo on how to show your multiple images as thumbnails on a single canvas.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
// var images=[];
var files=e.target.files;
for(var i=0;i<files.length;i++){
var img=new Image;
img.x=i*100;
img.onload=function(){
ctx.drawImage(this,this.x,0,80,this.height*(80/this.width));
}
img.src=URL.createObjectURL(files[i]);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<input type="file" multiple id="input"/>
<br>
<canvas id="canvas" width=400 height=300></canvas>
Related
I want to upload the image in web page. There is no error in the code but still I can't upload the image in web page and show it in canvas. The image is upload in the web page but it not show in the canvas which i created. Please help me to find what wrong with my code?
here is the code for hole html page.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}
<html>
<head>
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
</head>
<body>
<h3>HTML code for canvas and upload button</h3>
<canvas id="can">
</canvas>
<h3>Load Image</h3>
<input type="file" multiple="false" accept="image/*" id="finp" onclick="upload()" >
</body>
</html>
I think there is a mismatch in the IDs you use in HTML elements and JS Code.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>
<canvas id='can' class='canvasRoundCorders'></canvas>
<input id='finp' type='file' accept='image/*' onchange="upload()">
I'm trying to put an image inside a frame, i would like to adapt the image over the trasparent area of the frame.
I've tryed to do this way:
http://jsfiddle.net/ymzwdaw9/
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imageURLs=[];
imageURLs.push("http://i.imgur.com/LKx3Yel.png");
imageURLs.push("http://i.imgur.com/cXOrsmT.jpg");
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
ctx.drawImage(imgs[0],0,0);
ctx.globalCompositeOperation='destination-over';
ctx.drawImage(imgs[1],0,0);
}
});
</script>
</head>
<body>
<canvas id="canvas" width=884 height=1171></canvas>
</body>
</html>
but there are 2 problems:
the image is under the frame borders
the image is not big enough (i guess its because should be cropped and stretched?)
i know i could specify the position of the image via coordinates, but the problem is the user can pick different kinds of frames, so the best solution would be "replace" the trasparent area with the image.
P.S. i'm trying with canvas, but other solutions are welcome
I'm trying to build a sort of generator which lets you put text over an image. Now it's all working great, but i'm trying to create some thumbnails which let me change the background image of the canvas.
Now this is my first attempt with a canvas and i've tried alot of things, but the closest i've come and where i thought my little piece of code would work was, it's given me 0 errors:
function testbackgroundchange() {
img.src = "background_1.jpg";
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('scale').value = 1;
document.getElementById('rotate').value = 0;
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;
ctx.drawImage(img,x,y);
imgTransform();
}
So what i'm trying to here is onclick of a thumbnail, change the background image of the canvas.
I've added an JSFiddle for better understanding of the problem: http://jsfiddle.net/29M7P/1/
If anyone could point me in the right direction that would be great. (sorry i'm a beginner)
You can listen for clicks on your thumbnails with thumbnail.onclick
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
And you can change the canvas image like this:
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
A Demo: http://jsfiddle.net/m1erickson/88n3K/
Code example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var imgCount=2;
var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
function start(){
if(--imgCount>0){return;}
document.body.appendChild(img1);
document.body.appendChild(img2);
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
}
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>
i need to draw lines between 2 element on html page
the results should be like this:
http://img2.timg.co.il/forums/1_173873919.JPG
i wondered what the best way do this
using canvas and html5
using background image.
make by ajax dynamic the image
i would like to know what the best way and if there is a simple demo on the web
thanks
Lots of ways to solve your need:
Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/
Example code (could be fully automated with jquery+css-classes):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{ background-color: ivory; margin:0; padding:0; }
#canvas{
position:absolute;
border:1px solid red;
width:100%;height:100%;
}
.draggable{
width:50px;
height:30px;
background:skyblue;
border:1px solid green;
}
.right{
margin-left:100px;
background:salmon;
}
#wrap2{margin-top:-95px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
ctx.lineWidth=3;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var $0=$("#0");
var $1=$("#1");
var $2=$("#2");
var $0r=$("#0r");
var $1r=$("#1r");
var $2r=$("#2r");
var connectors=[];
connectors.push({from:$0,to:$0r});
connectors.push({from:$1,to:$0r});
connectors.push({from:$2,to:$2r});
connect();
$(".draggable").draggable({
// event handlers
start: noop,
drag: connect,
stop: noop
});
function noop(){}
function connect(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<connectors.length;i++){
var c=connectors[i];
var eFrom=c.from;
var eTo=c.to;
var pos1=eFrom.offset();
var pos2=eTo.offset();
var size1=eFrom.size();
var size2=eTo.size();
ctx.beginPath();
ctx.moveTo(pos1.left+eFrom.width()+3,pos1.top+eFrom.height()/2);
ctx.lineTo(pos2.left+3,pos2.top+eTo.height()/2);
ctx.stroke();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<div>
<div id="0" class="draggable">0</div>
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
</div>
<div id="wrap2">
<div id="0r" class="draggable right">0</div>
<div id="1r" class="draggable right">1</div>
<div id="2r" class="draggable right">2</div>
</div>
</body>
</html>
There is a very simple way of achieving this with some Javascript and the HTML canvas tag.
DEMO HERE showing how to draw the most complicated element on your example which has one field with lines branching to two other fields.
How it (basically) works is as follows.
Start the drawing function with:
context.beginPath();
Pass the desired coordinates to the function with:
context.moveTo(100, 150);
context.lineTo(450, 50);
Then execute the draw with:
context.stroke();
There's some great tutorials HERE
use <canvas> if you want to use simple things like circles and images and stuff - for divs, you would want to look for alternatives like in Jquery or - like you said - javascript. For <canvas> you could try this and this
here's a link to a gist that uses javascript (jquery) to draw a path (and redraw it in case of window resizing) between any 2 html elements.
demo
For GameRefCard I've using leader-line. It worked extremely well for me and is very popular it seems, if you are to trust GitHub statistics. I found out about from this other StackOverflow answer.
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/