简易 web上传头像裁剪原生js小插件,支持移动端。

简易 web上传头像裁剪原生js小插件,支持移动端。

主要用到h5的canvas,在本地截图好后，返回base64图片字符串。你可以在服务端生成图片，或直接数据库中存这个字符串。用的时候就：<img src='base64字符串'>

具体用法在index.html中就可查看

CSS

<style> .eitionCss{background:#f9f9f9;position: relative;background-repeat: no-repeat;background-size: 100%;background-position-x: 50%;background-position-y: 0;} .drag{background:#ffffff;border:1px solid #000;opacity: 0.4;position: absolute} </style>

HTML

<div id="eition"></div> <input type="file" name="file" id="imgFile" onchange="_eition.openFile(this)" /> <input type="button" value="保存" name="save" id="save" onclick="save()" /> <img id="thumb">

Javascript

<script src="eition.avatars.1.1.mini.js"></script> <script> _eition.el="eition"; _eition.width=400;//操作面的宽度 _eition.height=400;//操作面的高度 _eition._width=100;//截图框的宽度 _eition._height=100;//截图框的高度 _eition.thumbEl="thumb";//是否显示缩略图。样式自己写吧 _eition.start(); function save(){ alert(_eition.result()); } </script>