I want to crop image with canvas and to change dropzone thumbnail after success I'm using this code:
success: function (file,responseText) {
$('#dzImageHidden').val(responseText);
if (responseText) {
var imageUrl ='{{ asset('uploads/dz/') }}' + '/' + responseText;
var img = $('<img id="target">');
img.attr('src', imageUrl);
var image = new Image();
var canvas = document.getElementById('img');
var ctx = canvas.getContext('2d');
image.src = imageUrl;
file.previewElement.querySelector("[data-dz-thumbnail]").src = ctx.drawImage(image, 0, 0, 100, 165);
}
I got this error :
TypeError: canvas is null
Maybe is null because of this: var canvas = document.getElementById('img');
You have selected the tag img, not an id.
Related
I added a new button in exporting list of a chart
Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
text: 'Add Issue ',
onclick: function () {
this.AddIssue();
}
});
i want to add a screenshot of a chart in the img tag in same page when i click AddIssue button,
Highcharts.Chart.prototype.AddIssue = function () {
....
$('#mock').attr('src', .........);
}
i had an img tag as
<img id="mock" src="../" />
i tried using getSVG Function but i want it to be a PNG or JPEG image not SVG.
Inside AddIssue Function
var svg = this.getSVG();
var base_image = new Image();
var Isvg = "data:image/svg+xml," + svg;
base_image.src = Isvg;
You can convert SVG from getSVG method to PNG by HTML canvas:
load: function() {
var chart = this,
svg;
$('#btn').on('click', function() {
svg = chart.getSVG();
var canvas = document.createElement('canvas');
canvas.width = chart.chartWidth;
canvas.height = chart.chartHeight;
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {
ctx.drawImage(img, 0, 0);
canvas.toDataURL('image/png');
};
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
});
}
Live demo: http://jsfiddle.net/BlackLabel/3azfr1nL/
Other solutions can be find here: https://ourcodeworld.com/articles/read/15/3-ways-to-export-highcharts-charts-to-image-with-javascript-client-side-solution-
and here: https://gist.github.com/philfreo/0a4d899de4257e08a000
HTML Template
<html>
<form>
Image to resize: <input type="file" id="getImage"><br><br>
</form>
<img src="." id="image">
<html>
Java Script
<script>
document.getElementById('getImage').onchange = imageResize(60,60);
var imageResize = function (Width, Height) {
//-- GET FILE FROM FORM
var selectedFile = this.files[0];
//-- GET BASE 64
File.prototype.convertToBase64 = function (callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(this);
};
selectedFile.convertToBase64(function (base64) {
//-- MAKE IMAGE
var img = document.createElement('img');
img.src = base64;
//-- PUSH INTO CANVAS
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = Width; // If i change Width & Height to numbers it works!!
canvas.height = Height;
ctx.drawImage(this, 0, 0, Width, Height);
//-- SHOW IMAGE ON PAGE
document.getElementById("image").src = canvas.toDataURL();
};
});
};
</script>
Just above I'm setting the canvas width and height to 60x60 but i cant use the variables I've passed in without getting an error, and I cant figure out why. the error is
Uncaught TypeError: Cannot read property 'files' of undefined
here you should attach the event listener to input element.but instead you attached to img element
and you also want to access the files inside the event listener,so you should pass this reference to the listener
and the way you are attaching the event is not right.
your are doing this document.getElementById('getImage').onchange = imageResize(60,60);
this is wrong as it will execute the imageResize() and assigns the result to on change event.
actually you should attach reference of the function like below
document.getElementById('getImage').onchange = imageResize;
i edited your code a little.
try this snippet.
var imageResize = function(Width, Height, files) {
var selectedFile = files[0];
File.prototype.convertToBase64 = function(callback) {
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result);
};
reader.readAsDataURL(this);
};
selectedFile.convertToBase64(function(base64) {
var img = document.createElement('img');
img.src = base64;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = Width;
canvas.height = Height;
ctx.drawImage(this, 0, 0, Width, Height);
document.getElementById("image").src = canvas.toDataURL();
};
});
};
var file = document.getElementById('getImage');
file.onchange = function() {
imageResize(160, 160, this.files);
};
<form>
Image to resize:
<input type="file" id="getImage">
<br>
<br>
</form>
<img src="." id="image">
Image is getting created in full original size, even last two arguments 150, 150 are height and width context.drawImage(img, 0, 0, 150, 150); in the code below:
function (file) { //uploaded files are always images
var reader = new FileReader(); //FileReader for uploading files from local stroge.
reader.onload = function () {
var links = document.createElement('a'); //link when image is clicked
var img = document.createElement('img');
img.src = reader.result; //src = url from uploaded file
img.className = 'images'; //css -> .images { margin-top: 30px; padding: 30px; }
img.onload = function () { //repaint image to 150 - 150 size with canvas, because setting width and height on image itself would just resize the image but I want to create new image with new size
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, 150, 150) //draw image with canvas
}
links.href = reader.result; // url from local storage needed when image is clicked -
links.target = "_blank"; // open new blank page with original image
links.appendChild(img); // image is appended to <a>
document.body.appendChild(links); // <a> is appended to body, that body contains image thumbnail with a link linked to the image source
}
if (file) {
reader.readAsDataURL(file); // read uploaded files url
}
}
img.onload does not making any sense here. result is the same even when I remove it.
You are not drawing back the cropped image to your <img> tag... you will have to create two image Objects, let's call the first originalImage, and the second one croppedImage.
The one you will append to the document is croppedImageand originalImage will just stay in the cache.
When originalImage has loaded, you will paint it to a canvas, and then set croppedImage to the result of the canvas' toDataURL() method.
var read = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var links = document.createElement('a');
// this will be the appended image
var croppedImage = new Image();
// do your DOM stuff
croppedImage.className = 'images';
links.href = reader.result;
links.target = "_blank";
links.appendChild(croppedImage);
document.body.appendChild(links);
// create a buffer image object
var originalImage = new Image();
// set its load handler
originalImage.onload = function() {
// create a canvas
var canvas = document.createElement('canvas');
// set canvas width/height
canvas.width = canvas.height = 150;
var context = canvas.getContext('2d');
// draw the buffered image to the canvas at required dimension
context.drawImage(originalImage, 0, 0, 150, 150);
// set the appended to doc image's src to the result of the cropping operation
croppedImage.src = canvas.toDataURL();
}
originalImage.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
}
};
upload.onchange = read;
.images {
margin-top: 30px;
padding: 30px;
}
<input type="file" id="upload" />
You could also have used only a single image object, but this would have required to reset the onload event in the onload event, to avoid an infinite loop, which is a little bit less clear :
var read = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var links = document.createElement('a');
var img = new Image();
img.className = 'images';
links.href = reader.result;
links.target = "_blank";
links.appendChild(img);
document.body.appendChild(links);
img.onload = function() {
//reset the onload event so it does fire in a loop
img.onload = function(){return;};
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, 150, 150);
this.src = canvas.toDataURL();
}
img.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
}
};
upload.onchange = read;
.images {
margin-top: 30px;
padding: 30px;
}
<input type="file" id="upload" />
var reader = new FileReader();
reader.onload = function () {
var links = document.createElement('a');
var img = new Image();
img.src = reader.result;
img.className = 'images';
img.onload = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, 150, 150);
this.src = canvas.toDataURL(); // convert the canvas back to the image
links.appendChild(this); // append the updated image to the document
}
links.href = reader.result;
links.target = "_blank";
document.body.appendChild(links);
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
}
I have this function:
//The img_src is a source of an image
function myid_templates_editor_create_image(img_src, w, h){
console.log('image source : ' + img_src);
var body = document.querySelector('body');
var image = document.createElement('image');
image.id = 'myid_templates_editor_image';
image.src = img_src;
body.appendChild(image);
}
After the function is invoked, it successfully creates an image element and append it to the body but the image doesnt show. Why? img_src has the following value:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAYAAAA+s9J6AAAACXBIWâĤAkBAAAJAQAkBAAAJAQAEBCAABAQgAACQEAAAkBoAr47wDsSs6PZMN9tgAAAABJRU5ErkJggg==
use img instead of image in createElement
function myid_templates_editor_create_image(img_src, w, h){
console.log(img_src);
var body = document.querySelector('body');
var image = document.createElement('img');
image.id = 'myid_templates_editor_image';
image.src = img_src;
body.appendChild(image);
}
Im using excanvas to use canvas element in ie8 but i can't able to load image in canvas.
my code is
var el = document.getElementById('cavasid');
G_vmlCanvasManager.initElement(el);
var context = el.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(img, 0,0);
};
img.src = "jj.png";
Make sure you have added excanvas.js in the head section and then try the below code
var el = document.getElementById('cavasid');
if (typeof G_vmlCanvasManager != 'undefined') {
el = G_vmlCanvasManager.initElement(el);
}
if (el.getContext) {
var context = el.getContext('2d');
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
};
img.src = "jj.png";
}
also give some width and height to your canvas like
<canvas id="cavasid" width="200" height="200"/>