首页 > 其他分享 >tui-image-editor中跨域问题

tui-image-editor中跨域问题

时间：2024-05-15 10:30:33浏览次数：28  
标签：style container color image tui editor

如何安装 tui-image-editor等就不再赘述，参考这篇博客即可，

https://blog.csdn.net/weixin_44867717/article/details/128212251

简单版参考： https://blog.csdn.net/Bonsoir777/article/details/134153807

官网： https://ui.toast.com/tui-image-editor

 

下面说说我碰到的问题，

跨域

如上图所示，我用的图片地址是上传到阿里云的，图片地址是跨域的，这个需要在下图数据安全中跨域设置里面配置，这样就可以访问。

 

因为我是本地调试，所以用其他一个图片代替，

https://img1.baidu.com/it/u=4131209051,1689521986&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500   如下图所示，这样一个弹框就能弹出图片，

 

元素隐藏

  如下代码所示，我选取了一些界面元素，隐藏掉。

document.querySelector('[tooltip-content="Delete"]').style.display = 'none'
document.querySelector('[tooltip-content="DeleteAll"]').style.display = 'none'
document.querySelector('[tooltip-content="添加图标"]').style.display = 'none'
document.querySelector('[tooltip-content="Mask"]').style.display = 'none'
document.querySelector('[tooltip-content="Filter"]').style.display = 'none'


document.querySelector('[tooltip-content="放大"]').style.marginTop = '40px'

  在上述参考博客中，元素隐藏使用的是英文，结果无效，后来才发现，通过汉化后，选取的元素应该是写中文，

  如下是我汉化的配置，就需要通过汉化来选取元素，

// 中文菜单
const localeCN = {
    Crop: '裁剪',
    Draw: '涂鸦',
    Text: '添加文本',
    Free: '任意线条',
    Straight: '直线',
    Icon: '添加图标',
    Color: '颜色',
    Range: '范围',
    ZoomIn: '放大',
    ZoomOut: '缩小',
    Hand: '移动',
    History: '历史记录',
    Undo: '撤销',
    Redo: '前进',
    Reset: '重置',
    Delete: 'Delete',
    DeleteAll: 'DeleteAll',
    Resize: '调整大小',
    Flip: '镜像翻转',
    Rotate: '旋转',
    Shape: '图形',

    Width: '宽',
    Height: '高',
    'Lock Aspect Ratio': '锁定宽高比',
    Apply: '应用',
    Cancel: '取消',
    Custom: '自定义',
    Square: '正方形',
    'Flip X': 'X轴翻转',
    'Flip Y': 'Y轴翻转',
    Rectangle: '正方形',
    Circle: '圆',
    Triangle: '三角形',
    Fill: '填充',
    Stroke: '边框',
    Bold: '粗体',
    Italic: '斜体',
    Underline: '下划线',
    Left: '左',
    Center: '中',
    Right: '右',
    'Text size': '字号',

}

 

CSS样式调整问题

  如下所示   <style lang="scss"> 使用可以生效，但 <style lang="scss" scoped> 就不会生效。

<style lang="scss">
.tui-image-editor-container .tui-image-editor-main {
    top: 0em !important;
}

/* 强制压缩菜单的高度 ，减少占用屏幕的空间*/
.tui-image-editor-container .tui-image-editor-submenu {
    height: auto !important;
}

.tui-image-editor-container.bottom .tui-image-editor-submenu>div {
    padding: 0 !important;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
    background-color: white;
}

/* 顶部工具栏定位 */
.tui-image-editor-container .tui-image-editor-header {
    top: -55px;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
    top: -50px;
}

/* 取消超出部分隐藏，否则因为顶部工具栏已经超出去了，会显示不出来
.tui-image-editor-container {
  overflow: auto;
} */
/* 顶部工具栏定位 */
.tui-image-editor-container {
    overflow: visible;
}
</style>

 

完整组件代码

<template>
    <div class="boardBox">
        <!-- 用户可以通过点击大按钮来关闭弹窗 -->
        <div class="closeBigBtn">
            <img class="img" title="保存图片" :src="require('@/assets/monitor/save.png')"
                @click="saveCanvas2Img" />
            <img class="img" title="下载图片" :src="require('@/assets/monitor/download.png')"
                @click="downloadCanvas2Img" />
            <img class="img" title="分享图片" :src="require('@/assets/monitor/share.png')"
                @click="shareCanvas2Img" />
        </div>
        <!-- 绘图组件容器DOM -->
        <div id="tui-image-editor"></div>
    </div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";


// 中文菜单
const localeCN = {
    Crop: '裁剪',
    Draw: '涂鸦',
    Text: '添加文本',
    Free: '任意线条',
    Straight: '直线',
    Icon: '添加图标',
    Color: '颜色',
    Range: '范围',
    ZoomIn: '放大',
    ZoomOut: '缩小',
    Hand: '移动',
    History: '历史记录',
    Undo: '撤销',
    Redo: '前进',
    Reset: '重置',
    Delete: 'Delete',
    DeleteAll: 'DeleteAll',
    Resize: '调整大小',
    Flip: '镜像翻转',
    Rotate: '旋转',
    Shape: '图形',

    Width: '宽',
    Height: '高',
    'Lock Aspect Ratio': '锁定宽高比',
    Apply: '应用',
    Cancel: '取消',
    Custom: '自定义',
    Square: '正方形',
    'Flip X': 'X轴翻转',
    'Flip Y': 'Y轴翻转',
    Rectangle: '正方形',
    Circle: '圆',
    Triangle: '三角形',
    Fill: '填充',
    Stroke: '边框',
    Bold: '粗体',
    Italic: '斜体',
    Underline: '下划线',
    Left: '左',
    Center: '中',
    Right: '右',
    'Text size': '字号',

}
// 画布组件自定义样式
const customTheme = {
    // image 坐上角度图片
    'common.bi.image': '', // 在这里换上你喜欢的logo图片
    'common.bisize.width': '0px',
    'common.bisize.height': '0px',
    'common.backgroundImage': 'none',
    'common.backgroundColor': '#f3f4f6',
    'common.border': '0px solid #444',

    // header
    'header.backgroundImage': 'none',
    'header.backgroundColor': '#f3f4f6',
    'header.border': '0px',
    'header.display': 'none',

    // load button
    'loadButton.backgroundColor': '#fff',
    'loadButton.border': '1px solid #ddd',
    'loadButton.color': '#222',
    'loadButton.fontFamily': 'NotoSans, sans-serif',
    'loadButton.fontSize': '12px',
    'loadButton.display': 'none', // 可以直接隐藏掉

    // download button
    'downloadButton.backgroundColor': '#fdba3b',
    'downloadButton.border': '1px solid #fdba3b',
    'downloadButton.color': '#fff',
    'downloadButton.fontFamily': 'NotoSans, sans-serif',
    'downloadButton.fontSize': '12px',
    'downloadButton.display': 'none', // 可以直接隐藏掉

    // icons default
    'menu.normalIcon.color': '#8a8a8a',
    'menu.activeIcon.color': '#555555',
    'menu.disabledIcon.color': '#434343',
    'menu.hoverIcon.color': '#e9e9e9',
    'submenu.normalIcon.color': '#8a8a8a',
    'submenu.activeIcon.color': '#e9e9e9',

    'menu.iconSize.width': '24px',
    'menu.iconSize.height': '24px',
    'submenu.iconSize.width': '32px',
    'submenu.iconSize.height': '32px',

    // submenu primary color
    'submenu.backgroundColor': '#1e1e1e',
    'submenu.partition.color': '#858585',

    // submenu labels
    'submenu.normalLabel.color': '#858585',
    'submenu.normalLabel.fontWeight': 'lighter',
    'submenu.activeLabel.color': '#fff',
    'submenu.activeLabel.fontWeight': 'lighter',

    // checkbox style
    'checkbox.border': '1px solid #ccc',
    'checkbox.backgroundColor': '#fff',

    // rango style
    'range.pointer.color': '#fff',
    'range.bar.color': '#666',
    'range.subbar.color': '#d1d1d1',

    'range.disabledPointer.color': '#414141',
    'range.disabledBar.color': '#282828',
    'range.disabledSubbar.color': '#414141',

    'range.value.color': '#fff',
    'range.value.fontWeight': 'lighter',
    'range.value.fontSize': '11px',
    'range.value.border': '1px solid #353535',
    'range.value.backgroundColor': '#151515',
    'range.title.color': '#fff',
    'range.title.fontWeight': 'lighter',

    // colorpicker style
    'colorpicker.button.border': '1px solid #1e1e1e',
    'colorpicker.title.color': '#fff'
}


export default {
    data() {
        return {
            instance: null,
            loading: false,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.loading = true;
            let image = "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image";

            image = "https://img1.baidu.com/it/u=4131209051,1689521986&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500";

            // image = "https://cdn.esg-cloud.com/news/08a44f8437004910874d9286f239023d.jpg?x-oss-process=style/w750"

            this.instance = new ImageEditor(
                document.querySelector("#tui-image-editor"),
                {
                    includeUI: {
                        loadImage: {
                            path: image,
                            name: "image",
                        },
                        initMenu: "", // 默认打开的菜单项
                        menuBarPosition: "right", // 菜单所在的位置
                        // 汉化
                        locale: localeCN,
                        // 自定义样式（隐藏默认顶部栏目、按钮颜色。。。）
                        theme: customTheme
                    },
                    cssMaxWidth: 1000, // canvas 最大宽度
                    cssMaxHeight: 1000, // canvas 最大高度
                }
            );

            document.querySelector('[tooltip-content="Delete"]').style.display = 'none'
            document.querySelector('[tooltip-content="DeleteAll"]').style.display = 'none'
            document.querySelector('[tooltip-content="添加图标"]').style.display = 'none'
            document.querySelector('[tooltip-content="Mask"]').style.display = 'none'
            document.querySelector('[tooltip-content="Filter"]').style.display = 'none'


            document.querySelector('[tooltip-content="放大"]').style.marginTop = '40px'
        },
        /** 保存编辑后图片 */
        saveCanvas2Img() {
            // 调用组件官方方法，获取整个编辑后图片的base64数据
            const base64String = this.instance.toDataURL()

            this.$emit('updateImage',base64String)

            // console.log(base64String)

            //todo 传参数给后台接口
        },
        downloadCanvas2Img(){
            const base64String = this.instance.toDataURL()
            this.$emit('downloadImage',base64String)
        },
        shareCanvas2Img(){

        }
    },
};
</script>

<style lang="scss">
.tui-image-editor-container .tui-image-editor-main {
    top: 0em !important;
}

/* 强制压缩菜单的高度 ，减少占用屏幕的空间*/
.tui-image-editor-container .tui-image-editor-submenu {
    height: auto !important;
}

.tui-image-editor-container.bottom .tui-image-editor-submenu>div {
    padding: 0 !important;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
    background-color: white;
}

/* 顶部工具栏定位 */
.tui-image-editor-container .tui-image-editor-header {
    top: -55px;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
    top: -50px;
}

/* 取消超出部分隐藏，否则因为顶部工具栏已经超出去了，会显示不出来
.tui-image-editor-container {
  overflow: auto;
} */
/* 顶部工具栏定位 */
.tui-image-editor-container {
    overflow: visible;
}
</style>

<style lang="scss" scoped>
.boardBox {
    //   width: 100%;
    //   height: 80vh;
    // margin-top: 0px;
    height: 100%;
    width: 100%;
    background: #f9f9f9;

    canvas {
        border: 1px solid #b3b3b3;
    }
}

.img{
    width:30px;
    cursor: pointer;
    margin: 5px 10px;
}
</style>

  使用如下，

<CustomModal :visible.sync="showModal">
    <EditImage :imagePath="imagePath" @downloadImage="downloadImageM" @updateImage="updateImageM"></EditImage>
</CustomModal>

  下载图片

   有个下载图片的功能，用的这个博客的代码，不需要后端直接前端下载。

https://www.cnblogs.com/venje/p/12109626.html

downloadImageM(param) {
      let base64String = param;

      let needData = {
        img_id: this.nowHandleImage.img_id,
        base64: base64String
      }

      let h = JSON.stringify(needData)
      //base64太大，413
      // downloadImage(h);

      this.download(base64String);

    },


    download(base64) {
      let imgData = base64;
      this.downloadFile(this.nowHandleImage.img_name, imgData);
    },
    //下载
    downloadFile(fileName, content) {
      let aLink = document.createElement('a');
      let blob = this.base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    //base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

 

标签：style,container,color,image,tui,editor
From： https://www.cnblogs.com/weiyanei/p/18193306

相关文章

  • HTML 02 - Editors
    HTML-EditorsTolearnHTMLwewillrecommendyoutouseatexteditorlikeNotepad,becauseaNotepadwillhelpyoutounderstandtherequirementofeachtag,itwillnotsuggestanythingonitsownthatwillbehelpfultounderstandtheHTMLsyntax. ......
  • vue2使用elementUI组件el-tooltip指定元素进行提示信息（图标显示信息）
     <el-table-columnprop="operation"label="操作"borderwidth="200px"><templateslot-scope="scope"><divclass="operation-icons"><!......
  • vant---vantui上拉刷新下拉加载
    在用vantui做移动端列表数据渲染的时候，经常会使用到下拉刷新和上来加载。其实在vantui里面，它已经为我们提供了对应的组件，我们只需要去使用即可，具体代码示例：<van-pull-refreshv-model="tableList.refreshing"@refresh="refreshs"><van-listv-model="tableList.isLoadin......
  • Adding Drivers into VMWare ESXi Installation Image
    ThestandardESXiISOimagedoesn’tsupportmostdesktopNICadapters.ToinstallESXionsuchacomputer,youwillneedtoinjectthedriversforyournetworkadapterintoyourESXiinstallationimageLet’sseehowtoaddthedrivertotheVMwareESXi6.......
  • WPF Canvas在Image 图像上绘图,自适应缩放.
    效果如图  实现了绘图,自适应缩放核心代码如下<Window.InputBindings><KeyBindingKey="Z"Modifiers="Ctrl"Command="{BindingUndoCommand}"/></Window.InputBindings><i:Interaction.Triggers>......
  • Vue+elementUI-创建项目
    创建VUE项目vuecreatemy-project后会出现选项，反正我选择的是自定义创建，第三个  之后选2.X选一堆配置，案子自己需求配置然后 然后进入到我们的项目目录，可以运行   这个安装好了以后，到element.ui的官方文档地址：https://element.eleme.cn/#/zh-CN/compo......
  • ElementUI——elementui重复引入样式
    前言按着文档操作后发现存在样式重复引入的问题，尝试了一系列的配置都未生效，最终是直接生成样式导入解决；文档：https://element.eleme.io/#/zh-CN/component/custom-theme#yin-ru-zi-ding-yi-zhu-ti工具：https://elementui.github.io/theme-chalk-preview/#/zh-CN内容使用工具生......
  • Unity Editor下运行DoTween动画
    DOTweenEditorPreview.PrepareTweenForPreview(tar.GetTween());DOTweenEditorPreview.Start();以Test脚本为例：publicclassUTest:MonoBehaviour{publicTweenGetTween(){vartw=transform.DOMove(Vector3.left,2);tw.onUpdate=()=>......
  • FastUI：快速构建Web应用程序界面
    简介FastUI是一种全新的构建Web应用程序用户界面的方式，它是由声明式的Python代码定义的。它旨在为Python开发人员和前端开发人员提供一种简单而强大的工具，以便他们能够更高效地构建响应式的Web应用程序界面，而无需处理繁杂的JavaScript代码或底层的技术细节。FastUI的优势•......
  • SwiftUI State,Binding 状态管理
    代码////ContentView.swift//SwiftUIState////CreatedbyCHENHaoon2024/5/8.//importSwiftUIstructContentView:View{@StateprivatevarisPlaying=false@StateprivatevarclickNumber1=0@StateprivatevarclickNumber2=0......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99