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
Related
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>
I have some JS that displays and plays audio.
However the load time is very long, I following this tutorial (http://www.dzyngiri.com/show-loading-image-while-the-website-loads/) to install a preloader.
I'm seeing the preloaded image appearing, however it goes away well before the entire page is loaded.
I've tried variation between $(window).load & $(document).ready neither shows the image until the JS and audio plays.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cal christmas tree canvas 005</title>
<style type="text/css">
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Bitmap12.jpg) 50% 50% no-repeat #ede9df;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="cal christmas tree canvas 005.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.calchristmastreecanvas005();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="spinner"></div>
<canvas id="canvas" width="960" height="640" style="background-color:#FFFFFF"></canvas>
</body>
</html>
You call your init() function at the exact same time as you call your loader disappering function
<body onload="init();"
and
$(window).load(function() {} / or window.onload = function() {}
are the same thing with a different name.
You should take init() out of the onload tag and place it anywhere in your script, out of any onload events.
I'm working with HTML5 Canvas now. I have one image file and and a mug image file. I want the image file to be drawn on that cylinder surface. Something like the images below.
Are there any Javascript canvas (or maybe SVG) libraries that can help me archive that?
Thank you very much
You can achieve your "wrap" effect by slicing your image into 1px wide vertical slices and changing the "Y" coordinate of each slice to fit the curve of your cup.
Here's example code that uses this technique to "stretch" an image.
Feel free to modify this code to fit along the curve of your cup.
Example code and a Demo: http://jsfiddle.net/m1erickson/krhQW/
<!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 img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/warp.png";
function start(){
var iw=img.width;
var ih=img.height;
canvas.width=iw+20;
canvas.height=ih+20;
var x1=0;
var y1=50;
var x2=iw;
var y2=0
var x3=0;
var y3=ih-50;
var x4=iw;
var y4=ih;
// calc line equations slope & b (m,b)
var m1=Math.tan( Math.atan2((y2-y1),(x2-x1)) );
var b1=y2-m1*x2;
var m2=Math.tan( Math.atan2((y4-y3),(x4-x3)) );
var b2=y4-m2*x4;
// draw vertical slices
for(var X=0;X<iw;X++){
var yTop=m1*X+b1;
var yBottom=m2*X+b2;
ctx.drawImage( img,X,0,1,ih, X,yTop,1,yBottom-yTop );
}
// outline
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x4,y4);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
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>
Is it possible to implement the paint text feature in javascript on a canvas?
A text button say "A" ,on click of this like in paint one should be able to draw a text box on canvas wherever the user clicked mouse.Also should be able to type text init.Also should be able to move this text box anywhere on the canvas.
Any suggestion/solution is appreciable.
Thanks.
This basic framework should get you started.
This code allows the user to enter their text.
Then they click on the canvas and their text is drawn at the mouse position.
Of course, you will want to take it from here to design it to fit your needs.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/7GHvj/
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=2;
var canMouseX;
var canMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);
// Put your mousedown stuff here
var text=document.getElementById("text").value;
ctx.font = 'italic 20px sans-serif';
ctx.fillText(text,canMouseX,canMouseY);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Enter the text here first</p>
<input id="text" type="text" name="text" value="My Text."><br>
<p>Then click on the canvas to draw the text.</p>
<canvas id="canvas" width=576 height=307></canvas>
</body>
</html>