I am using ng2-img-cropper to crop a photo (not avatar).
https://github.com/cstefanache/angular2-img-cropper
I followed the example:
https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/
I saw that it seems not to support url image, only local image. Is there anyway to make it work with url image?
If not, is there any alternative which can work with url image?
Thanks for any suggestion.
please check the discussion in the following thread: https://github.com/cstefanache/angular2-img-cropper/issues/110
The idea is to work with something like:
var image:HTMLImageElement = new Image();
this.image.crossOrigin = 'Anonymous';
image.src ='https://www.google.ro/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
image.addEventListener('load', (data) => {
this.cropper.setImage(image);
});
Related
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
I created an image directory in my projects in the UI folder to place my images.
So the full path is currently Resources/UI/Images.
When i create an image view it wont display the images.
I tried different options, even a web image but nothing works?
var self = Ti.UI.createView({
backgroundColor:'white'
});
var imgv = Titanium.UI.createImageView({url:"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png"});
self.add(imgv);
var imgv = Titanium.UI.createImageView({url:"../images/sb02.jpg"});
self.add(imgv);
var imgv = Titanium.UI.createImageView({url:"Resources/ui/images/sb03.jpg"});
self.add(imgv);
There is an error in your code. There is no url property for ImageView control. You should use image property. Try the following code
var imgv = Titanium.UI.createImageView({
image:"../images/sb02.jpg"
});
self.add(imgv);
To answer my question thanks to Anand for the tips:
Images should be placed in the Resources dir
Afterwards reference them just by /folder/image.jpg in my case /images/sb1.jpg
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").innerHTML = img;
}
Test 1 works and shows the image, but test 2 doesn't. I am not sure how to solve it but i will need the way test 2 works further along my project since i'm going to have to circle through a large amount of images.
The images are created by JFreeCharts, saved to png and then have to be posted to a site. As a side question: is it possible to push the freecharts objects straight to the jscript instead of having to save them prior (i could throw them into the dictionary and then look them up later but i'm not sure if this works)
Use .appendChild(img) instead of .innerHTML:
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").appendChild(img);
}
Demo
This is because img is an image object, not an html string, so you have to append it to the DOM.
P.S., don't forget that the alt attribute is required in the img tag!
I am saving images of my aplication into gridfs. The problem becomes when I need to show the image. I don't know how can i do it. I'm using node.js, geddy framework and mongodb.
this.show = function (req, resp, params) {
var self = this;
var GridFS = require('GridFS').GridFS;
var myFS = new GridFS('resources');
//recupero la imagen
myFS.get(params.id,function(err,data){
});
myFS.close();
params.id is the image id. When i do console.log(data) I recive:
Buffer <90 f8 w8 dj 4f....>
How can I do to respond the image in png format to the view?
thanks...a lot!
I've never used geddy at all, but you might want to look at this:
Render Image Stored in Mongo (GridFS) with Node + Jade + Express
The basic idea is to set the right "Content-Type" header ("image/png" should work) and simply reply to the request with the image data.
Your browser can render the image if you're using an <img src="/url/to/your/image/request/handler">... tag in the html.
You can't console.log image data with most shells / command lines, sorry. ;)
var img = new Image();
img.src = '/images/backdrop.jpg';
ctx.drawImage(img,0,0);
I wanted to load an image from local disk on to canvas using dialog box mechanism rather than the path directly specified as in above example. I tried different sorts using JavaScript but in vain, even tried using the input type as file. What else can I try?
Take a look here:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
It's important to have drawImage call after the image has loaded:
var img = new Image();
img.onload = function() {
var ctx = document.getElementById('ctx').getContext('2d');
ctx.drawImage(img, 0, 0);
}
img.src = 'images/backdrop.jpg';
Also, note that you probably want to use images/backdrop.jpg instead of /images/backdrop.jpg (note there's no slash in front), as using the latter would get the image from root directory, I would assume that's probably not where your images are.
As far as loading from a dialog box, you can replace the last line from the above with something like this:
var name = prompt("Enter the name of the file", "backdrop.jpg");
img.src = 'images/' + name;
This way, the user would be able to enter the name of the image file to load it. Of course, you need to have that file in your images folder.
Hope this helps.