I created a png picture and wanted it do display on a leaflet map.
I tried it like in the code below but it does not work.
(net::ERR_FILE_NOT_FOUND)
Any Ideas how i could do this? Here is the code.
var pic = new PNGlib(200, 200, 256);
var background = pic.color(23, 0, 0, 50);
var my_png = pic.getBase64()
var overlay = new L.ImageOverlay( my_png , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);
I think you have a URI problem. You need to add a "data:image" for your image to appear.
MDN data URLs
You can see an example that works on my codesandbox.
var pic = new PNGlib(200, 200, 256);
var background = pic.color(23, 0, 0, 50);
var my_png = pic.getBase64()
const b64ImgUrl = `data:image/png;base64,${my_png}`;
var overlay = new L.ImageOverlay( b64ImgUrl , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);
Related
I had drawn an animation in canvas like this and rendered a map using openlayers4. I want to add this canvas to the map[openlayers canvas] in next step.
I had used ol.source.ImageCanvas add a boundary to openlayers, so I try to add the canvas with animation using ImageCanvas, but failed.
What's more, openlayers API said ol.source.ImageCanvas method only the image canvas can be added. I didn't know whether the animate canvas so does.
Should I insit on using ImageCanvas method or try others?
Can someone give me an example if I abandon the ImageCanvas method?
After some tries, I got a solution! Haha!
First: the ol.source.ImageCanvas can still use, but you will get a stopped animate just like a screenshot.
Second: must know the ol.map.render() in openlayers3 or openlayers4, whose description is:
Request a map rendering (at the next animation frame).
Thus, you can use it to refresh the map and get the next animation of canvas.
The following is snippets of my code:
var topoCanvas = function(extent, resolution, pixelRatio, size, projection) {
// topo features;
var features = topojson.feature(tokyo, tokyo.objects.counties);
var canvasWidth = size[0];
var canvasHeight = size[1];
var canvas = d3.select(document.createElement('canvas'));
canvas.attr('width', canvasWidth).attr('height', canvasHeight);
var context = canvas.node().getContext('2d');
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
var d3Path = d3.geo.path().projection(d3Projection);
var pixelBounds = d3Path.bounds(features);
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
var geoBounds = d3.geo.bounds(features);
var geoBoundsLeftBottom = ol.proj.transform(geoBounds[0], 'EPSG:4326', projection);
var geoBoundsRightTop = ol.proj.transform(geoBounds[1], 'EPSG:4326', projection);
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
if (geoBoundsWidth < 0) {
geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
}
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
var widthResolution = geoBoundsWidth / pixelBoundsWidth;
var heightResolution = geoBoundsHeight / pixelBoundsHeight;
var r = Math.max(widthResolution, heightResolution);
var scale = r / (resolution / pixelRatio);
var center = ol.proj.transform(ol.extent.getCenter(extent), projection, 'EPSG:4326');
d3Projection.scale(scale).center(center).translate([canvasWidth / 2, canvasHeight / 2]);
d3Path = d3Path.projection(d3Projection).context(context);
d3Path(features);
context.stroke();
// above code is add a topoJson boundary to canvas
// below code is add an animation to canvas
var settings = createSettings(tokyo, {
width: canvasWidth,
height: canvasHeight
});
// reset the projection and bounds for animation canvas
settings.projection = d3Projection;
settings.bounds = geoBounds;
var mesh = buildMeshes(tokyo, settings);
when(render(settings, mesh, {
width: canvasWidth,
height: canvasHeight
})).then(function(masks) {
when(interpolateField(stations, data, settings, masks)).then(function(field) {
// wind moving animation
animate(settings, field, canvas);
// refresh the map to get animation
window.setInterval(function() {
map.render();
}, 50);
});
});
return canvas[0][0];
}
I've got this fiddle, where I'd like to achieve sort of rasterized thumbnail of canvas view. Everything works ok until some paths overflow view bounds and those overflowed parts also get exported into thumbnail, what is not desired. Only parts that are visible on canvas should be visible in thumb. I've experimented with clipMask, no success unfortunately.
html code
<canvas id="c"></canvas>
<img id="thumb" />
paperscript code
paper.install(window);
var canvas = document.getElementById('c');
paper.setup(canvas);
var style = {
fillColor : 'black'
};
var objects = new Group();
var background = new Path.Rectangle(view.bounds);
background.fillColor = 'red';
var rect = new Path.Rectangle(-10, 20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);
var rect = new Path.Rectangle(60, -20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);
var rect = new Path.Rectangle(195, 20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);
var rect = new Path.Rectangle(60, 195 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);
objects.bringToFront();
view.draw();
var data = project.activeLayer.rasterize().toDataURL();
var img = document.getElementById('thumb');
img.src = data;
Do you guys have any idea how can this be solved?
Thank you very much for any kind of help.
Okay, so I eventually figured it out. Needed to use getSubRaster function to crop out subraster I needed. To find out how much pixels are overflowing from top or left I used project.activeLayer.bounds.x and .y, which are negative, when overflowing from view.
If someone knows more elegant solution, please let me know.
Here's an updated fiddle
In Javascript, what's the best way to draw an image to a canvas only if you have the link to the image, like this: http://www.mydomain.com/folder/car.png?
Note: the link will be on the same domain incase you were wondering.
Instantiate an Image(), set the url, and call context.drawImage(params).
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
http://jsfiddle.net/dYupU/
You just need to define a js Image object, and use drawImage()
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext('2d');
var ballon = new Image();
ballon.src = "http://i.imgur.com/6l6v2.png";
context.drawImage(ballon, 100, 1)
Here's an example with multiple links, and an alert inside the loop to show you each link's value
var can = document.getElementById('pictures');
var ctx = can.getContext('2d');
var img = ['http://placekitten.com/200/300','http://placekitten.com/100/100','http://placekitten.com/125/125','http://placekitten.com/50/50','http://placekitten.com/150/300'];
for(var i = 0; i <= img.length - 1; i ++){
var cat = new Image();
cat.src = img[i];
ctx.drawImage(cat, 50, 50);
alert('drew ' + cat.src);
}
DEMO
I am stumped. I can't get EaselJS' AlphaMaskFilter to work. I don't think I'm doing anything wrong but it doesn't show what I'm expecting. It should look like you're pointing a flashlight at a google billboard. http://jsfiddle.net/mLn8e/
var stage = new createjs.Stage("c");
var mask = new createjs.Shape();
mask.graphics.beginRadialGradientFill(["rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0)"], [0, 1], 0, 0, 0, 0, 0, 20).drawCircle(0, 0, 20);
mask.cache(-20, -20, 40, 40);
mask.x = 100;
mask.y = 100;
var bg = new createjs.Shape();
bg.graphics.beginFill("#000000").rect(0, 0, 400, 400);
stage.addEventListener("stagemousemove", function(e) {
mask.x = e.stageX;
mask.y = e.stageY;
stage.update();
});
stage.addChild(bg, mask);
stage.update();
var img = new Image();
img.src = "https://www.google.nl/intl/en_ALL/images/logos/images_logo_lg.gif";
img.onload = function (e) {
var bmp = new createjs.Bitmap(e.target);
bmp.x = 0;
bmp.y = 0;
var amf = new createjs.AlphaMaskFilter(mask.cacheCanvas);
bmp.filters = [amf];
stage.addChild(bmp);
stage.update();
};
The two most important lines are de var amf = ... line and the bmp.filters = [amf]; line, those two break the program.
Thanks in advance!
Filters (like createjs.AlphaMaskFilter) are not included in the main package of CreateJS and EaselJS. You have to include them separatly. This information can be found in the docs: http://www.createjs.com/Docs/EaselJS/classes/Filter.html - I know, not very prominent, I had the same issue :)
And the 2nd thing, in the fiddle you var is called amff and in the line below you try to use amf (lines 28 + 29 of the fiddle)
*edit: And what I also just noticed, you don't cache the bmp - in order for a filter to take effect, you have to cache it after applying the filter initially and then use updateCache() in the stagemousemove-listener. Here is an example for a similar use of what you are trying to do: https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html
I'm building a jQuery plugin which watermarks images (and yes, i'm well aware of the multitudinal drawbacks of a javascript/html5 watermarking system but just ignore that for now.) The basic method for each image is:
paste the image to the background of a canvas
add the data for a watermark image over that,
replace the src of the original image with that of the canvas (which now contains the watermark.)
Now it appears to work fine if I replace the image element with the canvas itself.. all of the elements appear on the canvas. But when I get the dataURL of the canvas, everything but the last image drawn onto it appears. I wouldn't even mind except this plugin also needs to replace the links to images as well, and so replace the hrefs with data urls (with the watermark.)
This is the current code:
(function($){
$.fn.extend({
cmark: function(options) {
var defaults = {
type: 'image',
content: 'watermark.png',
filter: 'darker',
scale:300,
box: {
top : 0.5,
left : 0.5,
width : 0.75,
height : 0.75,
bgcolor : '#000000',
bgopacity : 0.5,
fgopacity : 1
},
callback_unsupported: function(obj){
return obj;
}
}
var getScale = function(w, h, scale){
ratio = Math.min(scale/w, scale/h);
scalew = Math.round(ratio*w);
scaleh = Math.round(ratio*h);
return [scalew,scaleh];
}
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
canvas = document.createElement('canvas');
if(!window.HTMLCanvasElement){
return options.callback_unsupported(obj);
}
/* if selecting for images, reset the images. Otherwise,
we're replacing link hrefs with data urls. */
if(obj.attr('src')){
target_img = obj.attr('src');
}
else if (obj.attr('href')){
target_img = obj.attr('href');
}
// get the filetype, make sure it's an image. If it is, get a mimetype. If not, return.
ftype = target_img.substring(target_img.lastIndexOf(".")+1).toLowerCase();
canvasbg = new Image();
canvasbg.onload = function(){
iw = canvasbg.width;
ih = canvasbg.height;
scale = getScale(iw, ih, options.scale);
iw = scale[0];
ih = scale[1];
canvas.setAttribute('width', iw);
canvas.setAttribute('height', ih);
ctx = canvas.getContext('2d');
/* define the box as a set of dimensions relative to the size of the image (percentages) */
bw = Math.round(iw * options.box.width);
bh = Math.round(ih * options.box.height);
// for now the box will only ever be centered.
bx = Math.round((iw * options.box.top) - (bw/2));
by = Math.round(ih * options.box.left - (bh/2));
/* draw the box unless the opacity is 0 */
if(options.box.bgopacity > 0){
ctx.fillStyle = options.box.bgcolor;
ctx.globalAlpha = options.box.bgopacity;
ctx.fillRect(bx, by, bw, bh);
}
wm = new Image();
wm.onload = function(){
ww = wm.width;
wh = wm.height;
scalar = Math.max(bw, bh); // scale to within the box dimensions
scale = getScale(ww, wh, scalar);
ww = scale[0];
wh = scale[1];
ctx.globalCompositeOperation = options.filter;
ctx.drawImage(wm, bx, by, ww, wh);
}
wm.src = options.content;
ctx.drawImage(canvasbg, 0, 0, iw, ih);
obj.replaceWith(canvas);
$('body').append('<img src="'+canvas.toDataURL()+'">');
//obj.attr('src', canvas.toDataURL());
}
canvasbg.src = target_img;
});
}
})
})(jQuery);
I added a line which dumps an image with the data url directly onto the page for testing and this is what I see... on the left is the canvas element, on the right is the image with the data url:
So yeah, this has had me stumped for a couple of days now. I'm probably missing something horribly obvious but I can't see it.
... edited because the example is no longer online. sorry.
First of all, don't build a string buffer that big for a tag.
var img = new Image();
img.src = canvas.toDataURL();
$('body').append(img);
Or if you prefer:
$('body').append($('<img>').attr('src', canvas.toDataURL()))
Second, you are getting there dataURL of the canvas before you draw the watermark. The drawing happens in the wm.onload callback function, which happens when the watermark loads. That may not fire until way after canvasbg.onload fires off, which is where you get the dataURL.
So move the image append into code at the end of the wm.onload callback and you should be good.