canvase 编辑图片 添加 位置与说明

<template>
<div slot="body">
<img src="@/assets/images/logo_shou.png" alt="" id="waterMark" style='display:none'>
<el-form style="position: relative;">
<el-form-item >
<div style="width: 170px;height: 150px; overflow:hidden;float: left;">
<el-upload
action="#"
list-type="picture-card"
name="picture"
ref="list"
:auto-upload='false'
:on-preview="handlePictureCardPreview"
:on-change='getFile'
:before-remove="beforeRemove"
accept="image/*"
:file-list="imageList"
>
<i class="el-icon-plus" ></i>
</el-upload>
</div>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: center;">
<el-button @click="getPosition" style="margin: auto;">位置标注</el-button>
<el-button @click="goback" style="margin: auto;">返回</el-button>
</div>
<!-- 大图显示隐藏框 -->
<el-dialog :visible.sync="imgDialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<!-- 图片编辑 -->
<el-dialog :visible.sync="dialogVisible" @opened="imageDialogOpened" @close="imageDialogClose" :close-on-press-escape=false :show-close=false :fullscreen="true">
<el-row>
<el-col :span="16">
<img id="image" :src="dialogImageUrl" height="360" width="100%"/>
<el-row style="margin-top:10px;">
<el-button type="primary" icon="el-icon-zoom-in" @click="cropZoomIn"></el-button>
<el-button type="primary" icon="el-icon-zoom-out" @click="cropZoomOut"></el-button>
<el-button type="success" icon="el-icon-check" @click="cropCut"></el-button>
<el-button type="success" icon="el-icon-refresh" @click="cropRest"></el-button>
</el-row>
</el-col>
<el-col :span="8">
<div class="preview-box-parcel">
<div class="square previewImg"></div>
</div>
</el-col>
</el-row>
</el-dialog>
<el-dialog :visible.sync="imgDialogEdit" class="mark">
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid #000000;">
</canvas>
</el-dialog>
</div>
</template>

<script>
import global_ from "@/components/common/Global.vue";
import $ from "jquery";
import Cropper from "cropperjs";
export default {
data() {
return{
content:'',
imageList:[],
dialogImageUrl:'',
imgDialogEdit:false,
commProjectId:null,
houseTypes:[],
directions:[],
saveFile:null,
houseTypeForm:{},
upLoadImgCode:'01',
saveFileList:null,
saveName:null,
imgDialogVisible:false,
positions:[],
positionInf:{},
// 图片编辑参数
dialogVisible: false, //编辑框显示隐藏
ialogImageUrl: "",
cropper: null,
croppable: false,
imgCropperData: {
accept: "image/gif, image/jpeg, image/png, image/jpg"
}
}
},
mounted() {
if(this.$route.params.commProjectId) {
this.commProjectId = this.$route.params.commProjectId;
}
if(this.$route.params.type) {
this.type = this.$route.params.type;
}
if(this.type === 'view') {
this.canEdit = false;
}else {
this.canEdit = true;
}
},
methods:{
//返回动态列表
goback() {
this.$router.push({name: "楼盘列表"});
},
// 标注位置
getPosition() {
this.imgDialogEdit = true;
this.$nextTick(function () {
// DOM 更新了
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
let img = new Image();
img.src = this.dialogImageUrl;
let _this = this;
img.onload = function() {
ctx.drawImage(this, 0, 0, 800, 600);
for(let i = 0; i < _this.positions.length; i++) {
let x = _this.positions[i].x1 > _this.positions[i].x2 ? _this.positions[i].x2 : _this.positions[i].x1;
let y = _this.positions[i].y1 > _this.positions[i].y2 ? _this.positions[i].y2 : _this.positions[i].y1;
ctx.rect(x, y, Math.abs(_this.positions[i].x1 - _this.positions[i].x2), Math.abs(_this.positions[i].y1 - _this.positions[i].y2));
ctx.stroke();
ctx.font = "18px Arial";
ctx.fillText(_this.positions[i].text, x + 10, (_this.positions[i].y1 + _this.positions[i].y2 + 2) / 2);
}
let _imagethis = this
c.onmousedown = function (e) {
if (e.offsetX || e.layerX) {
let x1 = e.offsetX === undefined ? e.layerX : e.offsetX;
let y1 = e.offsetY === undefined ? e.layerY : e.offsetY;
_this.positionInf.x1 = x1;
_this.positionInf.y1 = y1;
c.onmousemove = function (e) {
if (e.offsetX || e.layerX) {
let x2 = e.offsetX === undefined ? e.layerX : e.offsetX;
let y2 = e.offsetY === undefined ? e.layerY : e.offsetY;
c.height = c.height;
ctx.drawImage(_imagethis, 0, 0, 800, 600);
for(let i = 0; i < _this.positions.length; i++) {
let x = _this.positions[i].x1 > _this.positions[i].x2 ? _this.positions[i].x2 : _this.positions[i].x1;
let y = _this.positions[i].y1 > _this.positions[i].y2 ? _this.positions[i].y2 : _this.positions[i].y1;
ctx.rect(x, y, Math.abs(_this.positions[i].x1 - _this.positions[i].x2), Math.abs(_this.positions[i].y1 - _this.positions[i].y2));
ctx.stroke();
ctx.font = "18px Arial";
ctx.fillText(_this.positions[i].text, x + 10, (_this.positions[i].y1 + _this.positions[i].y2 + 2) / 2);
}
let x = x1 > x2 ? x2 : x1;
let y = y1 > y2 ? y2 : y1;
ctx.rect(x, y, Math.abs(x1 - x2), Math.abs(y1 - y2));
ctx.stroke();
}
}
}
};
// 鼠标点击停止
c.onmouseup = function (e) {
if (e.offsetX || e.layerX) {
let x3 = e.offsetX === undefined ? e.layerX : e.offsetX;
let y3 = e.offsetY === undefined ? e.layerY : e.offsetY;
_this.positionInf.x2 = x3;
_this.positionInf.y2 = y3;
_this.$prompt('请输入标记内容', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
inputErrorMessage: '内容不能为空'
}).then(({ value }) => {
_this.positionInf.text = value;
_this.positions.push(_this.positionInf);
_this.positionInf = {};
ctx.drawImage(_imagethis, 0, 0, 800, 600);
for(let i = 0; i < _this.positions.length; i++) {
let x = _this.positions[i].x1 > _this.positions[i].x2 ? _this.positions[i].x2 : _this.positions[i].x1;
let y = _this.positions[i].y1 > _this.positions[i].y2 ? _this.positions[i].y2 : _this.positions[i].y1;
ctx.rect(x, y, Math.abs(_this.positions[i].x1 - _this.positions[i].x2), Math.abs(_this.positions[i].y1 - _this.positions[i].y2));
ctx.stroke();
ctx.font = "18px Arial";
ctx.fillText(_this.positions[i].text, x + 10, (_this.positions[i].y1 + _this.positions[i].y2 + 2) / 2);
}
}).catch(() => {
_this.$message({
type: 'info',
message: '取消输入'
});
});
c.onmousemove = function (e) {
console.log(_this.positions)
}
}
}
}
})
},
//上传户型图前把图片存储起来
getFile(file, fileList) {
if(file.raw.type.indexOf("image") === -1) {
this.$message.error('只能上传图片!');
fileList.splice(fileList.indexOf(file), 1)
return false
}
this.saveName = file.name;
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.saveFileList = fileList;
},
beforeRemove(file, FileList) {
this.saveFile = null;
this.saveFileList = null;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.imgDialogVisible = true;
},
handleRemove(file) {
if (file.status === "uploading") {
this.$message.error("图片上传中，请稍后重试!");
return false;
};
let imageId;
if (!file.id) {
if(file.response) {
imageId = file.response.id;
}
}else{
imageId = file.id;
};
this.loading = true;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.dynamic.deleteCommodityAttachmentById,
data: {id: imageId}
})
.then(response => {
this.loading = false;
if (response.data.success) {
this.$message.success("图片删除成功", "提示");
} else {
this.$message.error(response.data.message, "提示");
}
}).catch(error => {
this.loading = false;
console.log(error);
this.$message.error(error, "提示");
})
},
//非空判断
checkHouseTypeNull (value) {
if(value === null || value === '') {
return false
}else {
return true;
}
},
uploadSuccess(response, file, fileList) {
console.log(file);
},
//blob转换为File
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
// base64转换为Blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
// 图片编辑方法
imageDialogOpened() {
//初始化这个裁剪框
let self = this;
let image = document.getElementById("image");
let previews = document.querySelectorAll(".preview");
this.cropper = new Cropper(image, {
aspectRatio: 800 / 600,
cropBoxResizable: false,
viewMode: 1,
background: false,
zoomable: true,
wheelZoomRatio: 0,
preview: $(".previewImg"),
ready: function() {
self.croppable = true;
},
crop: function(event) {
let data = event.detail;
let cropper = this.cropper;
let imageData = cropper.getImageData();
}
});
},
imageDialogClose() {
this.cropper.destroy();
},
cropZoomIn() {
this.cropper.zoom(0.1);
},
cropZoomOut() {
this.cropper.zoom(-0.1);
},
cropCut() {
let cas = this.cropper.getCroppedCanvas();// 获取被裁剪后的canvas
let base64 = cas.toDataURL('image/jpeg'); // 转换为base64
let waterMark = document.getElementById('waterMark');
let img = new Image();
let _this = this;
img.src = base64;
img.onload = function() {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let dataURL = ''
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
ctx.globalAlpha = 0.3;
for (let n = 0; n < 8; n++) {
for (let m = 0; m < 8; m++) {
ctx.drawImage(waterMark, canvas.width / 2 * n + 100, canvas.width / 4 * m, canvas.width / 4, canvas.width / 12)
}
}
let imgData = canvas.toDataURL();
_this.saveFileList[_this.saveFileList.length - 1].url = imgData;
_this.dialogImageUrl = imgData;
let blob = _this.dataURLtoBlob(imgData);
let content = _this.blobToFile(blob, this.saveName); //转file
_this.content = content;
_this.dialogVisible = false;
}
},
cropRest() {
this.cropper.reset();
}
}
}
</script>

<style>
@import "../../../static/plugins/cropperjs/cropper.min.css";
@import "../../../static/plugins/cropperjs/imgCropping.css";

.el-dialog__header span{
margin-left: 46%;
}
.el-dialog__body {
padding: 13px 20px;
}
.mark .el-dialog{
width: 880px;
}
</style>