vue3 移动端裁切图片后上传

1.安装vue-imgcut和less-loader

npm install vue-imgcut --save
npm install less-loader -save

2.页面引入及使用

<imgCut ref="Uppicinput" @callback="callback" :width="480" :height="270">
<img v-if="imageUrl" class="pic" :src="data:imageUrl">
<div class="camera-btn">
<img width="16" height="16" src="data:images/camera.png">
</div>
</imgCut>

import { imgCut } from 'vue-imgcut'
export default {
name:'demo',
components: {
imgCut,
},
setup() {
const imageUrl = ref('')
const callback = (img) => {
imageUrl.value = img
}
return{
imageUrl,
callback
}
}
}

效果图片

vue3 移动端裁切图片后上传相关推荐

移动端实现图片压缩上传
移动端实现图片压缩上传目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均 ...
js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
vue-cropper裁切图片并且上传
测试了好久才能具体用到项目中,所以记录一下,也希望对即将遇到的小伙伴也有帮助. 页面中有个显示图片的区域以及浏览按钮(选择上传文件),如图: 选择上传的图片,弹出裁切框(我封装成弹窗),如图: 刚开始 ...
（小程序）客户签名及签名后页面整体转图片后上传
先说明下项目需求: 1.销货清单需要门店老板签名 2.签名后将签名以及铺货清单整体转为图片上传到服务器图片展示: 图片说明:1:页面结构上面为清单下面为客户签名展示区域 2:点击图1 客户 ...
微信小程序上传头像先裁剪图片后上传
我是使用we-cropper.js插件实现的,下面是实现过程: 文件结构插件we-cropper.js /*** we-cropper v1.2.0* (c) 2018 dlhandsome* @l ...
ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)
插件描述:移动端头像上传,支撑头像预览和放大缩小平移,内置上传至后端请求方法. 注:请在移动端用手势查看缩放效果,PC端无法缩放 Mavatar 移动端头像上传,支撑头像预览和放大缩小平移,内置上传至 ...
webuploader插件前端实现图片旋转后上传
前端上传图片正向的图片,上传后就被旋转了.这是因为,图片中包含许多属性来记录拍摄信息.引入EXIF就可以读取这些属性. 引入exif.js文件 exif.js文件下载地址:http://code.ci ...
jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考 ...
cropper.js 实现裁剪图片并上传(PC端)
博客地址:http://blog.mambaxin.com 由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比 ...

vue3 移动端裁切图片后上传

vue3 移动端裁切图片后上传相关推荐

最新文章

热门文章