cropper图片编辑插件绘制圆形图片

cppprimer 发布于2019-08-23 12:08 / 1754人阅读

摘要：背景项目中有一个编辑上传用户头像的功能，之前选用了插件来处理编辑图片的功能，现在还想做到类似等选取圆形图像的功能，考虑结合来处理。

背景

项目中有一个编辑上传用户头像的功能，之前选用了cropper插件来处理编辑图片的功能，现在还想做到类似QQ等选取圆形图像的功能，考虑结合cropper来处理。

方案

样式上通过CSS来控制cropper选取框为圆形

.cropper-view-box, .cropper-face {
    border-radius: 50%;
}

处理图片时通过canvas来实现

function getRoundedCanvas(){    
    var crop=(...).data("cropper");                                                        //获取crop对象
    var sourceCanvas=crop.getCroppedCanvas();
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var width = sourceCanvas.width;
    var height = sourceCanvas.height;
    canvas.width = width;
    canvas.height = height;
    context.imageSmoothingEnabled = true;
    context.drawImage(sourceCanvas, 0, 0, width, height);
    context.globalCompositeOperation = "destination-in";
    context.beginPath();
    context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
    context.fill();
    return canvas;
}

其它注意点

需要注意的是，如果通过toDataUrl方式转图片时，在格式为jpg的情况下，得到的圆图的底色可能会变成黑色，这是因为在转jpg的过程中，原先的透明度属性会丢失，这里我是通过统一设置图片转换格式为png格式来解决的。

var dataurl=canvas.toDataURL("image/png");
var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var filename=(...);
var f=new File([u8arr],filename,{type:"image/png"});

查阅文档的传送门

1.fengyuanchen/cropperjs · GitHub
2.cropperjs
3.canvas参考手册

csdn地址

芊芊寻

版权申明

此文章版权为本人所有，非经本人许可禁止复制转载。

GPU云服务器云服务器 ios设置圆形图片 java圆形图片加入绘制六边形图片图片编辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97991.html

无需Flash实现图片裁剪——HTML5中级进阶

摘要：需求就是那么简单，在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。前言图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。需求就是那么简单，在浏览器里裁剪图片并上传到服务器。我第一个想到的方法就是，将图片和裁剪参数（x...

JerryC 2019-08-19 18:17 评论0 收藏0
截取图片生成头像插件

摘要：获取图片地址之后，进行截取图片这里推荐一个插件点这里，具体怎么用就不再赘述。等截取图片之后，需要将截取的文件转换为二进制大文件。调取接口，将二进制大文件上传即可。上传头像插件目的：帮助开发者快速开发上传头像功能点背景：现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。资源：具体资源请查看这里实现大致思路如下：先有一个上传的...

scq000 2019-08-01 17:43 评论0 收藏0
截取图片生成头像插件

摘要：获取图片地址之后，进行截取图片这里推荐一个插件点这里，具体怎么用就不再赘述。等截取图片之后，需要将截取的文件转换为二进制大文件。调取接口，将二进制大文件上传即可。上传头像插件目的：帮助开发者快速开发上传头像功能点背景：现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。资源：具体资源请查看这里实现大致思路如下：先有一个上传的...

Aceyclee 2019-08-21 16:50 评论0 收藏0
JQuery 插件图片裁剪插件cropper.js使用,上传

摘要：图片裁剪，压缩是上传图片一定会遇到的问题。如何获得裁剪的图片呢获取裁剪后的图片信息首先我们可以获得裁剪框的节点然后调用图片质量图片质量越好图片大小越大这样就得到了你裁剪的图片了可以通过，放到你想要的节点里展示。图片裁剪，压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下，可以给新手做参考。引入插件相关文件,你们down到本地也可以。这...

SHERlocked93 2019-08-22 13:46 评论0 收藏0