I want to use image cropper tool for that I have use cropper.js.
image cropper is working fine but I want to show image after cropping in another image tag
for that I have use below code
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
var croppedImageDataURL = $('.preview').cropper('getCroppedCanvas').toDataURL("image/png");
}
});
but it is not working myfor my full code I have made jsfiddle.
can anybody help me in this
Related
What is the id of this canvas: carstenschaefer.github.io/DrawerJs/examples/fullscreen I want to add download button to under this canvas. I imported the source code into vscode. I tried various download codes but none of them worked. I think I'm writing the id wrong.
document.getElementById('download').addEventListener('click', ()=> {
var canva = document.getElementById("canvas");
var image = canva.toDataURL("image/png").replace("image/png", "image/octet-stream");
var element = document.createElement('a');
var filename = 'test.png';
element.setAttribute('href', image);
element.setAttribute('download', filename);
element.click();
})
When you create an instance of drawer
const drawer = new DrawerJs.Drawer(null, { ...options });
You can call
drawer.api.getCanvasAsImage()
To get the canvas converted to base64 which you can then use it to Post to a backend server or download it.
Took at look at download.js maybe you could try using it to help with saving.
I am building an EaselJS app, and I want the user to be able to select an image from their hard drive to be the background for the app. Once they are done interacting with the app and choose to submit I want to upload the image, but not before then. Is there a way I can do this? I am using Rails if that makes any difference.
You can use the method readAsDataURL from Filereader,then pass the result to an Image object and finally pass that image as parameter of a new easeljs.Bitmap object.
function previewFile(){
var file = input.files[0];
var reader = new FileReader();
reader.onloadend = function () {
image.src = reader.result;
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
}
if (file) {
reader.readAsDataURL(file);
} else {
alert("fail");
}
}
I created a fiddle that does something like that:
https://jsfiddle.net/vampaynani/b5maj7nd/
Now I have a form field:
<input id="my_img_field" type="file"/>
After I select the image in the browser, I want to render the selected image file on the target img tag:
<img id="image_preview" />
But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.
I heard that this could be done using HTML5 technique. Can someone teach me how?
the code in vanilla js
var file = document.getElementById('my_img_field').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
var img = document.getElementById('image_preview')
img.src = this.result
}
The following approach will work:
var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = $('#image_preview');
img.attr('src', this.result);
}
It can be like this
const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)
i have a script that changes the current image with the selected image but i need to insert an attribute so that it targets the image tag with only that class
CODE----
<script>
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").attr(".the_pre_prev").prop("src", target.result);// tried $("img").attr("CLASS NAME").prop("src", target.result)
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
If you want to target an image with an specific class, you can simply do (assuming you're using jQuery):
$("img.the-class").attr("src", target.result)
See the jQuery class selector for reference.
jsfiddle.net link to code problem is when you chose multiple image files, it load all images to browser, draws all divs, but only shows one image. It should give every div its own image.
This seems to be the trouble maker code part:
$('#import').change( function(event){
namelist = new Array;
var files = event.target.files;
for(i=0;i<event.target.files.length; i++){
pictures = files[i];
image = new Image();
image.id = i;
image.file = pictures;
var reader = new FileReader();
reader.onload = function(evt){
image.src = evt.target.result;
}
namelist.push({sourceimage: image, id:i});
reader.readAsDataURL(pictures);
}
drawDivs();
});
reader.onload = (function(image){
return function(evt){
image.src = evt.target.result;
};
})(image);
Closure fixed it