electron使用vue-img-cutter

版本:"electron": "^13.6.9"

vue-img-cutter 地址

vue-img-cutter: 简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。

electron测试中不能像web项目直接使用，会提示引用失败错误

将gitee中ImgCutter.vue，复制到项目中单独引用

<template>
	<div class="contact" >
		<ImgCutter @cutDown="cutDown" :boxWidth="height-150" :boxHeight="height-150"></ImgCutter>
	</div>
</template>
<script>
	import ImgCutter from './ImgCutter'
	import rgbUtil from "../../../../utils/rgbUtil";
	const { remote } = require('electron')
	export default {
		name: 'imgCut',
		components: {ImgCutter
		},
		data () {
			return {
				width:0,
				height:0,
			}
		},
		created () {
			let arr=remote.getCurrentWindow().getSize()
			this.width=arr[0]
			this.height=arr[1]
			console.log(this.width,this.height)
		},
		methods: {
			cutDown(res){
				console.log(res)
				let path=res.orgFile.replace(res.fileName,'')+new Date().getTime()+res.fileName
				rgbUtil.saveAnyTypeToBase64(this,res.blob.type,res.dataURL,path)
			}
		}
	}

 文件保存：

    async saveAnyTypeToBase64(that,type,dataBase,path){
        let base64 = dataBase.replace("data:"+type+";base64,", "");
        console.log(base64,path)
        let dataBuffer = new Buffer(base64, 'base64');
        await fs.writeFile(path, dataBuffer, function (err) {
            if (err) {
                console.log(err)
            } else {
                that.$message.success("保存成功")
            }
        })
    },

在引用的文件中，electron不可点击部分需要单独no-drag，

应用软件是可以拖拽窗体大小，所以img-cutter也需要适配大小，通过上面获取的窗体大小，传递到组件里，使用自定义布局适配。

fs.writeFile需要知道选择图片的原始位置

                                    this.$emit('cutDown', {
                                        orgFile:file.path,
                                        filename: this.changeFileName(file.name, this.fileType),
                                        file: file,
                                        index: this.index,
                                    });