cropper使用在线图片的问题

最新推荐文章于 2024-02-21 19:21:24 发布

DragonWar%

最新推荐文章于 2024-02-21 19:21:24 发布

阅读量644

点赞数

文章标签：前端运维 ViewUI

原文链接：https://my.oschina.net/cdcc/blog/901434

版权

为什么80%的码农都做不了架构师？>>>

cropper（https://github.com/fengyuanchen/cropper，项目使用的版本是2.3.4）是不错的图片裁剪插件，在前端处理图片非常方便。

项目使用过程中（这是在不同的子域下，涉及跨域问题，nginx配置支持子域跨域请求，资源目录添加crossdomain.xml）发现在使用在线图片地址出现built事件获取的裁剪图片是黑图（toDataURL("image/jpeg")）或透明图（toDataURL()），本地选择图片不会出现这种问题，摸索了哈问题出在未在图片加载完成后取裁剪图片，built代码修改如下：

var cropperImageWidth=288,cropperImageHeight=193,$image=$('#image'),previewImg=$('.previewImg');
    $image.on({
        'built.cropper': function (e) {
            //获取要加载的图片地址，跨域的图片地址后面会默认加上时间戳
            var src=previewImg.children('img').attr('src');
            var img=new Image();
            img.src=src;
            //图片加载完成后获取裁剪图片，选择本地图片可不使用onload事件
            img.onload=function () {
                var imgData=$image.cropper('getCroppedCanvas',{"width":cropperImageWidth,"height":cropperImageHeight}).toDataURL("image/jpeg");
                //测试显示裁剪的图片
                $('.cropperImg').empty().html('<img src="'+imgData+'">');
            }
        }
    }).cropper({
        aspectRatio: 60/39,
        preview:'.previewImg'
    });

//改变预览图片为网络图片
........
var imgUrl='http://.....xxx.jpg';
$image.cropper('reset').cropper('replace', imgUrl);
........

转载于:https://my.oschina.net/cdcc/blog/901434