somanyerrorswhy somanyerrorswhy - 4 months ago 20
Javascript Question

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

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

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

enter image description here

JSFiddle

Comments