I'm using this input for adding new image
<input type="file" id="profile_photo_add" ref="profile_photo_add" #change="createProfilePhotoPreviewInAdd"/>
<vue-cropper
v-if="urlProfilePreviewAdd"
ref="cropperAdd"
:src="urlProfilePreviewAdd"
alt="Source Image"
:aspectRatio="16/9"
:initialAspectRatio="16/9"
:autoCropArea="1"
:zoomable="false"/>
And this method for creating object url for cropper
createProfilePhotoPreviewInAdd(e)
{
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
console.log(this.urlProfilePreviewAdd)
console.log(this.$refs.cropperAdd)
}
First time when i upload a image, the cropper shows that image, if i'm trying to upload other image, the cropper doesn't refresh.
If i console.log the cropper ref and the urlProfilePreviewAdd i see that urlProfilePreviewAdd is changing but the cropper ref target stays the same as first time.
How to update in real time with the input, the cropper too?
SS for console.logs
Take a look to ss for console.logs too here.
You must call the replace function on the cropper instance as noted in the documentation
Replace the image's src and rebuild the cropper.
setImage(e) {
this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
this.$refs.cropper.replace(this.urlProfilePreviewAdd);
},
I'm working on a requirement where I planned to dynamically set the URL on load of the component.
I have a tag where the src attribute will be set from a service call which would return image. If the image is not present I need to set a fallback image. How can I handle this.
The image is in binary code format(.png) image
I had a similar problem. This is my solution :
1)For the image you set a dynamic src like this :
< img :src="image" >
In the data you set image to the url or relative path of the image you want to use as a default. Like this :
Data() {
return {
image : "path",
}
}
You preload the default image your main html file, like this :
< link rel="preload" type="image" or type="img/png" href="path" >
To change the image to the image in the axios call you just write :
this. image = messageImg
I hope this is helpfull.
I'm using node.js to generate a direct upload file tag for Cloudinary
cloudinary.uploader.image_upload_tag('coverImage', {html: {'class': 'cloudinary-coverImage', format: 'jpg'}})
After uploading, a hidden input tag like this is auto generated at the end of the form:
<input type="hidden" name="coverImage" value="image/upload/v1431361091/bns8et8ksrx3km5esdpj.jpg#d36285fd9bcccd5a2034b22ebf69d867fcee0bbc">
I realize that the input value is not exactly the public id like said in the docs, so when I store it in the DB, this will not generate a proper image
cloudinary.image(abc.coverImage)
How can I get the image's exact public id in the hidden input value?
TL;DR
The format of the hidden input tag's value is {resource_type}/{type}/v{version}/{public_id}.{format}#{signature}. You need the public_id, which in your example is bns8et8ksrx3km5esdpj.
Details
The value of the hidden field includes the resource type, version, public id and the signature of the uploaded image. The public_id is the last part of the URI before the Hash (#).
Refer to the sample code, taken from the node.js controller code, for an example of handling the upload results (to match your example above, image_id below should be replaced with the name you designated for the field, i.e. coverImage):
var Photo = schema.models.Photo;
var photo = new Photo(req.body);
var image = new cloudinary.PreloadedFile(req.body.image_id);
// check that image resolved from image_id is valid
if (image.is_valid()){
photo.image = image.toJSON();
console.dir(photo.image)
}
photo.save().then(function(photo){
console.log('** photo saved')
})
Brower side
If you need to get the public_id of the image following a direct upload on the browser side, you should listen to the "cloudinarydone" event:
$("body").on( "cloudinarydone", function(e, data) {
console.log(data.result.public_id);
});
My app has a bunch of images stored as blobs in the local SQLite Database. These images are taken with the device camera. I'm using Titanium Alloy, so the image was saved using the .save() method an Alloy Model.
I've started using the TiSocial module that can post an image to Twitter or Facebook. One its parameters is image and it has to be:
a local/remote path to an image you want to share
The image I want to use is set as the image property on an ImageView. The ImageView image is set like this: $.theImageView.image = args.the_image;, where args.image is the image blob, taken from the database collection.
I tried to take this image blob and set it as the image on the TiSocial module initialisation method:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: args.the_image,
removeIcons:"airdrop,print,copy,contact,camera"
});
Alternatively I tried to take use the image saved on the ImageView, like this:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: $.theImageView.image,
removeIcons:"airdrop,print,copy,contact,camera"
});
However neither of these worked, and no image appears in the Tweet or Facebook message dialogs. And no error appears in the console.
On the other hand, if I set the image property to an image saved in the assets folder, then it works just fine. For example:
`image: "an_image.jpg"`
I tried a solution mentioned in the comments below, which was to save the image to Ti.FileSystem, and then read the image from there. However, this still did not work.
You could try sharing remote images this way...
var largeImg = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : 'auto',
image :'http://www.google.com/doodle4google/images/splashes/featured.png'
});
var imageGoogle =largeImg.toBlob();
// share image
Social.activityView({
status : "Hello world! Take a look at this: ",
image : imageGoogle,
removeIcons:"airdrop,print,copy,contact,camera"
});
then i would suggest to add one field called img_path in your database table because you can not get path from blob so when you store any blob to alloy model then also add its path to that model so you can retrieve it later and can share.
Hope you understand.
I had some luck by saving the file to the Ti.Filesystem, and then later retrieving it and using the .getNativePath() method:
function getImage() {
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, args.alloy_id + '.jpg');
return f.read();
}
var theImage = getImage();
Social.activityView({
text: "Just tried this beer called " + args.name,
image: theImage.getNativePath(),
removeIcons:"airdrop,print,copy,contact,camera"
});
I keep getting the error image icon when reading images from my DB.
Here is the HttpHandler code:
public void ProcessRequest(HttpContext context) {
....
//After we got the data table:
byte[] image = (byte[])dt.Rows[0]["Picture"];
context.Response.ContentType = dt.Rows[0]["PictureType"].ToString();
context.Response.BinaryWrite(image);
}
I do check and see that image is not null (Just a really big array, as it should be), and PictureType does save the type of the picture that was previously saved in the db. But I still see the error image icon when calling the handler:
<img src='myhandler.ashx?imgid=someid'/>
Any reason for this to happen?