I'm trying to draw an image in a canvas. This works in Firefox but not in Chrome 49.
context.drawImage(backgroundImage, 0, 0);
JSFiddle: https://jsfiddle.net/kp5otnyu/3/
Image link: http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg
Something seems to be wrong with the image. We tried coping the image in another jpg that did draw, and then it worked. But what is wrong with this image?
EDIT: This is not an answer, all the cheers to #kaiido
Working example:
var backgroundImage = new Image();
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 100;
backgroundImage.onload = function(){
context.clearRect(0, 0, 300, 300);
context.drawImage(backgroundImage, 0, 0);
}
backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg";
$("#test").append(canvas);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="test">
</div>
Not Working example:
var backgroundImage = new Image();
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
backgroundImage.onload = function(){
context.clearRect(0, 0, 300, 300);
context.drawImage(backgroundImage, 0, 0);
}
backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg";
$("#test").append(canvas);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="test">
</div>
This issue was solved in Chrome 50. When I open the JSFiddle in my updated Chrome, the image shows.
Related
So I am creating a cordova app where I take a photo from the iphone library, draw it to canvas and add another image to it in order to save it as one photo. So far the photo I draw from the iphone photo library gets drawn without problems to the canvas, however the second image doesn't.
When I load the second image, it first gets added to a div with absolute positioning in order to move it to wherever I want. After that I get the actual image it's source and it's positions and try to draw it to canvas. The drawing of the second image happens when I call a method that also performs the canvas2ImagePlugin it's functions. In the end only the first photo without the second image gets saved.
The draw image to canvas function:
function drawImage(image_source, dx, dy)
{
var canvas = document.getElementById('Photo');
var image = new Image();
image.src = image_source;
image.onload = function() {
c=canvas.getContext("2d");
c.canvas.width = window.innerWidth;
c.canvas.height = window.innerHeight;
c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
}
}
The method for drawing the second image and saving it:
function saveImage()
{
var img = $('.ObjectImage').attr('src', $('img:first').attr('src'));
var imagePosition = $('.ObjectImage').find('img:first').position();
drawImage(img, imgPosition.left, imgPosition.top);
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('Photo')
);
alert("Image saved");
}
The window.innerWidth, window.innerHeight on the canvas is done to get the canvas in full screen of the parent div.
EDIT to the comment:
function drawImage(image_source, dx, dy)
{
var canvas = document.getElementById('Photo');
var image = new Image();
image.onload = function() {
c=canvas.getContext("2d");
c.canvas.width = window.innerWidth;
c.canvas.height = window.innerHeight;
c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
}
image.src = image_source;
}
Still not working
The drawImage function works asynchronously, it starts loading an image and exits immediately. Then, when the image loads, the canvas is updated. If you run something like:
drawImage('test.jpg',0,0);
drawImage('test2.jpg',0,0);
you will get both images updating the canvas at approximately the same time and only one will appear.
Also, what wolfhammer said is correct. If you set the size of the canvas, you clear it, so drawing one image after the other, even if they are smaller sizes and should both appear, will only show the last one. Check this link on how to solve it: Preventing Canvas Clear when Resizing Window
Further more, you are drawing all images with the width and height of the window, which doesn't make sense. Probably you want to use the width and height of the image (so this.width instead of window.innerWidth)
When you set the width and height of the canvas the data on "Photo" is cleared. I've provide a resize function if resizing is really needed.
function drawImage(image_source, dx, dy)
{
var canvas = document.getElementById('Photo');
var image = new Image();
image.src = image_source;
image.onload = function() {
c=canvas.getContext("2d");
//c.canvas.width = window.innerWidth;
//c.canvas.height = window.innerHeight;
c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
}
}
var can = document.getElementById('can');
var ctx = can.getContext('2d');
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(20, 90);
ctx.lineTo(50, 10);
ctx.lineTo(80, 90);
ctx.lineTo(10, 40);
ctx.lineTo(90, 40);
ctx.lineTo(20, 90);
ctx.fill();
var btn = document.getElementById('btnResize');
btn.addEventListener('click', function() {
resize(can, can.width * 2, can.height * 2);
});
function resize(can, w, h) {
var ctx = can.getContext('2d');
// copy
var can2 = document.createElement('canvas');
var ctx2 = can2.getContext('2d');
can2.width = can.width;
can2.height = can.height;
ctx2.drawImage(can, 0, 0);
// resize
can.width = w;
can.height = h;
ctx.drawImage(can2, 0, 0, can2.width, can2.height, 0, 0, w, h);
}
#can {
border:1px solid red;
}
<button id='btnResize'>Size x 2</button><br/>
<canvas id="can" width="100" height="100"></canvas>
i just want to make a page where u can type a text and add it on selected image and save that as new image.
I tried to do it in few ways, but without luck.
<body>
<canvas id = "idCanvas" width = "576" height = "577"> </canvas>
<img id="canvasImg" width = "576" height = "577"></img>
<script>
window.onload = function(){
var canvas = document.getElementById('idCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var dataURL = canvas.toDataURL();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 576, 577);
context.font = "20px Calibri";
context.fillText("My TEXT!", 50, 200);
document.getElementById('canvasImg').src = toDataURL();
window.alert(dataURL);
};
imageObj.src = "image.png";
};
</script>
When i use toDataURL() in img src, the image won't be displayed, it only works if i'm not using drawImage in canvas.
Ok so yes it will not work for security reason, but there is a solution.
See here a working demo: FIDDLE
draw();
function draw() {
var canvas = document.getElementById('idCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
context.font = "40px Calibri";
context.fillStyle = "red";
context.fillText("My TEXT!", 50, 300);
var canvas = document.getElementById('idCanvas');
var dataURL = canvas.toDataURL();
alert(dataURL);
}
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.src = "https://loremflickr.com/400/200";
};
First of all, Should it be canvas.toDataURL() ?
Here is a similar example with getting contents into image element http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Also I was getting the following error when image is loaded from another hostname:
Uncaught SecurityError: Failed to execute 'toDataURL' on
'HTMLCanvasElement': Tainted canvases may not be exported.
When image is not added to canvas it works fine, so issue could be related to CORS HTTP headers not added with image. Try removing
context.drawImage(imageObj, 0, 0, 576, 577);
to see that it works without image
Here is a demo based on code in question.
http://jsbin.com/logikuwefo/1/edit
I want to write code that can filter the source of an image and return the data that it can be used as source for an image tag in the DOM. Therfore I created a virtual canvas. At the moment it only works with a real canvas within the DOM, even though the dimension is wrong. I only want the converted image source and no canvas in the DOM.
this is how I need it but it doesn't work: js fiddle
this one works with wrong img dimension and unwanted canvas in the DOM: js fiddle2
js:
var image = new Image();
image.onload = function () {
var helperCanvas = document.createElement('canvas');
var ctx = helperCanvas.getContext('2d');
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height);
var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height);
filter(imageData);
data_as_source = ctx.putImageData(imageData, 0, 0 ).toURL();
var img = new Image();
img.src = data_as_source;
context.drawImage(img,0,0);
}
image.src = ....
In your demo code, you should be changing the temporary canvas width/height, not the context’s.
helperCanvas.width = image.width;
helperCanvas.height = image.height;
Here is code with a test filter that just turns all non-transparent pixels red.
It also renders the filtered canvas image to an image on the page.
BTW, when creating an image object, there is a new Chrome bug that can be avoided if you create like this:
var img=document.createElement("img");
Fiddle that must be viewed in Chrome or FF (IE==CORS failure): http://jsfiddle.net/m1erickson/LeGD5/
Here is code:
<!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.createElement("canvas");
var ctx=canvas.getContext("2d");
var img=document.createElement("img");
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0,img.width,img.height);
// test -- turn every non-transparent pixel red
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data; // get pixel data
for (var i = 0; i < pixels.length; i +=4)
{
// if this pixel is not transparent,
// mask it in pure red
if(pixels[i+3]>0){
pixels[i]=255; // this is the red component of the pixel
pixels[i+1]=0; // this is the green component of the pixel
pixels[i+2]=0; // this is the blue component of the pixel
pixels[i+3]=255; // this is the alpha component of the pixel
}
}
ctx.putImageData(imgData, 0, 0);
var theImage=document.getElementById("theImage");
theImage.src=canvas.toDataURL();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
}); // end $(function(){});
</script>
</head>
<body>
<img id="theImage" width=300 height=300>
</body>
</html>
you had a couple bugs in your dataURL part, but this seems to work:
var image = new Image();
image.onload = function () {
var helperCanvas = document.createElement('canvas');
var ctx = helperCanvas.getContext('2d');
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height);
var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height);
filter(imageData);
ctx.putImageData(imageData, 0, 0 );
//context.drawImage(img,0,0);
data_as_source = helperCanvas.toDataURL();
var img = new Image();
img.src = data_as_source;
img.style.border="3px solid red";// for demo sake
document.body.appendChild(img); // for demo sake
}
I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.
jsfiddle:
http://jsfiddle.net/k7fmq/
NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.
This is what I tried so far:
Markup
<div class="signature-field">
Signature:
<span class="sketch-container">
<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
<span class="save-signature">Save Signature</span>
<span class="reset-canvas">Reset Canvas</span>
</span>
Date: <input type="text"><br/><br/>Name: <input type="text">
</div>
JQuery (My latest attempt)
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("#simple_sketch");
var width = myCanvas.width;
myCanvas.width = width + 1;
});
Method 2:
$('.reset-canvas').click(function() {
canvas.width = canvas.width;
});
Method 3:
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Try this: http://jsfiddle.net/k7fmq/1/
The sketchpad plugin keeps an array of "actions", and redraws them each update (which seems unnecessary, really, but whatevs).
var sktch = $('#simple_sketch').sketch(); // store a reference to the element.
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function(){
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="'+img+'"/>');
$('.signature-buttons').replaceWith('');
});
$('.reset-canvas').click(function(){
sktch.sketch().actions = []; // this line empties the actions.
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Try this:
var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();
I am trying to load a picture into HTML5 Canvas.
when i use a URL to load the image everything works fine, but if i put the image on the local drive and point to it, nothing happens.
note: when i use a regular tag, everything works fine and the image is loaded.
here is the code:
var canvas = document.getElementById("rightSide");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "cloud.gif";
context.drawImage(imageObj, 650, 55, 93, 104);
<
canvas id="rightSide" width="800px" height="800">
thanks.
Try something like this.
<canvas id="canvas"></canvas>
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'image.jpg';
A local file being loaded into canvas is treated as being from a different source and therefore "tainted". This is why it's not working for your local file, but does for a URL.