I'm trying to save my HTML canvas to file which I can successfully do, but it's not saving any objects I've dragged into the canvas.
So, by using the Draggable JQuery I can happily move my object around screen and place it ontop of my canvas. When I save the canvas using the Canvas.ToDataURL() it does not save my dragged objects (and also does something strange to my canvas in the jsFiddle, it appears to change the colour of my canvas?).
To see a "working" example, please visit my jsFiddle http://jsfiddle.net/JVSFS/74/
Please simply drag the green box over the blue box and click the save button. The result will be shown underneath (just an orange box).
HTML
<canvas id="MyCanvas" class="canvas"></canvas>
<div class="popup_click">
<div id="popup_title">Drag</div>
</div>
<asp:HiddenField ID="hideMe" runat="server" />
<asp:Button runat="server" OnClick="ClickMe" Text="Click" OnClientClick="SaveMe()" />
<button onclick="SaveMe()">Try it</button>
<p>Results: </p>
<img id="myImage" />
JavaScript
$(document).ready(function () {
$('.popup_click').show(0).draggable();
});
function SaveMe() {
var canvas = document.getElementById("MyCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "orange";
context.fillRect(0, 0, 100, 100);
var image = canvas.toDataURL("image/png");
document.getElementById("myImage").src = image;
document.getElementById("hideMe").value = image;
}
CSS
.popup_click {
background: #80FF80;
width: 50px; }
.canvas {
width: 100px;
height: 100px;
background-color: #0FC;
}
How can I get the dragged object to save? I assume I have to tell the Canvas that the object is part of it's context but no idea how and my own searches came up with nothing.
From https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
You can't just draw HTML into a canvas. Instead, you need to use an SVG image containing the content you want to render. To draw HTML content, you'd use a element containing the HTML, then draw that SVG image into your canvas.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
That's because your draggable object isn't in the canves.
They are simple html elements.
It'll save only the objects whose created with canvas methods.
Any way to create html elements on canvas you have to use svg.
Mozilla show nice way to to this but you need to get all the css to inline css before.
mozilla explanation
Anyway with using svg on you canvas you won't be able to use toDataUrl because of security policy.
Related
I want to generate an image of the DOM element containing base64 images. For the same, I am converting the DOM element to SVG and then drawing that SVG on the canvas and obtaining base64 from it.
It is observed that HTML element having a smaller image is rendered properly, while that having larger image isn't rendered in the canvas in Edge.
Here is a snippet for the same:
<html>
<body>
<div id="content1">
<img id="smallImg" style="width: 200px; height: 150px;" src="data:image/jpeg;base64,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">
</div>
<div id="content2">
<img id="bigImg" src="data:image/jpeg;base64,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"
style="width: 300px; height: 200px" src="">
</div>
</body>
<script>
function htmlToXml(html) {
var doc = document.implementation.createHTMLDocument();
var text = html.innerHTML;
doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
doc.documentElement.innerHTML = text;
let htmls = (new XMLSerializer).serializeToString(doc.documentElement);
return htmls;
}
function getImage(element) {
var htmlElement = element;
var canvasElement = document.createElement('canvas');
canvasElement.height = 800;
canvasElement.width = 500;
var canvasContext = canvasElement.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="800" crossorigin="anonymous">' +
'<foreignObject width="500" height="800">' +
htmlToXml(htmlElement) +
'</foreignObject>' +
'</svg>';
var url = '';
var DOMURL = window.URL;
var svg = new Blob([data], {
type: 'image/svg+xml;charset=utf-8'
});
url = DOMURL.createObjectURL(svg);
var img = new Image();
img.setAttribute('width', '500');
img.setAttribute('height', '800');
img.onload = function() {
canvasContext.drawImage(img, 0, 0);
var res = canvasElement.toDataURL('image/png');
console.log(res);
}
img.crossOrigin = 'Anonymous';
img.src = url;
}
var htmlElement1 = document.getElementById('content1');
var htmlElement2 = document.getElementById('content2');
getImage(htmlElement1);
getImage(htmlElement2);
</script>
</html>
Run it in Edge and observe the output in the console. The base64 images of both the HTML elements are logged separately. The base64 for content1 is generated properly while that for content2 contains a blank image.
Loading an image is an asynchronous task, even when the src is set to a dataURL.
I guess Edge's young integration of <foreignObject> still has some quirks for delaying the outside's <img> onload event until all its inner resources are effectively loaded.
I don't think there is much you can do here, apart from filling an issue, or adding a delay inside the <img>'s onload event handler.
You may want to try HTMLImageElement.decode() but I'm not even sure Edge supports this, nor if it may work at all.
And for your more general case, you may want to avoid this foreignObject hack altogether and rather draw your DOM directly from the canvas API, just like html2canvas does.
Is there possibility to convert the image present in a canvas element into an image representing by img src?
I need that to crop an image after some transformation and save it. There are a view functions that I found on the internet like: FileReader() or ToBlop(), toDataURL(), getImageData(), but I have no idea how to implement and use them properly in JavaScript.
This is my html:
<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
<td>
<canvas id="transform_image"></canvas>
</td>
</tr>
<tr>
<td>
<div id="image_for_crop">image from canvas</div>
</td>
</tr>
In JavaScript it should look something like this:
$(document).ready(function() {
img = document.getElementById('picture');
canvas = document.getElementById('transform_image');
if(!canvas || !canvas.getContext){
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
}
transformImg(90);
ShowImg(imgFile);
}
function transformImg(degree) {
if (document.getElementById('transform_image')) {
var Context = canvas.getContext('2d');
var cx = 0, cy = 0;
var picture = $('#picture');
var displayedImg = {
width: picture.width(),
height: picture.height()
};
var cw = displayedImg.width, ch = displayedImg.height
Context.rotate(degree * Math.PI / 180);
Context.drawImage(img, cx, cy, cw, ch);
}
}
function showImg(imgFile) {
if (!imgFile.type.match(/image.*/))
return;
var img = document.createElement("img"); // creat img object
img.id = "pic"; //I need set some id
img.src = imgFile; // my picture representing by src
document.getElementById('image_for_crop').appendChild(img); //my image for crop
}
How can I change the canvas element into an img src image in this script? (There may be some bugs in this script.)
canvas.toDataURL() will provide you a data url which can be used as source:
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
Complete example
Here's a complete example with some random lines. The black-bordered image is generated on a <canvas>, whereas the blue-bordered image is a copy in a <img>, filled with the <canvas>'s data url.
// This is just image generation, skip to DATAURL: below
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
// Just some example drawings
var gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop("0", "#ff0000");
gradient.addColorStop("0.5" ,"#00a0ff");
gradient.addColorStop("1.0", "#f0bf00");
ctx.beginPath();
ctx.moveTo(0, 0);
for (let i = 0; i < 30; ++i) {
ctx.lineTo(Math.random() * 200, Math.random() * 100);
}
ctx.strokeStyle = gradient;
ctx.stroke();
// DATAURL: Actual image generation via data url
var target = new Image();
target.src = canvas.toDataURL();
document.getElementById('result').appendChild(target);
canvas { border: 1px solid black; }
img { border: 1px solid blue; }
body { display: flex; }
div + div {margin-left: 1ex; }
<div>
<p>Original:</p>
<canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
<p>Result via <img>:</p>
</div>
See also:
MDN: canvas.toDataURL() documentation
Do this. Add this to the bottom of your doc just before you close the body tag.
<script>
function canvasToImg() {
var canvas = document.getElementById("yourCanvasID");
var ctx=canvas.getContext("2d");
//draw a red box
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,30,30);
var url = canvas.toDataURL();
var newImg = document.createElement("img"); // create img tag
newImg.src = url;
document.body.appendChild(newImg); // add to end of your document
}
canvasToImg(); //execute the function
</script>
Of course somewhere in your doc you need the canvas tag that it will grab.
<canvas id="yourCanvasID" />
I´ve found two problems with your Fiddle, one of the problems is first in Zeta´s answer.
the method is not toDataUrl(); is toDataURL(); and you forgot to store the canvas in your variable.
So the Fiddle now works fine http://jsfiddle.net/gfyWK/12/
I hope this helps!
canvas.toDataURL is not working if the original image URL (either relative or absolute) does not belong to the same domain as the web page. Tested from a bookmarklet and a simple javascript in the web page containing the images.
Have a look to David Walsh working example. Put the html and images on your own web server, switch original image to relative or absolute URL, change to an external image URL. Only the first two cases are working.
Corrected the Fiddle - updated shows the Image duplicated into the Canvas...
And right click can be saved as a .PNG
http://jsfiddle.net/gfyWK/67/
<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>
Plus the JS on the fiddle page...
Cheers
Si
Currently looking at saving this to File on the server --- ASP.net C# (.aspx web form page) Any advice would be cool....
I'm working on my first HTML5 Canvas game. I am trying to put in a background image, and I don't know how to do it. The game will change backgrounds throughout levels, but I think I understand how to make that happen. However, if I just try to draw an image, then it appears above my title text. Any ideas how to fix this? I don't think the CSS method will work, because the background will change. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>How Well Do You Know Your Swedish?</title>
</head>
<body>
<canvas width="640" height="480" id="game" style="display: block; margin-left: auto; margin-right: auto; border: 1px solid black;" Your Browser is not compatible with this game. We recommend Google Chrome, Mozilla Firefox, or Opera.></canvas>
<script>
var game_canvas = document.getElementById("game");
var game_context = game_canvas.getContext("2d");
var swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0);
}
game_context.fillStyle = "#000000";
game_context.font = "35px Ubuntu";
game_context.textAlign = "center";
game_context.textBaseline = "top";
game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
</script>
</body>
</html>
I am new to JavaScript, and even newer to the HTML5 Canvas.
Extending from comment:
The "why":
Because the background image is drawn in an onload event, which will happen "later", while text is drawn immediately.
So the text is drawn first, and then sometimes later the image is drawn, thus causing the text to be covered.
The "how":
Depending on how "dynamic" the background image is, you can consider:
use CSS background-image on cancas/canvas container, and use className/classList to switch between different backgrounds;
put an <img> tag underneath the canvas, and change its src property;
use an additional "background" canvas underneath the current one, so you can draw the game content in current one, and draw the (probably not frequently-updated) background in the new one.
Credit of idea 1 and 2 goes to #markE :)
First things:
Check the size of your image. It should be equivalent to the size of the canvas.
context.drawImage can also take width and height parameter for the image.
Syntax: context.drawImage(img, x, y, width, height);
After editing, it should look like this
let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
}
game_context.fillStyle="#000000";
game_context.font="35px Ubuntu";
game_context.textAlign="center";
game_context.textBaseline="top";
game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
To anyone who is still facing the problem of background image overlaying text (Image above text), I thought "why not drawing text inside onload function after loading bg image!?"
And it worked!! The browser (Or whatever) loads image first and load my text above image.
<canvas width="534" height="104" id="game" style="display: block; margin-left: auto; margin-right: auto; border: 1px solid black;" Your Browser is not compatible with this game. We recommend Google Chrome, Mozilla Firefox, or Opera.></canvas>
<script>
let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "./img/logo1.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
game_context.fillStyle = "#000000";
game_context.font = "35px Ubuntu";
game_context.textAlign = "center";
game_context.textBaseline = "top";
game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
}
</script>
The code runs with no bugs, but a problem I am having is because the ".onLoad" function makes it display after the text has already been displayed on the screen. The problem I am facing is that I would like if the text (Loading graphics and loading variables) displayed over the image.
The code is here:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html>
<body>
<canvas id="ctx" width="800" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
var canvas = document.getElementById('ctx');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj,0,0);
};
imageObj.src = 'img/startscreen.jpg';
ctx.fillText('Loading variables.',50,50);
character=new Object();
character.hp=1;
character.name=null;
ctx.fillText('Loading graphics..',50,100);
</script>
</body>
</html>
I would layer the background image on its own canvas positioned behind the text layer. Then you can clear and update the text layer without having to re-draw the background image.
#background,#overlay {
position: absolute;
}
<canvas id="background"></canvas>
<canvas id="overlay"></canvas>
var can = document.getElementById('overlay'),
bg_can = document.getElementById('background'),
height = can.height = bg_can.height = 500,
width = can.width = bg_can.width = 500,
ctx = can.getContext('2d'),
bctx = bg_can.getContext('2d');
var img = new Image();
img.src = ' ... ';
img.onload = init;
function init() {
// draw the background
bctx.drawImage(this, 0, 0);
// draw your initial text
updateText('hello world');
// other stuff that is going to take time
updateText('done');
}
function updateText(msg) {
ctx.clearRect(0, 0, width, height);
ctx.fillText(msg, 50, 100);
}
This isn't very well thought out (my code example) for re-use purposes.. but I don't know much about your other needs :) hope this helps.
If you want to overlay String on image, why don you use image as backGround imange and place text over it??
Css
try in css
#ctx{
background-image:url('img/startscreen.jpg');}
remove image source in script or insert css in script itself
Css in scripts
ctx.style.backgroundImage=url('img/startscreen.jpg');
I called the function for the text to be displayed after the background has:
imageObj.src = 'img/startscreen.jpg';
imageObj.onload = function(){
context.drawImage(imageObj,0,0);
init()
};
function init(){
ctx.fillText('Loading variables.',50,50);
character=new Object();
character.hp=1;
character.name=null;
ctx.fillText('Loading graphics..',50,100);
}
Is there possibility to convert the image present in a canvas element into an image representing by img src?
I need that to crop an image after some transformation and save it. There are a view functions that I found on the internet like: FileReader() or ToBlop(), toDataURL(), getImageData(), but I have no idea how to implement and use them properly in JavaScript.
This is my html:
<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
<td>
<canvas id="transform_image"></canvas>
</td>
</tr>
<tr>
<td>
<div id="image_for_crop">image from canvas</div>
</td>
</tr>
In JavaScript it should look something like this:
$(document).ready(function() {
img = document.getElementById('picture');
canvas = document.getElementById('transform_image');
if(!canvas || !canvas.getContext){
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
}
transformImg(90);
ShowImg(imgFile);
}
function transformImg(degree) {
if (document.getElementById('transform_image')) {
var Context = canvas.getContext('2d');
var cx = 0, cy = 0;
var picture = $('#picture');
var displayedImg = {
width: picture.width(),
height: picture.height()
};
var cw = displayedImg.width, ch = displayedImg.height
Context.rotate(degree * Math.PI / 180);
Context.drawImage(img, cx, cy, cw, ch);
}
}
function showImg(imgFile) {
if (!imgFile.type.match(/image.*/))
return;
var img = document.createElement("img"); // creat img object
img.id = "pic"; //I need set some id
img.src = imgFile; // my picture representing by src
document.getElementById('image_for_crop').appendChild(img); //my image for crop
}
How can I change the canvas element into an img src image in this script? (There may be some bugs in this script.)
canvas.toDataURL() will provide you a data url which can be used as source:
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
Complete example
Here's a complete example with some random lines. The black-bordered image is generated on a <canvas>, whereas the blue-bordered image is a copy in a <img>, filled with the <canvas>'s data url.
// This is just image generation, skip to DATAURL: below
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
// Just some example drawings
var gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop("0", "#ff0000");
gradient.addColorStop("0.5" ,"#00a0ff");
gradient.addColorStop("1.0", "#f0bf00");
ctx.beginPath();
ctx.moveTo(0, 0);
for (let i = 0; i < 30; ++i) {
ctx.lineTo(Math.random() * 200, Math.random() * 100);
}
ctx.strokeStyle = gradient;
ctx.stroke();
// DATAURL: Actual image generation via data url
var target = new Image();
target.src = canvas.toDataURL();
document.getElementById('result').appendChild(target);
canvas { border: 1px solid black; }
img { border: 1px solid blue; }
body { display: flex; }
div + div {margin-left: 1ex; }
<div>
<p>Original:</p>
<canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
<p>Result via <img>:</p>
</div>
See also:
MDN: canvas.toDataURL() documentation
Do this. Add this to the bottom of your doc just before you close the body tag.
<script>
function canvasToImg() {
var canvas = document.getElementById("yourCanvasID");
var ctx=canvas.getContext("2d");
//draw a red box
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,30,30);
var url = canvas.toDataURL();
var newImg = document.createElement("img"); // create img tag
newImg.src = url;
document.body.appendChild(newImg); // add to end of your document
}
canvasToImg(); //execute the function
</script>
Of course somewhere in your doc you need the canvas tag that it will grab.
<canvas id="yourCanvasID" />
I´ve found two problems with your Fiddle, one of the problems is first in Zeta´s answer.
the method is not toDataUrl(); is toDataURL(); and you forgot to store the canvas in your variable.
So the Fiddle now works fine http://jsfiddle.net/gfyWK/12/
I hope this helps!
canvas.toDataURL is not working if the original image URL (either relative or absolute) does not belong to the same domain as the web page. Tested from a bookmarklet and a simple javascript in the web page containing the images.
Have a look to David Walsh working example. Put the html and images on your own web server, switch original image to relative or absolute URL, change to an external image URL. Only the first two cases are working.
Corrected the Fiddle - updated shows the Image duplicated into the Canvas...
And right click can be saved as a .PNG
http://jsfiddle.net/gfyWK/67/
<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>
Plus the JS on the fiddle page...
Cheers
Si
Currently looking at saving this to File on the server --- ASP.net C# (.aspx web form page) Any advice would be cool....