Rotate image using image holder - javascript

I have created one app that allow to rotate image and crop image. When my first app start with original image, it is fine with crop image. But the problem is that when I rotate it once, my crop tools cannot get top,left,width,height of the image as the original one. My code as below .Can anyone help me with this problem?
My code:
<script>
$(document).ready(function($) {
$("#crop").click(function(e){
var Imgwidth = $('#face').width(),
Imgheight = $('#face').height(),
faceOffset = $('#face').offset(),
imgOffset = $('#imgHolder').find('img').offset(),
imgX1 = faceOffset.left-imgOffset.left,
imgY1 = faceOffset.top-imgOffset.top,
imgX2 =imgX1+Imgwidth,
imgY2 = imgY1+Imgheight;
var imgNval = new Array();
var imageSrc ='Penguins.jpg';
var imageObj=new Image();
imageObj.src=imageSrc;
selx1 = imgX1;
sely1 = imgY1;
selx2 = imgX2;
sely2 = imgY2;
selw = Imgwidth;
selh = Imgheight;
console.log(imgX1);
console.log(imgY1);
/*console.log(imgX2);
console.log(imgY2);*/
/*Passing from one page to another page*/
var canvas=document.getElementById("Mystore1");
var context=canvas.getContext("2d");
context.canvas.height = Imgheight;
context.canvas.width=Imgwidth;
context.drawImage(imageObj, imgX1, imgY1, selw, selh, 3, 3, Imgwidth, canvas.height-5);
});
});
</script>
<script type="text/javascript">
var loop=0;
$(document).ready(function(e) {
$("#left").click(function(){
loop+=90;
$("#imageHolder").rotate({ animateTo:loop });
});
});
$(document).ready(function(e) {
$("#right").click(function(){
loop-=90;
$("#imageHolder").rotate({animateTo:loop});
});
});
</script>
<script type="text/javascript">
$(function(){
$(".frame").draggable();
});
</script>
<canvas id="Mystore1">Your Browser Doesn't support HTML5 Canvas</canvas>
<div id="imgHolder">
<img src="Penguins.jpg" id="image"/>
</div>
<div class="frame"><img src="face.jpg" width="80" height="80" id="face" class="frames"/></div>
<button id="crop">Crop Me</button>
<button id="left">Left</button>
<button id="right">Right</button>
</body>
</html>

Related

Insert image from URL into Google Docs

I am trying to get image from external link and add in a document.
Html service work fine. However, document should fill out after onload function.
How can I fix it ?
code.gs
function doGet(e){
var content = HtmlService.createHtmlOutputFromFile('index').getContent();
return HtmlService.createHtmlOutput(content);
}
function im(baseUrl){
var resp = UrlFetchApp.fetch(baseUrl);
var docID = "0000xxxxx1111"
var doc = DocumentApp.openById(docID);
doc.getChild(0).asParagraph().appendInlineImage(resp.getBlob());
return baseUrl;
}
index.html
<!DOCTYPE html>
<head>
<base target="_top">
<script>
window.onload = function() {
var url = "http://xxx.co/image.png"
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
document.getElementById('barcode').appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = url;
ctx.drawImage(image, 0, 0);
google.script.run.withSuccessHandler(function(a) {
document.getElementById("imageid").src=a;
}).im(canvas.toDataURL());
}
</script>
</head>
<body>
<img id="imageid" src="" alt="image">
</body>
</html>
There are a few problems with your HTML which is why it probably isn't working. You also had not tagged any elements with the barcode id.
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body id="barcode">
<img id="imageid" src="" alt="image">
</body>
<script>
window.onload = function() {
var url = "http://lorempixel.com/400/200/"
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
document.getElementById('barcode').appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = url;
ctx.drawImage(image, 0, 0);
google.script.run.withSuccessHandler(function(a) {
document.getElementById("imageid").src=a;
}).im(canvas.toDataURL());
}
</script>
</html>

How can I create a canvas, then set its color, and then append it to a div using Javascript/ Jquery?

I am trying to build a basic game and somehow got really hung up on the first few steps. I am trying to create a canvas, the the color of the canvas, and then append to a div element. Every time I load this I either get an error, or nothing. Even if the 2 console.logs load properly. Please help!
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dodge</title>
<script src="//code.jquery.com/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css" rel="stylesheet" integrity="sha256-fHWoqb8bPKjLiC7AuV6qy/lt0hrzfwM0ciyAu7Haf5w= sha512-3t2GeiCRNeKhZnUaUMygGiLKZzb/vPhvfw3y1Rt2FCwKuRaLVrOCTpavIYsZ4xqM52mbO7M93NaXbm/9dOA2Og==" crossorigin="anonymous">
<script src="../../../game.js">
</script>
</head>
<body>
<center>
<h1 id="h1">Dodge the enemy by pressing the left and right arrow keys!</h1>
<button
id="play"
class="btn btn-primary">Play game!</button>
</br>
</br>
<button
id="again"
class="btn btn-primary">Play Again!</button>
<div id="play-area">
</div>
</center>
</body>
</html>`
And heres the JS:
$(function () {
function createCanvas(width, height, id) {
var canvas = document.createElement("canvas");
var id2 = "#" + id;
canvas.width = width;
canvas.height = height;
canvas.id = id;
$(id2).css("color", "lawngreen");
$("#game-area").append(canvas);
}
$("#play").click(function () {
console.log("hello");
createCanvas(900, 900, "game-canvas");
console.log("hi!");
});
});
First you create the canvas object correctly, but you should also append it to the body. This is done after basic parameters are set.
After that you can manipulate the css with jQuery.
It works in my fiddle.
Check it out here: https://jsfiddle.net/xu15q5h8/
I changed your code to point out how it correctly works:
$(function () {
function createCanvas(width, height, id) {
var canvas = document.createElement('canvas');
var body = document.getElementsByTagName("body")[0];
canvas.id = id;
canvas.width = width;
canvas.height = height;
body.appendChild(canvas);
$('canvas').css('background-color', 'rgba(158, 167, 184, 0.2)');
cursorLayer = document.getElementById("CursorLayer");
console.log(cursorLayer);
}
$("#play").click(function () {
console.log("hello");
createCanvas(900, 900, "game-canvas");
alert("hi!");
});
});
Why not just draw the color onto the canvas instead of using CSS.
function createCanvas(width, height, id) {
var canvas = document.createElement("canvas");
var id2 = "#" + id;
canvas.width = width;
canvas.height = height;
canvas.id = id;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "lawngreen";
ctx.fillRect (0, 0, width, height);
$("#play-area").append(canvas);
}
Here is the modified code demo.

Add Image to canvas through Jquery

I'm trying to add an image to an Canvas element. Canvas markup:
<?php foreach($fdsArray as $key => $value):?>
<div class="design" id="<?php echo $key;?>" data-design="<?php echo $value['url'];?>">
<canvas width="200" height="200"></canvas>
<p class="name"><?php echo $value['name'];?></p>
<p class="asset"><?php echo $value['asset'];?></p>
</div>
<?php endforeach;?>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('.design').each(function() {
var design = $(this).attr('data-design');
var id = $(this).attr('id');
});
});
</script>
I want the image to show inside the canvas element. var design contains the url. Could anyone help me out?
Try
$(document).ready(function() {
$('.design').each(function() {
var design = $(this).attr('data-design');
var id = $(this).attr('id');
var canvas = $(this).find("canvas")[0];
var ctx = canvas.getContext("2d");
var img = new Image;
img.onload = function() {
ctx.drawImage(this, 0, 0);
};
img.src = design;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="design" id="image" data-design="http://lorempixel.com/technics/200/200/">
<canvas width="200" height="200"></canvas>
<p class="name">name</p>
<p class="asset">asset</p>
</div>
You will have to draw each image to its associated canvas through javascript using the canvas.drawImage method.
sample code follows:
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "get image source from data- attribute";
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
Use sth similar inside $.ready callback
...or in pure javascript:
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// a reference to #theURL
var theDiv = document.getElementById("theURL");
// the url from theDiv's data-design
var theURL = theDiv.getAttribute("data-design");
// new up an image
var img=new Image();
// when its fully loaded, call start()
img.onload=start;
// set the source of the new image to the url from data-design
img.src=theURL;
function start(){
// draw the new image to the canvas
ctx.drawImage(img,0,0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<div class="design" id=theURL data-design="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png">
<canvas id="canvas" width=300 height=300></canvas>

Display image in canvas with Javascript?

I want to be able to click on a button on my page and load an image into a canvas at some X,Y coordinates?
The following code is what I have below. I would like the image to be in either image/photo.jpg or in the same directory but preferably in a subdirectory of the main page.
**Question: How to make a JPG show up in a canvas with the click of a button on the web page?
Code:
<!DOCTYPE html>
<html>
<script>
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image():
// img.src = "2c.jpg";
img.src = "/images/2c.jpg";
ctx.drawImage(img,0,0);
}
</script>
<body background="Black">
<div align="center">
<button type="button" onclick="draw()">Show Image on Canvas</button>
<canvas id="myCanvas" width="900" height="400" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Royal Flush $",500,50);
ctx.fillText("Striaght Flush $",500,80);
ctx.fillText("Flush $",500,110);
ctx.fillText("Four of a Kind $",500,140);
ctx.fillText("Full House $",500,170);
ctx.fillText("Three of a Kind $",500,200);
ctx.fillText("Two Pair $",500,230);
ctx.fillText("Pair of ACES $",500,260);
ctx.rect(495,10,270,350);
ctx.stroke();
</script>
</body>
</html>
March 6th, 2014 Code:
How is the following code not working. Do you have to have an ID tag on Canvas. The page will display but for some reason the image will not when the button is clicked. The image is in the same directory that my index.html file is in.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
canvas{
border: 5px solid black;
}
</style>
</html>
<button id="galaxy">Add image #1</button>
<button id="circles">Add image #2</button><span></span>
<canvas width="500" height="500"></canvas>
<script>
var Images = {};
function loadImages(list){
var total = 0;
document.querySelector("span").innerText = "...Loading...";
for(var i = 0; i < list.length; i++){
var img = new Image();
Images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
document.querySelector("span").innerText = "...Loaded.";
}
};
img.src = list[i].url;
}
}
function drawImage(img){
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(Images[img], 0, 0, 50, 50);
}
loadImages([{
name: "2c.jpg",
url: "mp.jpg"
},{
name: "mp.jpg",
url: "mp.jpg"
}]);
document.querySelector("#galaxy").addEventListener("click", function(){
drawImage("galaxy");
});
document.querySelector("#circles").addEventListener("click", function(){
drawImage("weirdCircles");
});
</script>
</html>
Wait till the image is loaded before drawing:
var img = new Image();
img.onload = function(){ /*or*/ img.addEventListener("load", function(){
ctx.drawImage(img,0,0); ctx.drawImage(img,0,0);
}; };
img.src = "/images/2c.jpg";
Demo: http://jsfiddle.net/DerekL/YcLgw/
If you have more than one image in your game,
It is better to preload all images before it starts.
Preload images: http://jsfiddle.net/DerekL/uCQAH/ (Without jQuery: http://jsfiddle.net/DerekL/Lr9Gb/)
If you are more familiar with OOP: http://jsfiddle.net/DerekL/2F2gu/
function ImageCollection(list, callback){
var total = 0, images = {}; //private :)
for(var i = 0; i < list.length; i++){
var img = new Image();
images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
callback && callback();
}
};
img.src = list[i].url;
}
this.get = function(name){
return images[name] || (function(){throw "Not exist"})();
};
}
//Create an ImageCollection to load and store my images
var images = new ImageCollection([{
name: "MyImage", url: "//example.com/example.jpg"
}]);
//To pick and draw an image from the collection:
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(images.get("MyImage"), 0, 0);

How to add link for the image using Javascript

How can I add a link for an image created using the following Javascript code. I tried some changes, but nothing worked.
Please change the following code to the code with a link. I want to link all images at http://idealbodyweights.com/.
<script type="text/javascript">
var image1 = new Image()
image1.src =="http://idealbodyweights.com/wp-content/uploads/2013/05/1.png"
var image2 = new Image()
image2.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/2.png"
var image3 = new Image()
image3.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/3.png"
var image4 = new Image()
image4.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/4.png"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="720" height="90" name="slide" /></p>
<script type="text/javascript">
var step=4;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
I rewrote a little of your code so it doesn't use eval and so the <img> is fetched using document.getElementById.
...
<script type="text/javascript">
var imgsrc = [
'http://idealbodyweights.com/wp-content/uploads/2013/05/1.png', // 0
'http://idealbodyweights.com/wp-content/uploads/2013/05/2.png', // 1
'http://idealbodyweights.com/wp-content/uploads/2013/05/3.png', // 2
'http://idealbodyweights.com/wp-content/uploads/2013/05/4.png' // 3
],
imgcache = [], i;
for (i = 0; i < imgsrc.length; ++i) { // cache images
imgcache[i] = new Image();
imgcache[i].src = imgsrc[i];
}
</script>
</head>
<body>
<p><img src="images/pentagg.jpg"
width="720" height="90"
name="slide" id="slide" /></p>
<script type="text/javascript">
var step = -1, // set so first will be 0
img = document.getElementById('slide'); // get the <img>
function slideit() {
step = (step + 1) % imgsrc.length; // loop over 0, 1, 2, 3 (or more)
img.src = imgsrc[step]; // set src by array index
setTimeout(slideit, 2500); // repeat in 2500 ms
}
slideit();// start
</script>
...
Is it what you want? :D
<p>
<a href="http://idealbodyweights.com/">
<img src="images/pentagg.jpg" width="720" height="90" name="slide" />
</a>
</p>

Categories