electron使用vue-img-cutter

暮雪...

已于 2023-09-20 15:47:58 修改

阅读量229

点赞数

分类专栏： electron 文章标签： electron

于 2023-09-20 13:14:54 首次发布

本文链接：https://blog.csdn.net/qq_22071421/article/details/133069691

版权

electron 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章介绍了如何在Electron环境中使用vue-img-cutter这个图片裁剪插件，尤其是在处理移动图片、裁剪、大小适配方面。提到在electron项目中遇到引用问题，需要将Gitee中的ImgCutter.vue文件复制并解决引用失败问题，同时关注了文件保存和拖拽功能的适配。

摘要由CSDN通过智能技术生成

版本:"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,
                                    });