I want to get image data using toDataURL().but my Imagedraw() method is not working.
var video = document.getElementById('media-video');
var videoCurrentTime = document.getElementById('media-video').currentTime;
var canvasWidth = $('video').width();
var canvasHeight = $('video').height();
var c = $('body').append($('<canvas>',{id: 'myCanvas', width:canvasWidth, height:canvasHeight}));
var ctx;
$(document).ready(function() {
c = document.getElementById('myCanvas');
ctx = c.getContext("2d");
});
c.onload=function(){
ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
}
imageData = c.toDataURL("image/jpeg",1.0);
window.open(imageData, "toDataURL() image", "width=600, height=200");
}
I could see a blank canvas returned in imageData.
Becouse c.onload= is acyns. You most get toDataURL after onload.
c.onload=function(){
ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
imageData = this.toDataURL("image/jpeg",1.0);
window.open(imageData, "toDataURL() image", "width=600, height=200");
}
Related
I am trying to take a pattern and apply it over a png image but only cover the non-transparent part of the image similar to this one.
http://jsfiddle.net/eLmmA/1/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'http://i.stack.imgur.com/QtQrZ.png';
}
img.src = 'http://i.stack.imgur.com/MDGFY.jpg';
document.body.appendChild(canvas);
});
The example above is really close to what I want but I need to be able to use a smaller texture image and repeat it over the none pattern image. I am not familiar with how to use canvas properly but trying to learn more about it.
Thanks in advance!
Never mind I figured it out.
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
var ptrn = canvas_context.createPattern(img, 'repeat');
canvas_context.fillStyle = ptrn;
canvas_context.fillRect(0, 0, canvas.width, canvas.height);
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';
}
img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';
$('#itemPreview').html(canvas);
I have the following code that load image into my canvas:
<html>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'Map.png';
var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
</script>
I know how to draw a dot, But I want to know how to draw my marker (example green icon) on x,y on the image, how can i do that?
I have image with my marker, I just want to draw my image marker on my image map.
Thanks.
You have to do the same for your marker what you're doing for your map:
...
var markerObj = new Image();
markerObj.onload = function() {
context.drawImage(markerObj, x, y);
};
markerObj.src = 'marker.png';
...
JSBin
I want to generate some pdf page previews from a pdf in a html page. Those previews are generated correctly but not in the same order as pdf`s pages.
My code is :
var PDF_FILES_DIRECTORY = "",
PDF_FILES = ['pdf2.pdf'];
var CURRENT_FILE = {};
$.each(PDF_FILES, function (index, pdf_file) {
PDFJS.getDocument(PDF_FILES_DIRECTORY + pdf_file).then(function (pdf) {
for(idxPage = 1 ; idxPage < pdf.numPages ; idxPage++) {
pdf.getPage(idxPage).then(function (page) {
var viewport = page.getViewport(1);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function () {
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img_src = canvas.toDataURL();
var $img = $("<img>").attr("src", img_src);
var $thumb = $("<div>")
.attr("class", "thumb")
.append($img);
$thumb.appendTo("#thumbnail");
canvas.remove();
});
}); // end of getPage
}
}); // end of getDocument
}); // end of each
Thanks.
As an exercise, I would like to fill the background of the browser window with pixels of random color: https://jsfiddle.net/j8fay7bs/3/
My question is how to retrieve the current filling of the background image and randomly change the pixels? Currently the image seems to be reverted to black.
// redraw canvas pixels on resize --------------------------
var render = function resize() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var t0 = performance.now();
for (var i = 0; i < canvas.width*canvas.height; i++) {
if (Math.random() < 0.5) {
imageData.data[i*4] = Math.round(Math.random()*255);
imageData.data[i*4+1] = Math.round(Math.random()*255);
imageData.data[i*4+2] = Math.round(Math.random()*255);
imageData.data[i*4+3] = 255;
}
}
context.putImageData(imageData, 0, 0);
$('#fps').text(1000/(performance.now() - t0) + " fps");
}
window.onresize = render;
// rendering loop ---------------------------------------
(function loop() {
setInterval(render, 10);
})();
You may retrieve the last image data before u touch the canvas width and height,
once u touched them, the canvas will be reset:
var render = function resize() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var oldImageData = context.getImageData(0, 0, canvas.width, canvas.height); // <----
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
updated fiddle
I want to create an image object in fabric.js from ImageData object, we can get ImageData from this:
var imgData=ctx.getImageData(10,10,50,50);
//ctx.putImageData(imgData,10,70);
// something liket that
var image = new fabric.Image.fromImageData (...);
Is there any way to create an image object from ImageData object?
Let me put my idea here, I don't like this way but have no others around -
var ctx = canvas.getContext('2d');
var data = ctx.getImageData(0, 0, 20, 20);
var c = document.createElement('canvas');
c.setAttribute('id', '_temp_canvas');
c.width = 20;
c.height = 20;
c.getContext('2d').putImageData(data, 0, 0);
fabric.Image.fromURL(c.toDataURL(), function(img) {
img.left = 50;
img.top = 50;
canvas.add(img);
img.bringToFront();
c = null;
$('#_temp_canvas').remove();
canvas.renderAll();
});