Skip to content

P
pica.cloud.web-education-admin
提交 6c30f8e4 编写于 作者: bo.dang's avatar bo.dang
浏览文件
操作

小生态直播三期

上级 4a0d437a
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 779 行增加 和 49 行删除
src/components/common/cropper.vue 0 → 100644
浏览文件 @ 6c30f8e4
<template>
<div class="rc-cropper" v-if="originImg">
<div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
destroyed() {
this.cropper && this.cropper.destroy();
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
// canvas.width = 1000
// canvas.height = 800
canvas.width = _this.cropOption.cvWidth;
canvas.height = _this.cropOption.cvHeight;
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
if (!HTMLCanvasElement.prototype.toBlob) {
console.log('HTMLCanvasElement.prototype.toBlob####');
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function () {
var binStr = window.atob(canvas.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new window.Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
// callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
});
}
});
}
this.croppShow = true;
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
dragMode: 'move',
// autoCropArea: 0.6,
// center: true,
// autoCrop: true,
restore: false,
modal: true,
guides: true,
highlight: true,
cropBoxMovable: true,
cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放
minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度
toggleDragModeOnDblclick: false,
// aspectRatio: 75/42,
aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
this.cropper.setCropBoxData({
width: 100,
height: 100
})
// this.cropper.zoomTo(1);
},
// zoom: function (event) {
// // Keep the image in its natural size
// if (event.detail.oldRatio === 1) {
// event.preventDefault();
// }
// },
})
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
console.log('cropParam', cropParam);
this.cropper.getCroppedCanvas().toBlob(function (blob) {
var objecturl = window.URL.createObjectURL(blob);
console.log('objecturl', objecturl);
let files = new window.File([blob], 'cropper.jpg');
console.log('getCroppedCanvas', files);
let oFileReader = new window.FileReader()
console.log('oFileReader', oFileReader);
oFileReader.onloadend = function (e) {
console.log('e.target.result', e, e.target, e.target.result);
let base64 = e.target.result;
_this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
},
}
}
</script>
<style scoped lang="scss">
// .rc-cropper {
// margin-left: 20px;
// }
.rc-cropper__canvasCrop1 {
width: 800px;
height: 540px;
}
.rc-cropper__canvasCrop2 {
width: 400px;
height: 300px;
}
.rc-cropper__iconCrop {
position: absolute;
// left: 46%;
right: 13%;
top: 15%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
src/components/yqrange/baseinfo.vue
浏览文件 @ 6c30f8e4
......@@ -45,7 +45,7 @@
</div>
<div class="limit-text">
<p>限制大小: 500kb</p>
<p>尺寸：160*160</p>
<p>最小尺寸：160*160</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
......@@ -83,14 +83,36 @@
></el-option>
</el-select>
</el-form-item>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
</el-form>
</template>
<script>
let vm = null;
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from '@/components/common/cropper.vue'
export default {
name: "baseinfo",
components: {
Cropper
},
props: {
formData: {
type: Object,
......@@ -114,6 +136,24 @@
}
};
return {
showCropper: false,
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
rules: {
name: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
......@@ -183,6 +223,10 @@
},
//上传圈子头像
beforeUploadPic1(file) {
this.currentOption.aspectRatio = 1/1;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 160;
let fileLimit = {
width: 48,
height: 48,
......@@ -204,21 +248,28 @@
vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
}
if (!isLt2M) {
vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
return;
}
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function (theFile) {
let image = new Image();
image.src = theFile.target.result;
let image = new Image()
image.src = theFile.target.result
vm.slide2.oriUrl = theFile.target.result;
image.onload = function () {
let _this = this;
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
if (_this.width != _this.height) {
if (_this.width < fileLimit.width || _this.height < fileLimit.height) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
} else {
return;
}
else if(_this.width > fileLimit.width || _this.height > fileLimit.height){
vm.showCropper = true;
// return;
}
else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
closeLoading(vm);
......@@ -247,7 +298,26 @@
vm.formData.headUrl = "";
vm.imgMouseOver1 = false;
}
}
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
vm.doUploadQiNiu(argument[2])
argument[3] && argument[3].destroy();
// vm.slide2.oriUrl = "";
},
// 上传七牛
doUploadQiNiu(file){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.formData.headUrl = path.fullPath;
vm.$message.success('上传成功');
});
},
}
}
</script>
......
src/views/yqrange/create-live.vue
浏览文件 @ 6c30f8e4
此差异已折叠。
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或