Canvas - background image instead transparent background under chroma image - javascript

I need to replace green background with my own background image with (x,y positioning).
At this moment I just removed green background from https://s14.postimg.org/x9hmont5d/image.jpg with Seriously.js library.
https://jsfiddle.net/0xz7cfkL/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#canvas {
border: 2px solid #000;
}
</style>
</head>
<body>
<canvas width="800" id="canvas" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
<script>
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
canvas.source = chroma;
seriously.go();
</script>
</body>
</html>

Looking at the SeriouslyJS library, the background image can be added using the blend-plugin. You need to include this next to the chroma script-tag:
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.blend.js"></script>
In the main script, you could add a background image in the same fashion as the first:
let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';
Finally, replace "canvas.source":
let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);
canvas.source = blend;
I hope I didn't miss something. You can check out and run the whole script in the snippet:
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);
canvas.source = blend;
seriously.go();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#canvas {
border: 2px solid #000;
}
</style>
</head>
<body>
<canvas width="800" id="canvas" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.blend.js"></script>
</body>
</html>
An alternative solution could use HTML and CSS to position an image at a z-index behind the canvas. (I would use this if the first one won't work)
let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let seriously = new Seriously();
let canvas = seriously.target('#canvas');
let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);
canvas.source = chroma;
seriously.go();
#container {
position: relative;
}
#myBg {
position: absolute;
padding: 2px;
z-index: 1;
}
#canvas {
border: 2px solid #000;
position: absolute;
z-index: 2;
}
<html>
<body>
<div id="container">
<img src="https://picsum.photos/800/600?random" id="myBg" />
<canvas width="800" id="canvas" height="600"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/seriously.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js#r2015-09-08/effects/seriously.chroma.js"></script>
</body>
</html>

Related

How To Make Canvas Dynamically Render To Size Of Image?

I have this snippet of code that makes an SVG and draws it to a canvas.
Jsbin Link: https://jsbin.com/lehajubihu/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<style>
#imgNode {
border: "10px dotted black";
}
</style>
</head>
<img id="imgNode" style="border: 1px dotted black"></img>
<body>
<script>
const { body } = document;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const tempImg = document.createElement("img");
tempImg.addEventListener("load", onTempImageLoad);
tempImg.src =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
);
const targetImg = document.querySelector("#imgNode")
function onTempImageLoad(e) {
ctx.drawImage(e.target, 0, 0);
targetImg.src = canvas.toDataURL();
}
</script>
</body>
</html>
The code does work but the width and height is not dynamic. From the image, we can see that the size is very big compared to the size of the actual HTML as shown below
How do I make the image/canvas render only the HTML and no extra space?
In your image rendering function onTempImageLoad(e) you can add this:
function onTempImageLoad(e) {
canvas.width = tempImg.width;
canvas.height = tempImg.height;
ctx.drawImage(e.target, 0, 0);
targetImg.src = canvas.toDataURL();
}
But you need to check your svg because it's the one that contains extra spaces.
It seems to be in 300x150, you can do some tests by setting the size of the svg in pixels by replace width="100%" and height="100%".
tempImg.src =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
);

ColorPicker does not respond

Goal:
I would like to select a color through color picker HTML element and immediately after this change I would like to see canvas element in the same color.
The issue: I can select color through the color picker, but my canvas rectangle is not changing the color. All of the questions are focused on more robust solutions (i.e. with JBOSS or jQuery or SpringBoot)
Like here:
Bootstrap colorpicker basic example does not work
Primefaces Component - colorPicker: Popup does not render,
What I tried:
Read similar questions here
Different ID names
Different method name
Different color in the white CSS class
Different browser
The different access method for canvas, see below:
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.fillStyle = color;
rectangle.fillRect(20, 20, 60, 60);
}
None of them helped.
MCVE:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
Javascript
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
CSS
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
Can someone help and see what's wrong? Thanks!
function setColorAccordingToColorPicker() {
var rectangle = document.getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
One little change needed:
Change this: var rectangle = getElementById("canvasColorpicker");
To: var rectangle = document.getElementById("canvasColorpicker");

Clip to shape of image in fabric js

I was trying to implement like similar website.
http://printio.ru/full_print_tees/new
Even i tried answer of following post but it is not working.Does any one have the solution or fiddle.
Fabric.js Clip Canvas (or object group) To Polygon
I have create following example but it is not working similar. Please let me know what is problem
<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 type="text/javascript" src="fabric.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100
});
canvas.add(loadedObjects);
shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Hello are you looking something like this on my example?
load one image (t-shirt)
add i-text object
manipulate text object (edit,move up/down/left/right) on the t-shirt
small snippet:
fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
var text = new fabric.Text('the_text_sample\nand more', {
fontFamily: 'Arial',
fontSize:20,
});
text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);
var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});
live example : https://jsfiddle.net/tornado1979/zrazuhcq/
Hope helps,good luck.

drawImage() isn't working for canvas

here is my code below I can't figure out what I'm doing wrong. when I preview it, the image isn't there, just the canvas border.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};
</script>
</body>
</html>
the console displays the link to your file. look there if the correct
Maybe you should have to wait until the image is loaded before you draw it. Try this instead:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'http://techtastico.com/files/2014/06/Apple-Swift-Logo.png';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
};
}
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Removing appended child on click

I am using the following to create an image popup on site load -
<script type="text/javascript">
function showPopup()
{
var div = document.createElement('div');
div.className += 'popup';
div.innerHTML = "<img src='startbutton.png' width='400' height='293' >"
document.body.appendChild(div);
}
window.onload = showPopup;
And here is the CSS
<style type="text/css">
.popup{
position:absolute;
width: 0px;
height: 0px;
left:40%;
top:30%;
}
How can I modify this so that the image goes away when clicked?
Is it possible to have the rest of the page "fade out" till the image is clicked?
Similar to a modal dialog box.
function showPopup() {
var div = document.createElement('div');
var cover = document.createElement('div');
var image = document.createElement('img');
image.src = 'startbutton.png';
image.width = 400;
image.height = 293;
cover.style.position = 'fixed';
cover.style.background = 'rgba(0,0,0,0.5)';
cover.style.height = '100%';
cover.style.width = '100%';
cover.style.top = '0';
cover.style.left = '0';
div.className = 'popup';
div.style.position = 'fixed';
div.style.top = '50%';
div.style.left = '50%';
div.style.margin = '-200px 0 0 -146px';
div.appendChild(image);
image.onclick = function() {
div.parentNode.removeChild(div);
cover.parentNode.removeChild(cover);
}
document.body.appendChild(cover);
document.body.appendChild(div);
}
window.onload = showPopup;
FIDDLE
Add an Action Listener to the DOM element
<!DOCTYPE html>
<html>
<head>
<title>Removable</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
</style>
<script>
function main() {
var image = document.getElementById("myImage");
image.addEventListener("click", function() {
image.parentNode.removeChild(image);
});
}
window.onload = main;
</script>
</head>
<body>
<div>
<img src="../img/dice.png" alt="dice" id="myImage">
</div>
</body>
</html>
This is how I would do it, instead of messing with the javascript, it's a lot easier with the jQuery. And since you tagged jQuery, I'm providing what I think would work best.
$(document).ready(function() {
$('<div class="overlay" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .5);">').appendTo('body');
$('<div class="popup" style="z-index: 8888;"><img src="startbutton.png" width="400" height="29" /></div>').appendTo('body');
$('.popup').on('click', function() {
$('.popup, .overlay').remove();
});
});

Categories