CamanJS 一个超好用的图像编辑器(附带跨域问题解决)

需求:为原本较模糊的图片进行颜色加深。(目的是为了将该html转pdf打印查看更清晰,pdf为后台转化,使用的是wkhtmltopdf)
接到这个需求之后找到了一款图片编辑器,CamanJS,可对图像进行加深,明亮,模糊等,或者增加各种滤镜。
源码库:https://github.com/meltingice/CamanJS
文档:http://camanjs.com/
基本使用:
用法一:

 Caman('#my-image', function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);
    this.render();
  });

用法二:

   <img 
    data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)"
    data-caman-hidpi="/path/to/image@2x.jpg"
    src="path/to/image.jpg"
  >

具体的参数可以详见文档中的这个例子
在这里插入图片描述

本人是使用了gamma(2)使图片整体加深了完成了该需求。但由于后台的图片使用oss进行管理,放置在另一个域下,所以使用该库的时候会出现跨域问题。
刚开始是使用前端即可解决该问题:

 function onloadImg(id,url){
            var image = new Image ();
            image.crossOrigin = 'anonymous';
            image.onload = function () {
            var div = document.getElementById(id); 
            div.appendChild (image);
            Caman(image, function () {
		    	this.gamma(1.3);
                this.render();
               });
            };
            image.src=url+'?v='+Math.floor((Math.random())*100);
   }

注意图片的路径要加个随机数,以防是从缓存拿的,导致仍有跨域问题。这样,在谷歌上运行则没有跨域问题。
但由于后台使用的是wkhtmltopdf,他执行后仍报有跨域,我怀疑是浏览器版本过低的话,对安全方面的要求更为严格。于是就让后台做了一层代理。
该库也提供了php版本的代码。服务器上托管PHP脚本,以便可以在与提供CamanJS的页面完全相同的域中使用它。该脚本会将来自远程源的图像数据代理到浏览器,以规避此限制。
在这里插入图片描述
接下来,前端只需要添加以下代码

Caman.remoteProxy = Caman.IO.useProxy('php');

//或者
Caman.remoteProxy = "/proxies/proxy.php";

这样,就访问图片的时候就会去访问 /proxies/proxy.php?camanProxyUrl={url} 这个地址,解决跨域问题~~

附带wkhtmltopdf使用:当使用了以上js库,并想通过该软件将我的html页面转化为pdf时,需要做的就是增加命令:
–javascript-delay 延迟xx毫秒执行js文件
–enable-local-file-access 允许执行本地文件

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

VIVI Xiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值