I have the next code which slice an image. I have the next HTML code
<img id="imagen" src="original.png" >
<canvas id="myCanvas" width="150" height="600"></canvas>
jQuery code
$(document).ready(function() {
var image = document.getElementById('imagen');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
image.onload = function() {
ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
};
var i = canvas.toDataURL('image/jpeg');
console.log( i );
});
Now when I tried to get the sliced part, which is store on the canvas variable when I check the i I get an black image.
Someone can tell me why this happened and how to solve it?
Thanks.
You have to draw to the canvas first before you can get the drawing on the canvas as an image, to make sure the canvas is drawn to get the image after the canvas was drawn to
image.onload = function() {
ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
var i = canvas.toDataURL('image/jpeg');
console.log( i );
};
Related
I am trying to draw an image on a canvas, in HTML5. For some reason, the image simply isn't drawn onto the canvas, and there are no errors in the console. Here is my code:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="Images/player.png"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
context.drawImage(image, 0, 0);
</script>
</body>
</html>
Can somebody help? Thanks.
You need to add an event listener to the img tag called load. Then in the callback you can call drawImage with the provided img element.
You can do something like this - I have added one stackoverflow image for representation:
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
image.addEventListener('load', e => context.drawImage(image, 0, 0));
<img id="image" src="https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/images2/header-podcast.svg" height="100px"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
From the documentation: Drawing an image to the canvas
I hope this helps!
I have an image which is loaded from server and contains 4 bands in RGB format. Because of the alpha band which causes the image to look transparently, then I need to crop this alpha band and save it as JPEG format. One way I can think is using canvas, however, I'm not sure it possible or not as the test I did show that the image is the same.
<p>Image to use:</p>
<img id="scream" src="data/with_alpha.png" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="2400" height="2097" style="border:1px solid #d3d3d3;">
</canvas>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.globalAlpha = 1;
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
// This ones does not do anything to remove the alpha band
c.toDataURL("image/jpeg", 0.0);
}
I found the answer from http://sunbox.github.io/image-to-canvas-to-image/ it can be like this to convert canvas to image:
// Get the image
var sampleImage = document.getElementById("ringoImage"),
canvas = convertImageToCanvas(sampleImage),
image = convertCanvasToImage(canvas);
// Actions
document.getElementById("pngHolder").appendChild(image);
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/jpeg");
return image;
}
I am working on a dynamic web map with HTML5 and canvas.
I loaded the map in PNG format, but whenever I try to draw on it, it draws behind the map like this:
I need it to draw over the white squares.
This is my code:
window.onload = function() {
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "img/plano.png"; //transparent png
ctx.fillRect(1039, 150, 50, 50);
}
Thanks in advance!
The fillRect needs to happen after the image has loaded. The image loads asynchronously so the only safe place for this to happen is after the drawImage...
img.onload = function() {
ctx.drawImage(img, 0, 0);
ctx.fillRect(200,200,50,50); // Draw rect after image
}
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
here is the jsfiddle
i have this as my source canvas
HTML
<h1>Source Canvas</h1>
<canvas id="source" width=436 height=567></canvas>
<h1>Destination Canvas</h1>
<canvas id="destination" width=436 height=567></canvas>
javascript
var sourceImage, ctx, sourceCanvas, destinationCanvas;
//get the canvases
sourceCanvas = document.getElementById('source');
destinationCanvas = document.getElementById('destination');
//draw the source image to the source canvas
ctx = sourceCanvas.getContext('2d');
function start() {
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = "source-atop";
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.globalAlpha = .10;
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
//ctx.globalAlpha = 1;
}
var img1 = new Image();
var img = new Image();
img.onload = function () {
img1.onload = function () {
start();
}
img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";
i want to to show what is in source canvas in my destination canvas.
i tired
var image, destinationCtx;
//create the image
image = new Image();
//get the base64 data
image.src = sourceCanvas.toDataURL('image/png');
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(image, 0, 0);
//done
but having no luck. am i missing something?
Copy via imageData,Copy via Base64 data,Copy via direct draw any method will do my job.
when i try with
http://jsperf.com/copying-a-canvas-element
it copies but when i put my source canvas writer it does not work ? am i missing something?
You can directly copy one canvas over other. Like this...
var destinationCtx;
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(sourceCanvas, 0, 0);
You can use getImageData from the source canvas and putImageData to the destination canvas.This is the fastest one compare to other ways.
var sourceCtx, destinationCtx, imageData;
sourceCtx = sourceCanvas.getContext('2d');
destinationCtx = destinationCanvas.getContext('2d');
imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width - 1, sourceCanvas.height - 1);
destinationCtx.putImageData(imageData, 0, 0);
source:/ https://jsperf.com/copying-a-canvas-element