We Keep Coding

DotNet HighCharts Png Image

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

Create a function to add an image to an array on click of button

I have a web page that displays an array of images of world leaders.
I need to add a button that will add an additional leader onto that array and display it as well.
If anyone could point me in the right direction, thanks in advance.
<button class="btn" id="addLeader">Add Leader</button>
</section>
<script type="text/javascript">
window.onload = function () {
var ArrayOfImages = ['images/trump.jpg', 'images/putin.jpg', 'images/merkel.jpg', 'images/jinping.jpg']; //array of images
ArrayOfImages.forEach(function (image) { // for each link l in ArrayOfImages
var img = document.createElement('img'); // create an img element
img.src = image; // set its src to the link l
img.height = '300';
img.width = '200';
img.hspace = '20';
document.body.appendChild(img); // append it to the body
});
var addButton = document.getElementById('addLeader');
addButton.addEventListener('click', addLeader);
}
function addLeader(){
ArrayOfImages.push('images/kimjongun.jpg');
console.log(ArrayOfImages);
}
</script>

If you turn the display part into a function you can call it to re-render. I made a simple and naive version.
var ArrayOfImages = ['images/trump.jpg', 'images/putin.jpg', 'images/merkel.jpg', 'images/jinping.jpg']; //array of images
function displayImages (images) {
images.forEach(function (image) { // for each link l in ArrayOfImages
var img = document.createElement('img'); // create an img element
img.src = image; // set its src to the link l
img.height = '300';
img.width = '200';
img.hspace = '20';
document.body.appendChild(img); // append it to the body
});
}
var addButton = document.getElementById('addLeader');
addButton.addEventListener('click', addLeader);
displayImages(ArrayOfImages);
function addLeader(){
ArrayOfImages.push('images/kimjongun.jpg');
document.body.innerHTML = ''; //clear previous images
displayImages(ArrayOfImages);
}

Change dropzone thumbnail with cropped canvas image canvas null error

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.

How can I load an array of images to be faded?

I have the following code where I am loading only one image. But I want to load multiple images from e folder and then to fade them in and out. But what I am interesting in, is how can I load all images from a folder without to repeat the code, as src="frames/frame_1" src="frames/frame_2" i want something soft as src="frames/frame_" + i + ".jpg" where i is the number of the frame
this is how I load only one image now
var img = new Image();
var div = document.getElementById('foo');
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_1.jpg';

It's relatively simple. You basically put the code you already had in a loop:
var img, i,
imageCount = 5,
div = document.getElementById('foo');
for(i = 0; i < imageCount; i++){
img = new Image();
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_' + i + '.jpg';
}

You can use a loop for :
var img,
div = document.getElementById('foo');
for (var i = 0, nbImg = 5; i < nbImg; i++) {
img = new Image();
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_'+i+'.jpg';
}

JavaScript imagemap code doesn't work

What is wrong with this code? Why is my imagemap not working?
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image'; img.id = 'span1'; img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
document.body.appendChild(img);
var mymap = document.createElement('map');
mymap.name = 'testmap';
document.body.appendChild(mymap);
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '900,200,1100,1000' ;
areatag.href = 'http://www.google.com';
mymap.appendChild(areatag);
document.body.appendChild(areatag);
return img;
}
UPDATE:
I reconstructed my code like this, but it is still not functional:
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image';
img.id = 'span1';
img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
var mymap = document.createElement('map');
mymap.name = 'testmap';
mymap.id = 'testmap';
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '0,0,500,500' ;
areatag.href = 'http://www.google.com';
areatag.target = '_blank';
//append area to map
mymap.appendChild(areatag);
// append map to document
document.body.appendChild(mymap);
//append image to document
document.body.appendChild(img);
return img;
}

here's the solution:
you should use
img.setAttribute("usemap", '#testmap')
instead of:
img.usemap = "#testmap"

You have created element instance "mymap", but didn't added (not appended) it to the document, as you did it for "img" (appendChild).
document.createElement(name) creates an instance of element, but not appends it to the document.

it may be that the order in which you do things is not good.
i think you should:
create img element (+set its attrs)
create map element (+set its attrs)
create area element (+...)
append area to map
append map to document
append image to document

In addition to Viktor's answer:
img.usemap='#testmap';
...
mymap.name = 'testmap';
You will probably need to give mymap an id of "testmap"