javascript - 我正在使用 camanJS 对照片应用滤镜。当前遇到一个问题，即应用过滤器裁剪照片

Question

链接到小提琴

每当我在没有 Javascript 代码的情况下运行程序时，图像加载得非常好，没有裁剪效果。但是，当我使用 Javascript 代码运行程序时，图像会裁剪。

HTML

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

卡曼密码

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

Answer 1

不是使用<img>标签width="264"和设置图片的尺寸，而是height="208"使用 CSS 设置宽度和高度。

CSS

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

结果

JSFiddle