记录一次项目中用到的图片涂鸦功能（Vue）

在项目中涉及到一个作战地图标绘的功能（百度地图截图后在截图上可以任意添加icon），然后点击下载可以保存编辑完成后的图片。

效果预览：

插件名称：TOAST UI Image Editor

安装依赖：

npm install --save @toast-ui/vue-image-editor

引入：

<template><tui-image-editor:include-ui="useDefaultUI":options="options"ref="tuiImageEditor"></tui-image-editor>
</template>
import { ImageEditor } from "@toast-ui/vue-image-editor";
import "tui-image-editor/dist/tui-image-editor.css";
export default {components: {'tui-image-editor': ImageEditor},data() {return {useDefaultUI: true,options: { // for tui-image-editor component's "options" propcssMaxWidth: 700,cssMaxHeight: 500}};}
}

vue中使用ImageEditor的方法需要使用invoke方法来调用tui.ImageEditor的方法，第一个参数是方法的名称，第二个参数是方法的参数。具体方法请访问官方文档。

个人在项目主要用addImageObject方法来添加自己的icon，添加后的icon是可以自由旋转和改变大小的。

addImage(url) {//url是图片的地址const tuiImageEditor = this.$refs.tuiImageEditor;tuiImageEditor.invoke("addImageObject", url).then((res) => {console.log(res);});
},

记录一次项目中用到的图片涂鸦功能（Vue）相关推荐

linux手写涂鸦代码,canvas实现图片涂鸦功能（附代码）
本篇文章给大家带来的内容是关于canvas实现图片涂鸦功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求需要对图片进行标注,导出图片. 需要标注N多图片最后同时保存. ...
php 涂鸦,canvas实现图片涂鸦功能（附代码）
本篇文章给大家带来的内容是关于canvas实现图片涂鸦功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求需要对图片进行标注,导出图片. 需要标注N多图片最后同时保存. ...
记录支持显示代码行号和图片插入功能
实现方法: VS code中安装插件paste image(mushan) 重启新建.md文件 mac粘贴图片:command+option+V Windows粘贴图片:Ctrl+Alt+V 图片会 ...
vue如何实现在页面上画画_vue组件：canvas实现图片涂鸦功能
方案背景需求需要对图片进行标注,导出图片. 需要标注N多图片最后同时保存. 需要根据多边形区域数据(区域.颜色.名称)标注. 对应方案用canvas实现涂鸦.圆形.矩形的绘制,最终生成图片bas ...
Android图片涂鸦功能,Android之给图片添加涂鸦（文字）
原图: 效果图: 代码如下: public class GraffitiView extends View { private Paint paint = null; /* * 源图 */ priva ...
iOS 图片涂鸦功能
大致原理: 1.准备几张切图. 2.监听手势,手势开始,随机添加一张图片:手势移动,累加手势距离,到达一定值再添加一张随机图片并清零累加距离,依次类推. demo地址:https://github.c ...
js实现图片裁剪功能
写项目遇到了一个图片裁剪功能,网上搜了半天全是裁剪框,并不能达到实际意义的图片裁剪它的实现过程主要是 canvas 的 putImageData() 方法 w3c给它的官方定义是: putImage ...
android图片涂鸦，具有设置画笔，撤销，缩放移动等功能(一)
该项目的代码已经重构,采用了新框架,强烈建议查看<Android全新图片涂鸦框架Doodle--多功能.可自定义.可扩展> (旧代码暂时不维护了,所以推荐还是使用最新框架吧!也希望大伙支持 ...
iOS 项目中用到的一些开源库和第三方组件
iOS 项目中用到的一些 iOS 开源库和第三方组件分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有 ...

记录一次项目中用到的图片涂鸦功能（Vue）

记录一次项目中用到的图片涂鸦功能（Vue）

记录一次项目中用到的图片涂鸦功能（Vue）相关推荐

最新文章

热门文章