移动端图片上传，支持图片裁切

部分API的兼容性请参照caniuse：

<div class="upload-wrap"> <img id="previewResult" /> <button class="button blue rarrow file-input-mask"><input type="file" id="file" accept="image/*" /></button> </div> <img id="preview" />

(function () { var _input = document.querySelector('#file') _input.addEventListener('change', function (e) { canvasResize(this.files[0], { crop: false, quality: 0.9, rotate: 0, callback(baseStr) { $("#preview").attr("src",baseStr).hide(); var crop_btn = document.querySelector("#crop_btn"); new AlloyCrop({ image_src: $("#preview").attr("src"), width: 300, height: 300, ok_text: "确定", // optional parameters , the default value is ok cancel_text: "取消", // optional parameters , the default value is cancel ok: function (base64, canvas) { $("#previewResult").attr('src',base64); $(".file-input-mask").css("opacity","0"); }, cancel: function () { } }); } }) }) })(); demo地址

请在chrome手机调试模式看