Chartjs-Show base64 image next to canvas with charts.js

by

4👍

✅

You need to add an <img> element to your page, and then set the src attribute of the <img> element to the output of this.toBase64Image()

See the following fiddle:

https://jsfiddle.net/wveepa7c/

onComplete: function(animation){
  // #myImage is an img element
  document.querySelector('#myImage').setAttribute('src', this.toBase64Image());
}

1👍

onComplete is called at least two times at jsfiddle. You can define a variable which is undefined, at onComplete check if variable is defined to prevent <img> being appended to document twice, if variable is not defined, create <img> element, use .insertAdjacentHTML() chained to ctx with first parameter "afterend" and second parameter .outerHTML of <img> element

var img;


animation: {
  onComplete: function(animation) {
    if (!img) {
      ctx.setAttribute('href', this.toBase64Image());
      img = new Image;
      img.src = ctx.getAttribute('href');
      ctx.insertAdjacentHTML("afterend", img.outerHTML)
    }
  }
}

https://jsfiddle.net/0on3f7t7/2/

Leave a comment