Shulou(Shulou.com)06/02 Report--

Vue image editing plug-in tui.image-editor how to use, for this question, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Recently, users have put forward a new requirement, teachers can correct students' picture homework, need to rotate, scale, cut, doodle, mark, add text and so on. At first glance, I'm going to lose a lot of hair. Is there a powerful plug-in to achieve the above functions, so that I have more time to stop female friends from chopping hands on Singles Day? Of course the answer is yes.

Effect display graffiti

Cut out

Dimensioning

Rotation

Filter

Isn't it powerful! There are many functions that I will not show one by one. So what are you waiting for? use it with me.

Install npm I tui-image-editor// oryarn add tui-image-editor to use the Quick experience

Copy the following code to introduce the plug-in into your own project.

Import "tui-image-editor/dist/tui-image-editor.css"; import "tui-color-picker/dist/tui-color-picker.css"; import ImageEditor from "tui-image-editor"; export default {data () {return {instance: null,};}, mounted () {this.init () }, methods: {init () {this.instance = new ImageEditor (document.querySelector ("# tui-image-editor"), {includeUI: {loadImage: {path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name:" image ",} InitMenu: "draw", / / menu item opened by default menuBarPosition: "bottom", / / location of the menu}, cssMaxWidth: 1000, / / canvas maximum width cssMaxHeight: 1000, / / canvas maximum height}) Document.getElementsByClassName ("tui-image-editor-main") [0] .style.top = "45px"; / / distance of the picture from the top toolbar},},}; .drawing-container {height: 900px;}

You can see that live picture editing tools appear, isn't it very simple:

Internationalization

Since it is developed by foreigners, the default text descriptions are all in English, so let's turn it into Chinese first:

Const locale_zh = {ZoomIn: "zoom in", ZoomOut: "zoom out", Hand: "palm", History: 'history', Resize: 'adjust width and height', Crop: "crop", DeleteAll: "delete", Delete: "delete", Undo: "undo", Redo: "anti-undo", Reset: "reset", Flip: "mirror", Rotate: "rotate" Draw: "draw", Shape: "shape annotation", Icon: "icon annotation", Text: "text annotation", Mask: "mask", Filter: "filter", Bold: "bold", Italic: "italic", Underline: "underline", Left: "left alignment", Center: "center", Right: "right alignment", Color: "color" "Text size": "Font size", Custom: "Custom", Square: "Square", Apply: "apply", Cancel: "cancel", "Flip X": "X Axis", "Flip Y": "Y Axis", Range: "interval", Stroke: "Stroke", Fill: "fill", Circle: "Circle", Triangle: "Triangle", Rectangle: "rectangle" Free: "Curve", Straight: "Line", Arrow: "Arrow", "Arrow-2": "Arrow 2", "Arrow-3": "Arrow 3", "Star-1": "Star 1", "Star-2": "Star 2", Polygon: "Polygon", Location: "Positioning", Heart: "Heart", Bubble: "Bubble" "Custom icon": "custom icon", "Load Mask Image": "load mask picture", Grayscale: "grayscale", Blur: "blur", Sharpen: "sharpen", Emboss: "relief", "Remove White": "remove white", Distance: "distance", Brightness: "brightness", Noise: "noise", "Color Filter": "color filter", Sepia: "brown" Sepia2: "Brown 2", Invert: "negative", Pixelate: "Pixelization", Threshold: "threshold", Tint: "Hue", Multiply: "positive stacking", Blend: "mixed Color", Width: "width", Height: "height", "Lock Aspect Ratio": "Lock aspect ratio",} This.instance = new ImageEditor (document.querySelector ("# tui-image-editor"), {includeUI: {loadImage: {path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name:" image ",}, initMenu:" draw ", / / menu item opened by default menuBarPosition:" bottom " / / location of the menu: locale: locale_zh, / / localized language is Chinese}, cssMaxWidth: 1000, / / canvas maximum width cssMaxHeight: 1000, / / canvas maximum height})

The effect is as follows:

Custom style

The default style is dark. If you want to change it to a white background, or if you want to change the size and color of the buttons, you can use a custom style.

Const customTheme = {"common.bi.image": ", / / upper left corner logo picture" common.bisize.width ":" 0px "," common.bisize.height ":" 0px "," common.backgroundImage ":" none "," common.backgroundColor ":" # f3f4f6 "," common.border ":" 1px solid # 333 ", / / header" header.backgroundImage ":" none "," header.backgroundColor ":" # f3f4f6 " "header.border": "0px", / / load button "loadButton.backgroundColor": "# fff", "loadButton.border": "1px solid # ddd", "loadButton.color": "# 222nd", "loadButton.fontFamily": "NotoSans, sans-serif", "loadButton.fontSize": "12px", "loadButton.display": "none", / / hide / / download button "downloadButton.backgroundColor": "# fdba3b" "downloadButton.border": "1px solid # fdba3b", "downloadButton.color": "# fff", "downloadButton.fontFamily": "NotoSans, sans-serif", "downloadButton.fontSize": "12px", "downloadButton.display": "none", / / hide / / icons default "menu.normalIcon.color": "# 8a8a8a", "menu.activeIcon.color": "# 555555", "menu.disabledIcon.color": "# ccc" "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": "# 414141", "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",} This.instance = new ImageEditor (document.querySelector ("# tui-image-editor"), {includeUI: {loadImage: {path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name:" image ",}, initMenu:" draw ", / / menu item opened by default menuBarPosition:" bottom " / / location of the menu: locale: locale_zh, / / localized language is Chinese theme: customTheme, / / Custom style}, cssMaxWidth: 1000, / / canvas Max width cssMaxHeight: 1000, / / canvas Max height})

The effect is as follows:

Button optimization

Through the custom style, we can see that the Load and Download buttons in the upper right corner have been hidden, and then we hide the other unused buttons (according to business needs) and add a button to save the image.

Save / /... methods: {init () {this.instance = new ImageEditor (document.querySelector ("# tui-image-editor"), {includeUI: {loadImage: {path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", name:" image ",} Menu: ["resize", "crop", "rotate", "draw", "shape", "icon", "text", "filter"], / / bottom menu button list hides mirror flip and mask mask initMenu: "draw", / / menu item opened by default menuBarPosition: "bottom", / / location of the menu locale: locale_zh / / Localization language is Chinese theme: customTheme, / / Custom style}, cssMaxWidth: 1000, / / canvas Max width cssMaxHeight: 1000, / / canvas Max height}) Document.getElementsByClassName ("tui-image-editor-main") [0] .style.top = "45px"; / / adjust the picture display position document.getElementsByClassName ("tie-btn-reset tui-image-editor-item help") [0] .style.display = "none"; / / hide the top reset button}, / / Save the picture, and upload save () {const base64String = this.instance.toDataURL () / / base64 file const data = window.atob (base64String.split (",") [1]); const ia = new Uint8Array (data.length); for (let I = 0; I < data.length; iTunes +) {ia [I] = data.charCodeAt (I);} const blob = new Blob ([ia], {type: "image/png"}); / / blob file const form = new FormData () Form.append ("image", blob); / / upload file},} .drawing-container {height: 900px; position: relative; .save {position: absolute; right: 50px; top: 15px;}}

The effect is as follows:

You can see that the reset button at the top and the mirror and mask buttons at the bottom are gone. In the upper right corner, there is a save button of our own. Click the button to get the base64 file and blob file.

The complete code saves 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 locale_zh = {ZoomIn:' zoom in', ZoomOut: 'zoom out', Hand: 'palm', History: 'history', Resize: 'adjust width and height', Crop: 'crop', DeleteAll: 'delete all' Delete: 'delete', Undo: 'undo', Redo: 'anti-undo', Reset: 'reset', Flip: 'mirror', Rotate: 'rotate', Draw: 'draw', Shape: 'shape callout', Icon: 'icon annotation', Text: 'text callout', Mask: 'mask', Filter: 'filter', Bold: 'bold', Italic: 'italic' Underline: 'underline', Left: 'left alignment', Center: 'center', Right: 'right alignment', Color: 'color', 'Text size':' font size', Custom: 'custom', Square: 'square', Apply: 'apply', Cancel: 'cancel', 'Flip X: X axis', 'Flip Y axis' Range: 'interval', Stroke: 'stroke', Fill: 'fill', Circle: 'circle', Triangle: 'triangle', Rectangle: 'rectangle', Free: 'curve', Straight: 'straight line', Arrow: 'arrow', 'Arrow-2':' arrow 2', 'Arrow-3':' arrow 3', 'Star-1':' star 1' 'Star-2':' Star 2', Polygon: 'Polygon', Location: 'positioning', Heart: 'heart', Bubble: 'bubble', 'Custom icon':' custom icon, 'Load Mask Image':' load mask image, Grayscale: 'grayscale', Blur: 'blur', Sharpen: 'sharpen', Emboss: 'embossed' 'Remove White':' remove white', Distance: 'distance', Brightness: 'brightness', Noise: 'noise', 'Color Filter':' color filter, Sepia: 'brown', Sepia2: 'brown 2', Invert: 'negative', Pixelate: 'pixel', Threshold: 'threshold', Tint: 'hue', Multiply: 'positive stacking', Blend: 'mixed color' Width: 'width', Height: 'height', 'Lock Aspect Ratio':' lock aspect ratio'} const customTheme = {"common.bi.image": ", / / upper left corner logo picture" common.bisize.width ":" 0px "," common.bisize.height ":" 0px "," common.backgroundImage ":" none "," common.backgroundColor ":" # f3f4f6 "," common.border ":" 1px solid # 333 " / / header "header.backgroundImage": "none", "header.backgroundColor": "# f3f4f6", "header.border": "0px", / / load button "loadButton.backgroundColor": "# fff", "loadButton.border": "1px solid # ddd", "loadButton.color": "# 222"," loadButton.fontFamily ":" NotoSans, sans-serif "," loadButton.fontSize ":" 12px "," loadButton.display ":" none " / / hide / / download button "downloadButton.backgroundColor": "# fdba3b", "downloadButton.border": "1px solid # fdba3b", "downloadButton.color": "# fff", "downloadButton.fontFamily": "NotoSans, sans-serif", "downloadButton.fontSize": "12px", "downloadButton.display": "none", / / hide / / icons default "menu.normalIcon.color": "# 8a8a8a" "menu.activeIcon.color": # 555555 "," menu.disabledIcon.color ":" # ccc "," 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}}, mounted () {this.init ()}, methods: {init () {this.instance = new ImageEditor (document.querySelector ('# tui-image-editor') {includeUI: {loadImage: {path: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image', name:' image'}, menu: ['resize',' crop', 'rotate',' draw', 'shape',' icon', 'text',' filter'] / / bottom menu button list hides mirror flip and mask mask initMenu: 'draw', / / default menu item menuBarPosition:' bottom', / / menu location locale: locale_zh, / / localized language is Chinese theme: customTheme / / Custom style}, cssMaxWidth: 1000 / / canvas maximum width cssMaxHeight: 600 / / canvas maximum height}) document.getElementsByClassName ('tui-image-editor-main') [0] .style.top =' 45px' / / adjust the picture display position document.getElementsByClassName ('tie-btn-reset tui-image-editor-item help') [0] .style.display =' none' / / hide the top reset button} / / Save the picture And upload save () {const base64String = this.instance.toDataURL () / / base64 file const data = window.atob (base64String.split (',') [1]) const ia = new Uint8Array (data.length) for (let I = 0 I < data.length; iTunes +) {ia [I] = data.charCodeAt (I)} const blob = new Blob ([ia], {type: 'image/png'}) / / blob file const form = new FormData () form.append (' image', blob) / / upload file}. Drawing-container {height: 900px; position: relative; .save {position: absolute; right: 50px Top: 15px;}}

The above is the basic use of tui.image-editor, compared with other plug-ins, the advantage of tui.image-editor is powerful, simple and easy to use.

This is the answer to the question about how to use the Vue image editing plug-in tui.image-editor. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.