先说下情况：

使用cropper.js 写的app图片上传剪裁功能，思路：使用 input=“file” 进行监听用户选择的图片然后进行canvas裁剪最后转换成base64压缩过的图片上传服务器。

遇到问题：

项目在浏览器正常跑起来，在移动端 oppoR9Sk 也可以跑起来，但是在 oppoR9M 选择完图片之后没办法发进行剪裁操作。

下面是代码：

html部分：

<!-- ipt框1 --><div class="picture_div"><!-- 替换成需要的id --><input type="file" id="fileTest"  accept="image/*"></div><!-- 2018-wu+ --><!-- 弹出层 --><div class="img_pop_up" style="display:none;"><div class="cut_img"><img id="imgTest" src="" alt=""></div><div class="confirm_button"><button class="cancel_choose">取消</button><div class="rotate_div"><button class="rotate_left">向左旋转</button><button class="rotate_right">向右旋转</button></div><button class="confirm_choose">确定</button></div></div><script>
$(function(){var $fileTest = $("#fileTest"), //ipt输入框$fileTest2 = $("#fileTest2"),$imgTest = $("#imgTest"), //img$img_pop_up = $(".img_pop_up"), //弹出层$picture_div = $(".picture_div"), //ipt输入框$confirm_choose = $(".confirm_choose"), //确定$cancel_choose = $(".cancel_choose"), //取消$rotate_left = $(".rotate_left"), //向左旋转$rotate_right = $(".rotate_right"), //向右旋转ratio = '1/1', //上传比例store = '0.9', //剪裁面积大小（百分比）和图片进行对比task = false; //    是否拖动剪裁框$fileTest.click(function(){ToString($fileTest, $imgTest, $img_pop_up, $confirm_choose, $cancel_choose, $rotate_left,$rotate_right, '1/1', store, task,function (data) {if (data.message.code == 0) {layer.msg('保存成功', {time: 1000});let li = '<li><i class="icon iconfont icon-huaban"></i><img src="'+data.message.msg+'" class="thumb-image" name="images"></li>'$(".lunbo-list").append(li)} else {layer.msg('保存失败，请重新上传', {time: 1000});}})})$fileTest2.click(function(){ToString($fileTest2, $imgTest, $img_pop_up, $confirm_choose, $cancel_choose, $rotate_left, $rotate_right, '', '1', true, function (data) {if (data.message.code == 0) {layer.msg('保存成功', {time: 1000});if ($(".img-container_lis > li").length > 2) {layer.msg('最多上传 3 张图片', {time: 1000});return} else {let li = '<li><i class="icon iconfont icon-huaban"></i><img src="'+ data.message.msg +'" class="thumb-image" name="productHtml"></li>'$(".xiangqing-list").append(li)}} else {layer.msg('保存失败，请重新上传', {time: 1000});}})})// 点击删除$(".img-container ").on('click', '.xxx', function () {$(this).parent('li').remove();})
})
</script>

裁剪核心参数：

/***** @param {*} fileTest* @param {*} imgTest* @param {*} img_pop_up* @param {*} confirm_choose* @param {*} cancel_choose* @param {*} rotate_left* @param {*} rotate_right* @param ratio* @param store* @param task* @param {*} callback* * //使用方法* （这句话写在html）* var result;var $fileTest = $("#fileTest"), //ipt输入框$imgTest = $("#imgTest"), //img$img_pop_up = $(".img_pop_up"), //弹出层$picture_div = $(".picture_div"), //ipt输入框$confirm_choose = $(".confirm_choose"), //确定$cancel_choose = $(".cancel_choose"), //取消$rotate_left = $(".rotate_left"), //向左旋转$rotate_right = $(".rotate_right") //向右旋转ratio   //原始默认16 / 9,store   ///(0.9)剪裁面积大小（百分比）和图片进行对比stsk    // 是否拖动ToString($fileTest, $imgTest, $img_pop_up, $confirm_choose, $cancel_choose, $rotate_left,ratio,store,$rotate_right,function (data) {// result = data;console.log(data);//渲染})*/function ToString(fileTest, imgTest, img_pop_up, confirm_choose, cancel_choose, rotate_left, rotate_right, ratio, store, task, callback) {// 监听上传变化var base64 = '';fileTest.change('change', function (ev) {let $file = $(this);let fileObj = $file[0];let windowURL = window.URL || window.webkitURL;let dataURL = null;// if (!fileObj || !fileObj.files || !fileObj.files[0]) return;dataURL = windowURL.createObjectURL(fileObj.files[0]);imgTest.attr('src', dataURL);imgTest.cropper({aspectRatio: ratio, // 原始默认16 / 9,viewMode: 3,guides: true, //裁剪框虚线 默认true有dragCrop: false, //是否新建裁剪框dragMode: "none",responsive: true, //调整窗口后重新渲染croperrestore: true, //调整窗口后是否委会剪裁的区域checkCrossOrign: true, //检查当前图像是否为跨域checkImageOrigin: false,modal: true, //黑色遮罩层center: false, //剪裁框在图片的中心background: false, // 容器是否显示网格背景（马赛克）autoCrop: true, //初始化，自动生成图像（自定显示剪裁框）autoCropArea: store, //剪裁面积大小（百分比）和图片进行对比movable: task, //是否能移动剪裁框rotatable: true, //是够允许旋转图片scalable: false, //是否允许缩放图片zoomable: true, //是否允许放大图片zoomOnTouch: true, //手指拖动放大图片zoomOnWheel: true, //鼠标放大图片wheelZoomRatio: false, //手表拖动图片cropBoxMovable: task, //是否允许拖动裁剪框// cropBoxResizable: task, //是否允许拖动 改变裁剪框大小（不能用）resizable: task, //是否允许改变裁剪框大小// minContainerWidth: 320,// minContainerHeight: 180,// minCanvasWidth: 320,// minCanvasHeight: 180,// minCropBoxWidth: 100,// minCropBoxHeight: 100,});imgTest.cropper('replace', dataURL),img_pop_up.css({'display': 'block'}),// 向左旋转rotate_left.off().on('click', function () {imgTest.cropper('rotate', 45);}),// 向右旋转rotate_right.off().on('click', function () {imgTest.cropper('rotate', -45);}),// 取消上传图片事件cancel_choose.off().on('click', function () {//TODO-清空val值fileTest.val('');img_pop_up.css('display', 'none');imgTest.cropper('clear'); //clear()：清空剪裁区域。imgTest.cropper('destroy');// fileTest.css({//     'display': 'block'// });}),// 点击确定confirm_choose.off().on('click', function () {img_pop_up.css({'display': 'none'});if (imgTest.cropper('getCroppedCanvas') == null) return;base64 = imgTest.cropper('getCroppedCanvas').toDataURL('image/jpeg',0.3);$('.self_bg').remove();const logoImg = `<div class="self_bg" style="dixplay:block;">[图片上传失败...(image-1fecd5-1512026520854)]</div>`$('.self_logo_up').append(logoImg);// console.log(imgTest.cropper('getCroppedCanvas'));$("#li").append(imgTest.cropper('getCroppedCanvas'))// console.log(base64);$.ajax({// url: "http://localhost:8081/rest/itemcat/list?callback=getMessage",headers: {'Access-Control-Allow-Origin': '*'},url: "http://www.yizhangjin.cc/upload/base64Upload.do",type: "post",cache: false,data: {uploadify: base64},ContentType: 'application/x-www-form-urlencoded',dataType: "json",// jsonp: "callback", //这里定义了callback的参数名称，以便服务获取callback的函数名即getMessage// jsonpCallback: "callback", //这里定义了jsonp的回调函数success: function (data) {if (callback != null) {callback(data)}},error: function (err) {// console.log(err)}});//TODO-清空val值fileTest.val('');imgTest.cropper('clear'); //clear()：清空剪裁区域。imgTest.cropper('destroy');});});
}

博主比较着急，麻烦各位大佬指导！！！抱拳了

cropper.js oppoR9M 跑不起来相关问题==》已解决相关推荐

RK3399 android7.1 音频底层调试--tinyalsa及相关问题--已解决
tinyalsa简介: 在android中并没有使用linux主流的ALSA架构来进行音频调试,而是使用了它的简化版tinyalsa,控制管理所有模式的音频通路,我们使用tinyalsa提供的工具查看 ...
[JS]关于表单的自动运算(已解决)
http://bbs.blueidea.com/thread-2642944-1-1.html 转载于:https://www.cnblogs.com/moretop/archive/2011/11/ ...
cropper.js 实现HTML5 裁剪上传头像
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: ...
cropper.js 实现裁剪图片并上传(PC端)
博客地址:http://blog.mambaxin.com 由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比 ...
cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
web图片裁切插件 cropper.js 详细介绍
cropper.js一个用来处理图片的插件,可以使用它来实现图片的各种模式下的裁切效果,当我们在做一个上传头像或者上传图片功能的时候,需要用户裁切出用户想要的图片位置就可以利用这个插件来实现','cr ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
图片上传裁剪插件cropper.js的API详解
jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropp ...

cropper.js oppoR9M 跑不起来相关问题==》已解决

先说下情况：

使用cropper.js 写的app图片上传剪裁功能，思路：使用 input=“file” 进行监听用户选择的图片然后进行canvas裁剪最后转换成base64压缩过的图片上传服务器。

遇到问题：

项目在浏览器正常跑起来，在移动端 oppoR9Sk 也可以跑起来，但是在 oppoR9M 选择完图片之后没办法发进行剪裁操作。

下面是代码：

html部分：

裁剪核心参数：

博主比较着急，麻烦各位大佬指导！！！抱拳了

cropper.js oppoR9M 跑不起来相关问题==》已解决相关推荐

最新文章

热门文章

cropper.js oppoR9M 跑不起来相关问题==》已解决

先说下情况：

使用cropper.js 写的app图片上传剪裁功能，思路：使用 input=“file” 进行监听用户选择的图片 然后进行canvas裁剪 最后转换成base64压缩过的图片上传服务器。

遇到问题：

项目在浏览器正常跑起来，在移动端 oppoR9Sk 也可以跑起来，但是在 oppoR9M 选择完图片之后没办法发进行剪裁操作。

下面是代码：

html部分：

裁剪核心参数：

博主比较着急，麻烦各位大佬指导！！！抱拳了

cropper.js oppoR9M 跑不起来相关问题==》已解决相关推荐

最新文章

热门文章

使用cropper.js 写的app图片上传剪裁功能，思路：使用 input=“file” 进行监听用户选择的图片然后进行canvas裁剪最后转换成base64压缩过的图片上传服务器。