I'm trying to loop through images displayed on a webpage to determine which of them have the topmost left pixel white.
$('img').each(function(){
// create an image object using the current image SRC
var image = new Image();
image.crossOrigin = "Anonymous";
image.src = $(this).attr('src');
//create a canvas and place the image inside the canvas element
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
//grab pixel data
var pixel = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
$(this).attr('data-pixel', pixel);
//remove canvas
$('canvas').remove();
});
Problem is that this now working all the time. When I run it on a single image it works most of the time. But when I go through all the images i get the data-pixel="0,0,0,0"></img>.
Am I missing something?I have never tried using this method before. If you know of a different version please let me know.
Based on the comments above I changed the code to trigger the canvas creation and image draw onload like so:
$('img').each(function() {
var $that = $(this);
var image = new Image();
var canvas = document.createElement('canvas');
var imageSource = $that.attr('src');
image.crossOrigin = 'Anonymous';
image.src = imageSource;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
//grab pixel data
var pixel = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
$that.attr('data-pixel', pixel.toString());
if (parseInt(pixel[0]) > 250 && parseInt(pixel[1]) > 250 && parseInt(pixel[2]) > 250) {
$that.addClass( 'white' );
$that.closest('table').prepend('<h5>White Background</h5>');
}
//remove canvas
console.log(pixel.toString());
$('canvas').remove();
};
});
Related
I'm trying to create a smaller thumbnail of an image on a canvas.
The thumbnail size I'd like is 200 x 200
According to the documentation it should be as easy as drawImage(img, 0, 0, 200, 200) but I get the same results here is my code:
_canvas = document.createElement('canvas'),
ctx = _canvas.getContext("2d"),
img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0, 1200, 600);
var dataURL = _canvas.toDataURL();
// The above creates the first image
//Then while I'm still in the load method I attempt to save another size:
ctx.drawImage(this,0,0,300,300);
var dataThumbURL = _canvas.toDataURL();
}
I save both dataURL and dataThumbURL to the server and both images are the same size.
My assumption is ctx.drawImage could be repeated with just a different size. Any idea how I can achieve this?
The width and height parameters of the drawImage() method do not alter the dimensions of the canvas you draw onto. So if your source image is bigger than the canvas it will simply be cropped.
To have snapshots of different sizes, you need to change the dimensions of the canvas to the desired size prior calling drawImage().
Here's an example:
let image = new Image();
let _canvas = document.createElement('canvas');
let ctx = _canvas.getContext("2d");
image.crossOrigin = "";
image.onload = function() {
let img, dataURL;
_canvas.width = 200;
_canvas.height = 150;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
_canvas.width = 40;
_canvas.height = 30;
ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height);
dataURL = _canvas.toDataURL();
img = new Image();
document.body.appendChild(img);
img.src = dataURL;
}
image.src = "https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/200/300";
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);
How do you make an image appear within an HTML5 Canvas of a certain height and width but have the image appear at 100% size? In other words, keep the image's aspect ratio size intact.
Tree image = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'
I want this image of the above tree to be at 100% size within something you can scroll.
E.g. like the "overflow: scroll" option shown in blue.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
The image must be use be sourced in Javascript.
Javascript:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 100; ctx.canvas.height = 100;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
Html
<canvas id="my_canvas"></canvas>
Here's a JSFIDDLE but the image is of Google. As you can see it is clearly resized/crunched. Instead I want the full size image to be seen there and some sort of scroll option.
http://jsfiddle.net/jzF5R/
Thanks!
by getting the width and height of the img, after the image loaded and then set the canvas.width and canvas.height to it you can set the right size of the canvas
after this you need to draw the image on the canvas on the right perspective, this done be setting the imageObj then set the left top corner to 0,0 and the right bottom corner to the width,height of the image
you can read more about it int this link
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = document.getElementById('img');
imageObj.onload = function(e) {
ctx.canvas.width = imageObj.width;
ctx.canvas.height = imageObj.height;
ctx.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
canvas{
width:100%;
height:100%;
position:absolute;
}
<canvas id="my_canvas"></canvas>
<img style='display:none;'id='img'/>
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
<canvas id="my_canvas" style="border:2px solid;"></canvas>
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
alert(window.innerWidth+"X"+window.innerHeight);
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
};
imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';
this may help.. :)
It is because there is a difference between the real width of your canvas and the width of your box.
So, if you do this, that should work :).
var canvas = document.getElementById('my_canvas');
// What you have to add:
// You can choose clientWidth, offsetWidth... that depends on what you want.
canvas.width = canvas.offsetWidth;
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
ADD CSS
#my_canvas{
width:100%;
}
This is how my code looks:
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, 300, 300);
var tile = {
'id': 1,
'data': imageData,
'dataUrl': imageData.toDataUrl()
};
var div = document.createElement('div');
div.classList.add('tile');
grid.appendChild(div);
div.style.backgroundImage = ('url(' + tile.dataUrl + ')');
});
I'm trying to extract portion of the image on canvas, from (0,0) with height and width 300px, and convert that imageData object into a dataUrl to be used as a background of a div.
I get an error: imageData.toDataUrl() is not a function. How can I achieve this?
Thanks in advance!
toDataURL is an HTMLCanvasElement method you have to call it from the canvas element itself.
You could draw back your resulted imageData to the canvas after you changed its size to the wanted one, but the easiest solution is to use a second, off-screen canvas, where you will draw the first canvas thanks to the context.drawImage method:
// The crop function
var crop = function(canvas, offsetX, offsetY, width, height, callback) {
// create an in-memory canvas
var buffer = document.createElement('canvas');
var b_ctx = buffer.getContext('2d');
// set its width/height to the required ones
buffer.width = width;
buffer.height = height;
// draw the main canvas on our buffer one
// drawImage(source, source_X, source_Y, source_Width, source_Height,
// dest_X, dest_Y, dest_Width, dest_Height)
b_ctx.drawImage(canvas, offsetX, offsetY, width, height,
0, 0, buffer.width, buffer.height);
// now call the callback with the dataURL of our buffer canvas
callback(buffer.toDataURL());
};
// #main canvas Part
var canvas = document.getElementById('main');
var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
canvas.getContext('2d').drawImage(this, 0, 0);
// set a little timeout before calling our cropping thing
setTimeout(function() {
crop(canvas, 100, 70, 70, 70, callback)
}, 1000);
};
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";
// what to do with the dataURL of our cropped image
var callback = function(dataURL) {
document.body.style.backgroundImage = 'url(' + dataURL + ')';
}
<canvas id="main" width="284" width="383"></canvas>
I'm trying to learn manipulate image and canvas in javascript. I'm wondering why we can not do :
var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg';
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
}
img.src =urlimg ;
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
$('#image1').attr('src', img.src);
And we have to do this :
var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg';
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 =urlimg ;
$('#image1').attr('src', img.src);
Is it due to time of image to load ?
Can I create a canvas from an existing object image ?
Thanks.
Is it due to time of image to load ?
Yes in part, but mostly because image loading is asynchronous so the next lines of code are executed right away while the image is loaded. To let you know an event is raised when it's done.
Can I create a canvas from an existing object image ?
No (not directly), but you can draw the image onto a canvas to initialize it (as you already do):
ctx.drawImage(imageElement, 0, 0, width, height);