I am using camanJS to apply a filter to a photo. Currently running into an issue where the application of the filter crops the photo

Question

Link to fiddle

Whenever I run the program without the Javascript code, the image loads perfectly fine without the cropping effect. However, when I run the program with the Javascript code, the image crops.

HTML

<img src="my data:image" id= "hello" height = "208" width = "264">

Caman Code

var vintage = $('#vintagebtn');
Caman("#hello", function () {
 this.vintage();
 this.render();
});

Answer 1

Instead of setting the dimensions of the picture using the <img> tag width="264" and height="208", set the width and height using CSS.

CSS

#hello {
  width: 264px;
  height: 208px;
}

Result

JSFiddle