├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── LICENSE
├── README.md
├── README_npm.md
├── build
├── build.js
├── check-versions.js
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
├── config
├── dev.env.js
├── index.js
└── prod.env.js
├── dist
├── fonts
│ ├── iconfont.400930b.ttf
│ └── iconfont.d46bcc2.eot
├── img
│ └── iconfont.4327f2c.svg
├── vue-image-transform.min.css
└── vue-image-transform.min.js
├── index.html
├── package-lock.json
├── package.json
├── src
├── App.vue
├── components
│ ├── ImageTransform
│ │ ├── ImageTransform.vue
│ │ ├── PerspectiveTransform.min.js
│ │ ├── canvasUtil.min.js
│ │ └── index.js
│ └── index.js
├── examples
│ ├── image-model.vue
│ └── index.vue
├── main.js
└── router
│ └── index.js
└── static
├── .gitkeep
├── font_demo
├── demo.css
├── demo_fontclass.html
├── demo_symbol.html
├── demo_unicode.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js
├── iconfont.svg
├── iconfont.ttf
└── iconfont.woff
└── image
├── sofa.png
└── sticker1.png
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | }
8 | }],
9 | "stage-2"
10 | ],
11 | "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parser: 'babel-eslint',
6 | parserOptions: {
7 | sourceType: 'module'
8 | },
9 | env: {
10 | browser: true,
11 | },
12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 | extends: 'standard',
14 | // required to lint *.vue files
15 | plugins: [
16 | 'html'
17 | ],
18 | // add your custom rules here
19 | 'rules': {
20 | // allow paren-less arrow functions
21 | 'arrow-parens': 0,
22 | // allow async-await
23 | 'generator-star-spacing': 0,
24 | // allow debugger during development
25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
26 | 'semi': ['error', 'always'],
27 | 'no-unused-vars': 0,
28 | 'one-var': 0
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 |
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | "autoprefixer": {}
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction, and
10 | distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by the copyright
13 | owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all other entities
16 | that control, are controlled by, or are under common control with that entity.
17 | For the purposes of this definition, "control" means (i) the power, direct or
18 | indirect, to cause the direction or management of such entity, whether by
19 | contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
20 | outstanding shares, or (iii) beneficial ownership of such entity.
21 |
22 | "You" (or "Your") shall mean an individual or Legal Entity exercising
23 | permissions granted by this License.
24 |
25 | "Source" form shall mean the preferred form for making modifications, including
26 | but not limited to software source code, documentation source, and configuration
27 | files.
28 |
29 | "Object" form shall mean any form resulting from mechanical transformation or
30 | translation of a Source form, including but not limited to compiled object code,
31 | generated documentation, and conversions to other media types.
32 |
33 | "Work" shall mean the work of authorship, whether in Source or Object form, made
34 | available under the License, as indicated by a copyright notice that is included
35 | in or attached to the work (an example is provided in the Appendix below).
36 |
37 | "Derivative Works" shall mean any work, whether in Source or Object form, that
38 | is based on (or derived from) the Work and for which the editorial revisions,
39 | annotations, elaborations, or other modifications represent, as a whole, an
40 | original work of authorship. For the purposes of this License, Derivative Works
41 | shall not include works that remain separable from, or merely link (or bind by
42 | name) to the interfaces of, the Work and Derivative Works thereof.
43 |
44 | "Contribution" shall mean any work of authorship, including the original version
45 | of the Work and any modifications or additions to that Work or Derivative Works
46 | thereof, that is intentionally submitted to Licensor for inclusion in the Work
47 | by the copyright owner or by an individual or Legal Entity authorized to submit
48 | on behalf of the copyright owner. For the purposes of this definition,
49 | "submitted" means any form of electronic, verbal, or written communication sent
50 | to the Licensor or its representatives, including but not limited to
51 | communication on electronic mailing lists, source code control systems, and
52 | issue tracking systems that are managed by, or on behalf of, the Licensor for
53 | the purpose of discussing and improving the Work, but excluding communication
54 | that is conspicuously marked or otherwise designated in writing by the copyright
55 | owner as "Not a Contribution."
56 |
57 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf
58 | of whom a Contribution has been received by Licensor and subsequently
59 | incorporated within the Work.
60 |
61 | 2. Grant of Copyright License.
62 |
63 | Subject to the terms and conditions of this License, each Contributor hereby
64 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
65 | irrevocable copyright license to reproduce, prepare Derivative Works of,
66 | publicly display, publicly perform, sublicense, and distribute the Work and such
67 | Derivative Works in Source or Object form.
68 |
69 | 3. Grant of Patent License.
70 |
71 | Subject to the terms and conditions of this License, each Contributor hereby
72 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
73 | irrevocable (except as stated in this section) patent license to make, have
74 | made, use, offer to sell, sell, import, and otherwise transfer the Work, where
75 | such license applies only to those patent claims licensable by such Contributor
76 | that are necessarily infringed by their Contribution(s) alone or by combination
77 | of their Contribution(s) with the Work to which such Contribution(s) was
78 | submitted. If You institute patent litigation against any entity (including a
79 | cross-claim or counterclaim in a lawsuit) alleging that the Work or a
80 | Contribution incorporated within the Work constitutes direct or contributory
81 | patent infringement, then any patent licenses granted to You under this License
82 | for that Work shall terminate as of the date such litigation is filed.
83 |
84 | 4. Redistribution.
85 |
86 | You may reproduce and distribute copies of the Work or Derivative Works thereof
87 | in any medium, with or without modifications, and in Source or Object form,
88 | provided that You meet the following conditions:
89 |
90 | You must give any other recipients of the Work or Derivative Works a copy of
91 | this License; and
92 | You must cause any modified files to carry prominent notices stating that You
93 | changed the files; and
94 | You must retain, in the Source form of any Derivative Works that You distribute,
95 | all copyright, patent, trademark, and attribution notices from the Source form
96 | of the Work, excluding those notices that do not pertain to any part of the
97 | Derivative Works; and
98 | If the Work includes a "NOTICE" text file as part of its distribution, then any
99 | Derivative Works that You distribute must include a readable copy of the
100 | attribution notices contained within such NOTICE file, excluding those notices
101 | that do not pertain to any part of the Derivative Works, in at least one of the
102 | following places: within a NOTICE text file distributed as part of the
103 | Derivative Works; within the Source form or documentation, if provided along
104 | with the Derivative Works; or, within a display generated by the Derivative
105 | Works, if and wherever such third-party notices normally appear. The contents of
106 | the NOTICE file are for informational purposes only and do not modify the
107 | License. You may add Your own attribution notices within Derivative Works that
108 | You distribute, alongside or as an addendum to the NOTICE text from the Work,
109 | provided that such additional attribution notices cannot be construed as
110 | modifying the License.
111 | You may add Your own copyright statement to Your modifications and may provide
112 | additional or different license terms and conditions for use, reproduction, or
113 | distribution of Your modifications, or for any such Derivative Works as a whole,
114 | provided Your use, reproduction, and distribution of the Work otherwise complies
115 | with the conditions stated in this License.
116 |
117 | 5. Submission of Contributions.
118 |
119 | Unless You explicitly state otherwise, any Contribution intentionally submitted
120 | for inclusion in the Work by You to the Licensor shall be under the terms and
121 | conditions of this License, without any additional terms or conditions.
122 | Notwithstanding the above, nothing herein shall supersede or modify the terms of
123 | any separate license agreement you may have executed with Licensor regarding
124 | such Contributions.
125 |
126 | 6. Trademarks.
127 |
128 | This License does not grant permission to use the trade names, trademarks,
129 | service marks, or product names of the Licensor, except as required for
130 | reasonable and customary use in describing the origin of the Work and
131 | reproducing the content of the NOTICE file.
132 |
133 | 7. Disclaimer of Warranty.
134 |
135 | Unless required by applicable law or agreed to in writing, Licensor provides the
136 | Work (and each Contributor provides its Contributions) on an "AS IS" BASIS,
137 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
138 | including, without limitation, any warranties or conditions of TITLE,
139 | NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
140 | solely responsible for determining the appropriateness of using or
141 | redistributing the Work and assume any risks associated with Your exercise of
142 | permissions under this License.
143 |
144 | 8. Limitation of Liability.
145 |
146 | In no event and under no legal theory, whether in tort (including negligence),
147 | contract, or otherwise, unless required by applicable law (such as deliberate
148 | and grossly negligent acts) or agreed to in writing, shall any Contributor be
149 | liable to You for damages, including any direct, indirect, special, incidental,
150 | or consequential damages of any character arising as a result of this License or
151 | out of the use or inability to use the Work (including but not limited to
152 | damages for loss of goodwill, work stoppage, computer failure or malfunction, or
153 | any and all other commercial damages or losses), even if such Contributor has
154 | been advised of the possibility of such damages.
155 |
156 | 9. Accepting Warranty or Additional Liability.
157 |
158 | While redistributing the Work or Derivative Works thereof, You may choose to
159 | offer, and charge a fee for, acceptance of support, warranty, indemnity, or
160 | other liability obligations and/or rights consistent with this License. However,
161 | in accepting such obligations, You may act only on Your own behalf and on Your
162 | sole responsibility, not on behalf of any other Contributor, and only if You
163 | agree to indemnify, defend, and hold each Contributor harmless for any liability
164 | incurred by, or claims asserted against, such Contributor by reason of your
165 | accepting any such warranty or additional liability.
166 |
167 | END OF TERMS AND CONDITIONS
168 |
169 | APPENDIX: How to apply the Apache License to your work
170 |
171 | To apply the Apache License to your work, attach the following boilerplate
172 | notice, with the fields enclosed by brackets "{}" replaced with your own
173 | identifying information. (Don't include the brackets!) The text should be
174 | enclosed in the appropriate comment syntax for the file format. We also
175 | recommend that a file or class name and description of purpose be included on
176 | the same "printed page" as the copyright notice for easier identification within
177 | third-party archives.
178 |
179 | Copyright 2018 purestart
180 |
181 | Licensed under the Apache License, Version 2.0 (the "License");
182 | you may not use this file except in compliance with the License.
183 | You may obtain a copy of the License at
184 |
185 | http://www.apache.org/licenses/LICENSE-2.0
186 |
187 | Unless required by applicable law or agreed to in writing, software
188 | distributed under the License is distributed on an "AS IS" BASIS,
189 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
190 | See the License for the specific language governing permissions and
191 | limitations under the License.
192 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-image-transform
2 |
3 | #### 项目介绍
4 |
5 | image transform 图片变形编辑组件,拖拽变形,并导出新的图片,兼容移动端和 PC 端
6 |
7 | 
8 |
9 | #### 软件架构
10 |
11 | 兼容移动端和 PC 端
12 |
13 | #### 依赖
14 |
15 | 目前依赖 jquery,需要在 index.html 引入 jq
16 |
17 | >
18 |
19 | #### 安装教程
20 |
21 | npm install vue-image-transform --save
22 |
23 | #### 使用说明
24 |
25 | 在main.js中
26 | import 'vue-image-transform/dist/vue-image-transform.min.css';
27 | import { ImageTranform } from 'vue-image-transform';
28 | Vue.use(ImageTranform);
29 |
30 | 页面中使用
31 |
36 |
37 |
38 | ## Usage
39 |
40 | #### Props
41 |
42 | | Name | Type | Default | Description |
43 | | --------- | ------ | ------- | ---------------- |
44 | | width | Number | 0 | 编辑画布宽度 |
45 | | height | Number | 0 | 编辑画布高度 |
46 | | imgSrc | String | 0 | 图片 Url |
47 | | maxImageW | Number | 0 | 编辑图片最大宽度 |
48 | | maxImageH | Number | 0 | 编辑图片最大高度 |
49 |
50 | ## Function
51 |
52 | > 方法调用
53 | > this.\$refs.imageTran.方法名(params)
54 |
55 | #### toDataUrl(cb) 绘制图片
56 |
57 | | params | Type | Description |
58 | | ------ | -------- | --------------------------- |
59 | | cb | Function | 生成图片回调 cb(base64)=>{} |
60 |
61 | #### 参与贡献
62 |
63 | 1. Fork 本项目
64 | 2. 新建 Feat_xxx 分支
65 | 3. 提交代码
66 | 4. 新建 Pull Request
67 |
--------------------------------------------------------------------------------
/README_npm.md:
--------------------------------------------------------------------------------
1 | # auto-preview-image
2 | HengTuo auto-preview-image.
3 |
4 | ## Installation
5 | ```
6 | npm install auto-preview-image --save
7 | ```
8 |
9 | ## Import
10 | ```
11 | 在main.js中
12 | import 'auto-preview-image/dist/auto-preview-image.min.css';
13 | import { ApImage } from 'auto-preview-image';
14 | ```
15 | ```
16 | Vue.use(ApImage);
17 | ```
18 |
19 | 使用
20 |
21 | ```
22 |
23 | ```
24 |
25 | ## Changelog
26 | ### 2018.8.26
27 | > v0.1.4 * 初始化组件库
28 |
--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const config = require('../config')
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
5 | const packageConfig = require('../package.json')
6 |
7 | exports.assetsPath = function (_path) {
8 | const assetsSubDirectory = process.env.NODE_ENV === 'production'
9 | ? config.build.assetsSubDirectory
10 | : config.dev.assetsSubDirectory
11 |
12 | return path.posix.join(assetsSubDirectory, _path)
13 | }
14 |
15 | exports.cssLoaders = function (options) {
16 | options = options || {}
17 |
18 | const cssLoader = {
19 | loader: 'css-loader',
20 | options: {
21 | sourceMap: options.sourceMap
22 | }
23 | }
24 |
25 | const postcssLoader = {
26 | loader: 'postcss-loader',
27 | options: {
28 | sourceMap: options.sourceMap
29 | }
30 | }
31 |
32 | // generate loader string to be used with extract text plugin
33 | function generateLoaders (loader, loaderOptions) {
34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35 |
36 | if (loader) {
37 | loaders.push({
38 | loader: loader + '-loader',
39 | options: Object.assign({}, loaderOptions, {
40 | sourceMap: options.sourceMap
41 | })
42 | })
43 | }
44 |
45 | // Extract CSS when that option is specified
46 | // (which is the case during production build)
47 | if (options.extract) {
48 | return ExtractTextPlugin.extract({
49 | use: loaders,
50 | fallback: 'vue-style-loader'
51 | })
52 | } else {
53 | return ['vue-style-loader'].concat(loaders)
54 | }
55 | }
56 |
57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58 | return {
59 | css: generateLoaders(),
60 | postcss: generateLoaders(),
61 | less: generateLoaders('less'),
62 | sass: generateLoaders('sass', { indentedSyntax: true }),
63 | scss: generateLoaders('sass'),
64 | stylus: generateLoaders('stylus'),
65 | styl: generateLoaders('stylus')
66 | }
67 | }
68 |
69 | // Generate loaders for standalone style files (outside of .vue)
70 | exports.styleLoaders = function (options) {
71 | const output = []
72 | const loaders = exports.cssLoaders(options)
73 |
74 | for (const extension in loaders) {
75 | const loader = loaders[extension]
76 | output.push({
77 | test: new RegExp('\\.' + extension + '$'),
78 | use: loader
79 | })
80 | }
81 |
82 | return output
83 | }
84 |
85 | exports.createNotifierCallback = () => {
86 | const notifier = require('node-notifier')
87 |
88 | return (severity, errors) => {
89 | if (severity !== 'error') return
90 |
91 | const error = errors[0]
92 | const filename = error.file && error.file.split('!').pop()
93 |
94 | notifier.notify({
95 | title: packageConfig.name,
96 | message: severity + ': ' + error.name,
97 | subtitle: filename || '',
98 | icon: path.join(__dirname, 'logo.png')
99 | })
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | }),
14 | cssSourceMap: sourceMapEnabled,
15 | cacheBusting: config.dev.cacheBusting,
16 | transformToRequire: {
17 | video: ['src', 'poster'],
18 | source: 'src',
19 | img: 'src',
20 | image: 'xlink:href'
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: process.env.NODE_ENV === 'production'
26 | ? './src/components/index.js'
27 | : './src/main.js'
28 | },
29 | output: {
30 | path: config.build.assetsRoot,
31 | filename: '[name].js',
32 | publicPath: process.env.NODE_ENV === 'production'
33 | ? config.build.assetsPublicPath
34 | : config.dev.assetsPublicPath
35 | },
36 | resolve: {
37 | extensions: ['.js', '.vue', '.json'],
38 | alias: {
39 | 'vue$': 'vue/dist/vue.esm.js',
40 | '@': resolve('src')
41 | }
42 | },
43 | module: {
44 | rules: [
45 | ...(config.dev.useEslint ? [createLintingRule()] : []),
46 | {
47 | test: /\.vue$/,
48 | loader: 'vue-loader',
49 | options: vueLoaderConfig
50 | },
51 | {
52 | test: /\.js$/,
53 | loader: 'babel-loader',
54 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
55 | },
56 | {
57 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
58 | loader: 'url-loader',
59 | options: {
60 | limit: 10000,
61 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
62 | }
63 | },
64 | {
65 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
66 | loader: 'url-loader',
67 | options: {
68 | limit: 10000,
69 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
70 | }
71 | },
72 | {
73 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
74 | loader: 'url-loader',
75 | options: {
76 | limit: 10000,
77 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
78 | }
79 | }
80 | ]
81 | },
82 | node: {
83 | // prevent webpack from injecting useless setImmediate polyfill because Vue
84 | // source contains it (although only uses it if it's native).
85 | setImmediate: false,
86 | // prevent webpack from injecting mocks to Node native modules
87 | // that does not make sense for the client
88 | dgram: 'empty',
89 | fs: 'empty',
90 | net: 'empty',
91 | tls: 'empty',
92 | child_process: 'empty'
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const webpack = require('webpack')
4 | const config = require('../config')
5 | const merge = require('webpack-merge')
6 | const path = require('path')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 |
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 |
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: config.dev.devtool,
22 |
23 | // these devServer options should be customized in /config/index.js
24 | devServer: {
25 | clientLogLevel: 'warning',
26 | historyApiFallback: {
27 | rewrites: [
28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 | ],
30 | },
31 | hot: true,
32 | contentBase: false, // since we use CopyWebpackPlugin.
33 | compress: true,
34 | host: HOST || config.dev.host,
35 | port: PORT || config.dev.port,
36 | open: config.dev.autoOpenBrowser,
37 | overlay: config.dev.errorOverlay
38 | ? { warnings: false, errors: true }
39 | : false,
40 | publicPath: config.dev.assetsPublicPath,
41 | proxy: config.dev.proxyTable,
42 | quiet: true, // necessary for FriendlyErrorsPlugin
43 | watchOptions: {
44 | poll: config.dev.poll,
45 | }
46 | },
47 | plugins: [
48 | new webpack.DefinePlugin({
49 | 'process.env': require('../config/dev.env')
50 | }),
51 | new webpack.HotModuleReplacementPlugin(),
52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 | new webpack.NoEmitOnErrorsPlugin(),
54 | // https://github.com/ampedandwired/html-webpack-plugin
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: 'index.html',
58 | inject: true
59 | }),
60 | // copy custom static assets
61 | new CopyWebpackPlugin([
62 | {
63 | from: path.resolve(__dirname, '../static'),
64 | to: config.dev.assetsSubDirectory,
65 | ignore: ['.*']
66 | }
67 | ])
68 | ]
69 | })
70 |
71 | module.exports = new Promise((resolve, reject) => {
72 | portfinder.basePort = process.env.PORT || config.dev.port
73 | portfinder.getPort((err, port) => {
74 | if (err) {
75 | reject(err)
76 | } else {
77 | // publish the new Port, necessary for e2e tests
78 | process.env.PORT = port
79 | // add port to devServer config
80 | devWebpackConfig.devServer.port = port
81 |
82 | // Add FriendlyErrorsPlugin
83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 | compilationSuccessInfo: {
85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 | },
87 | onErrors: config.dev.notifyOnErrors
88 | ? utils.createNotifierCallback()
89 | : undefined
90 | }))
91 |
92 | resolve(devWebpackConfig)
93 | }
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const webpack = require('webpack')
5 | const config = require('../config')
6 | const merge = require('webpack-merge')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 |
14 | const env = require('../config/prod.env')
15 |
16 | const webpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({
19 | sourceMap: config.build.productionSourceMap,
20 | extract: true,
21 | usePostCSS: true
22 | })
23 | },
24 | devtool: config.build.productionSourceMap ? config.build.devtool : false,
25 | output: {
26 | path: config.build.assetsRoot,
27 | publicPath: config.build.assetsPublicPath,
28 | filename: 'vue-image-transform.min.js',
29 | library: 'vue-image-transform',
30 | libraryTarget: 'umd'
31 | },
32 | plugins: [
33 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
34 | new webpack.DefinePlugin({
35 | 'process.env': env
36 | }),
37 | new webpack.optimize.UglifyJsPlugin({
38 | compress: {
39 | warnings: false
40 | },
41 | sourceMap: true
42 | }),
43 | // extract css into its own file
44 | new ExtractTextPlugin({
45 | // filename: utils.assetsPath('css/[name].[contenthash].css')
46 | filename: 'vue-image-transform.min.css'
47 | }),
48 | new OptimizeCSSPlugin()
49 | ]
50 | })
51 |
52 | if (config.build.productionGzip) {
53 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
54 |
55 | webpackConfig.plugins.push(
56 | new CompressionWebpackPlugin({
57 | asset: '[path].gz[query]',
58 | algorithm: 'gzip',
59 | test: new RegExp(
60 | '\\.(' +
61 | config.build.productionGzipExtensions.join('|') +
62 | ')$'
63 | ),
64 | threshold: 10240,
65 | minRatio: 0.8
66 | })
67 | )
68 | }
69 |
70 | if (config.build.bundleAnalyzerReport) {
71 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
72 | webpackConfig.plugins.push(new BundleAnalyzerPlugin())
73 | }
74 |
75 | module.exports = webpackConfig
76 |
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.2.8
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 | assetsSubDirectory: 'static',
10 | assetsPublicPath: '/',
11 | proxyTable: {},
12 | host: '0.0.0.0',
13 | port: 8089,
14 | autoOpenBrowser: false,
15 | errorOverlay: true,
16 | notifyOnErrors: true,
17 | poll: false,
18 | showEslintErrorsInOverlay: false,
19 | devtool: 'cheap-module-eval-source-map',
20 | cacheBusting: true,
21 | cssSourceMap: true,
22 | },
23 | build: {
24 | env: require('./prod.env'),
25 | assetsRoot: path.resolve(__dirname, '../dist'),
26 | assetsPublicPath: '/',
27 | assetsSubDirectory: '/',
28 | productionSourceMap: true,
29 | productionGzip: false,
30 | productionGzipExtensions: ['js', 'css'],
31 | bundleAnalyzerReport: process.env.npm_config_report
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/dist/fonts/iconfont.400930b.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/dist/fonts/iconfont.400930b.ttf
--------------------------------------------------------------------------------
/dist/fonts/iconfont.d46bcc2.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/dist/fonts/iconfont.d46bcc2.eot
--------------------------------------------------------------------------------
/dist/img/iconfont.4327f2c.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
120 |
--------------------------------------------------------------------------------
/dist/vue-image-transform.min.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:iconfont;src:url(//fonts/iconfont.d46bcc2.eot);src:url(//fonts/iconfont.d46bcc2.eot#iefix) format("embedded-opentype"),url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),url(//fonts/iconfont.400930b.ttf) format("truetype"),url(//img/iconfont.4327f2c.svg#iconfont) format("svg")}.iconfont[data-v-58932f48]{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-all[data-v-58932f48]:before{content:"\E696"}.icon-back[data-v-58932f48]:before{content:"\E697"}.icon-close1[data-v-58932f48]:before{content:"\E69A"}.icon-delete[data-v-58932f48]:before{content:"\E69D"}.icon-help[data-v-58932f48]:before{content:"\E6A3"}.icon-moreunfold[data-v-58932f48]:before{content:"\E6A6"}.icon-pic[data-v-58932f48]:before{content:"\E6A8"}.icon-search[data-v-58932f48]:before{content:"\E6AC"}.icon-set[data-v-58932f48]:before{content:"\E6AE"}.icon-smile[data-v-58932f48]:before{content:"\E6AF"}.icon-viewgallery[data-v-58932f48]:before{content:"\E6B4"}.icon-viewlist[data-v-58932f48]:before{content:"\E6B5"}.icon-close[data-v-58932f48]:before{content:"\E619"}.icon-subtract[data-v-58932f48]:before{content:"\E6FE"}.icon-gerenzhongxin[data-v-58932f48]:before{content:"\E70B"}.icon-icondownload[data-v-58932f48]:before{content:"\E714"}.icon-map[data-v-58932f48]:before{content:"\E715"}.icon-bad[data-v-58932f48]:before{content:"\E716"}.icon-good[data-v-58932f48]:before{content:"\E717"}.icon-yinlemusic217[data-v-58932f48]:before{content:"\E713"}.icon-home[data-v-58932f48]:before{content:"\E60B"}.icon-search1187938easyiconnet[data-v-58932f48]:before{content:"\E61D"}.icon-yinlemusic216[data-v-58932f48]:before{content:"\E71E"}.icon-right[data-v-58932f48]:before{content:"\E6C7"}.icon-hot[data-v-58932f48]:before{content:"\E756"}.icon-add[data-v-58932f48]:before{content:"\E63C"}.icon-speaker-6[data-v-58932f48]:before{content:"\E66F"}.icon-speaker-5[data-v-58932f48]:before{content:"\E670"}.icon-yanzhengma[data-v-58932f48]:before{content:"\E682"}.icon-Security[data-v-58932f48]:before{content:"\E630"}.icon-icon-test[data-v-58932f48]:before{content:"\E62B"}[data-v-58932f48],[data-v-58932f48]:after,[data-v-58932f48]:before{box-sizing:border-box}.image-dialog .image-dialog-trigger[data-v-58932f48],.image-dialog[data-v-58932f48]{width:100%}.image-dialog .image-dialog-trigger.hidden[data-v-58932f48]{opacity:0}.image-dialog .slot-content[data-v-58932f48]{transition:opacity .6s ease;opacity:0}.image-dialog .slot-content.visible[data-v-58932f48]{opacity:1}.image-dialog .image-dialog-full[data-v-58932f48]{display:-ms-flexbox;display:flex}.image-dialog .image-dialog-full .cancle-btn[data-v-58932f48]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:15px;padding-left:10px;padding-right:4px;color:#777}.image-dialog .input-wrapper[data-v-58932f48]{background-color:#efeff4;border-bottom:1px solid #e4e4e4;padding:2vw;box-sizing:border-box;width:100vw}.image-dialog .input-wrapper .input[data-v-58932f48]{border:none;outline:none;padding:5px;font-size:15px;border-radius:5px;min-height:7vw;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;transition:width 3s}.image-dialog .input-wrapper .input input[data-v-58932f48]{border:none;outline:none;padding:5px;font-size:15px;border-radius:5px;padding-left:0;-ms-flex:1;flex:1}.image-dialog .input-wrapper .input .iconfont[data-v-58932f48]{color:#999;margin-left:1vw;margin-right:2vw;font-size:15px;padding-top:0}.image-dialog .input-wrapper .input .palceholder[data-v-58932f48]{color:#999}.image-dialog-thumb[data-v-58932f48]{-o-object-fit:cover;object-fit:cover}.image-dialog-trigger[data-v-58932f48]{margin:0;padding:0;background:none;border:none;cursor:pointer}.image-dialog-close[data-v-58932f48]{position:absolute;right:20px;top:20px;width:40px;height:40px;padding:0;background:none;border:none;cursor:pointer;transition:.3s ease-out;outline:none}.image-dialog-close[data-v-58932f48]:after,.image-dialog-close[data-v-58932f48]:before{content:"";position:absolute;left:50%;top:50%;margin-top:-.5px;margin-left:-20px;width:30px;height:1px;background-color:#000}.image-dialog-close[data-v-58932f48]:before{transform:rotate(45deg)}.image-dialog-close[data-v-58932f48]:after{transform:rotate(135deg)}.image-dialog-close[data-v-58932f48]:hover{transform:rotate(270deg)}.image-dialog-background[data-v-58932f48]{overflow:auto;position:fixed;top:0;right:0;left:0;bottom:0;width:100vw;height:100vh;background-color:hsla(0,0%,100%,.95);text-align:center;z-index:1}.image-dialog-animate[data-v-58932f48]{display:none;position:absolute;transform-origin:left top}.image-dialog-animate.loading[data-v-58932f48]{display:block}.dialog-enter-active[data-v-58932f48],.dialog-leave-active[data-v-58932f48]{transition:background-color .3s ease-out}.dialog-enter[data-v-58932f48],.dialog-leave-to[data-v-58932f48]{background-color:hsla(0,0%,100%,0)}.dialog-enter-active .image-dialog-animate[data-v-58932f48],.dialog-leave-active .image-dialog-animate[data-v-58932f48]{display:block;transition:transform .3s cubic-bezier(1,0,.7,1)}.dialog-enter-active .image-dialog-full[data-v-58932f48],.dialog-leave-active .image-dialog-full[data-v-58932f48]{visibility:hidden}.image-dialog-trigger img[data-v-58932f48]{width:100%;height:100%}
--------------------------------------------------------------------------------
/dist/vue-image-transform.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-image-transform"]=e():t["vue-image-transform"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=1)}([function(t,e,i){"use strict";e.a={props:{thumb:String,full:String,radius:Number,onSearch:{type:Function,required:!0,default:function(){}},onChange:{type:Function,required:!1,default:function(){}}},data:function(){return{loaded:!1,slotVisiable:!1,appearedDialog:!1,fullWidth:0,fullHeight:0,keyword:"",showCancle:!1}},created:function(){this.fullWidth=window.screen.width,this.fullHeight=window.screen.height},mounted:function(){},methods:{onInput:function(t){this.onChange(t.target.value)},submitForm:function(){this.keyword.length>0?(this.appearedDialog=!1,this.onSearch(this.keyword)):this.hideDialog()},getImgNaturalDimensions:function(t,e){var i,n;if(t.naturalWidth){var a=new Image;a.onload=function(){var t=a.width,i=a.height;e({w:t,h:i})},a.src=t.src}else i=t.naturalWidth,n=t.naturalHeight,e({w:i,h:n})},getEleNaturalDimensions:function(t,e){var i,n;i=t.offsetWidth,n=t.offsetHeight,e({w:i,h:n})},showDialog:function(){var t=this,e=this.$refs.thumb;this.getEleNaturalDimensions(e,function(e){e.w>e.h?t.fullHeight=e.h/e.w*t.fullWidth:t.fullWidth=e.w/e.h*t.fullHeight,t.maxWidth&&t.maxWidth>0&&t.fullWidth>t.maxWidth&&(t.fullWidth=t.maxWidth,t.fullHeight=e.h/e.w*t.fullWidth),t.maxHeight&&t.maxHeight>0&&t.fullHeight>t.maxHeight&&(t.fullHeight=t.maxHeight,t.fullWidth=e.w/e.h*t.fullHeight)}),this.appearedDialog=!0},hideDialog:function(){this.appearedDialog=!1},enter:function(){var t=this;this.animateImage(this.$refs.thumb,this.$refs.full,this.$refs.cancleBtn,1),setTimeout(function(){t.loaded=!0,t.slotVisiable=!0},300)},leave:function(){var t=this;this.animateImage(this.$refs.full,this.$refs.thumb,this.$refs.cancleBtn,0),this.slotVisiable=!1,setTimeout(function(){t.loaded=!1},300)},onLoadFull:function(){this.loaded=!0},animateImage:function(t,e,i,n){var a=this,o=this.getBoundForDialog(t);this.setStart(o);var s=this.getBoundForDialog(i);this.$nextTick(function(){var t=a.getBoundForDialog(e);a.setDestination(o,{top:t.top,left:t.left,width:t.width||a.fullWidth,height:t.height||a.fullHeight},s,n)})},getBoundForDialog:function(t){var e=t.getBoundingClientRect(),i=this.$refs.dialog;return{top:e.top+i.scrollTop,left:e.left+i.scrollLeft,width:e.width,height:e.height}},setStart:function(t){var e=this.$refs.animate;e.style.left=t.left+"px",e.style.top=t.top+"px",e.style.width=t.width+"px",e.style.height=t.height+"px",e.style.transitionDuration="0s",e.style.transform=""},setDestination:function(t,e,i,n){var a=this.$refs.animate;a.style.transitionDuration="",1==n&&(e.width=e.width-i.width);var o="translate("+(e.left-t.left)+"px, "+(e.top-t.top)+"px)",s="scale("+e.width/t.width+", "+e.height/t.height+")";a.style.transform=o+" "+s}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2);i.d(e,"SearchBar",function(){return n.a})},function(t,e,i){"use strict";var n=i(3),a={install:function(t){t.component("search-bar",n.a)}};e.a=a},function(t,e,i){"use strict";function n(t){i(4)}var a=i(0),o=i(6),s=i(5),r=n,l=s(a.a,o.a,!1,r,"data-v-58932f48",null);e.a=l.exports},function(t,e){},function(t,e){t.exports=function(t,e,i,n,a,o){var s,r=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(s=t,r=t.default);var u="function"==typeof r?r.options:r;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),a&&(u._scopeId=a);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,f=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),f(t,e)}):u.beforeCreate=f?[].concat(f,c):[c]}return{esModule:s,exports:r,options:u}}},function(t,e,i){"use strict";var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"image-dialog"},[i("div",{staticClass:"image-dialog-trigger",class:1==t.loaded?"hidden":"",attrs:{type:"button"},on:{click:t.showDialog}},[i("div",{ref:"thumb",staticClass:"input-wrapper"},[t._m(0)])]),t._v(" "),i("transition",{attrs:{name:"dialog"},on:{enter:t.enter,leave:t.leave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.appearedDialog,expression:"appearedDialog"}],ref:"dialog",staticClass:"image-dialog-background"},[t._e(),t._v(" "),i("div",{ref:"animate",staticClass:"input-wrapper image-dialog-animate"},[i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("span",{staticClass:"palceholder"},[t._v("名称/单号/库房")])])]),t._v(" "),i("div",{ref:"full",staticClass:"input-wrapper image-dialog-full",on:{load:t.onLoadFull}},[i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.keyword,expression:"keyword"}],staticClass:"palceholder",attrs:{placeholder:"名称/单号/库房"},domProps:{value:t.keyword},on:{input:[function(e){e.target.composing||(t.keyword=e.target.value)},t.onInput]}}),t._v(" "),i("i",{staticClass:"iconfont icon-close1",on:{click:function(){t.keyword=""}}})]),t._v(" "),i("div",{ref:"cancleBtn",staticClass:"cancle-btn",on:{click:t.submitForm}},[t._v("\n "+t._s(t.keyword.length>0?"搜索":"取消")+"\n ")])]),t._v(" "),i("div",{staticClass:"slot-content",class:t.slotVisiable?"visible":""},[t._t("default")],2)])])],1)},a=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("span",{staticClass:"palceholder"},[t._v("名称/单号/库房")])])}],o={render:n,staticRenderFns:a};e.a=o}])});
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | vue-image-transform
7 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-image-transform",
3 | "version": "0.1.4",
4 | "author": "purestart <522382456@qq.com>",
5 | "description": "vue-image-transform image-transform image-deform vue conponent",
6 | "keywords": [
7 | "vue-image-transform",
8 | "image-transform",
9 | "imageTransform",
10 | "image-deform",
11 | "vue"
12 | ],
13 | "homepage": "https://github.com/purestart/vue-image-transform",
14 | "bugs": {
15 | "url": "https://github.com/purestart/vue-image-transform/issues"
16 | },
17 | "license": "MIT",
18 | "repository": {
19 | "type": "git",
20 | "url": "https://github.com/purestart/vue-image-transform.git"
21 | },
22 | "private": false,
23 | "main": "dist/vue-image-transform.min.js",
24 | "scripts": {
25 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
26 | "start": "npm run dev",
27 | "lint": "eslint --ext .js,.vue src",
28 | "build": "node build/build.js"
29 | },
30 | "dependencies": {
31 | "vue": "^2.5.2",
32 | "vue-router": "^3.0.1"
33 | },
34 | "devDependencies": {
35 | "autoprefixer": "^7.1.2",
36 | "babel-core": "^6.22.1",
37 | "babel-eslint": "^7.1.1",
38 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
39 | "babel-loader": "^7.1.1",
40 | "babel-plugin-syntax-dynamic-import": "^6.18.0",
41 | "babel-plugin-syntax-jsx": "^6.18.0",
42 | "babel-plugin-transform-runtime": "^6.22.0",
43 | "babel-plugin-transform-vue-jsx": "^3.5.0",
44 | "babel-preset-env": "^1.3.2",
45 | "babel-preset-stage-2": "^6.22.0",
46 | "chalk": "^2.0.1",
47 | "copy-webpack-plugin": "^4.0.1",
48 | "css-loader": "^0.28.0",
49 | "eslint": "^3.19.0",
50 | "eslint-config-standard": "^10.2.1",
51 | "eslint-friendly-formatter": "^3.0.0",
52 | "eslint-loader": "^1.7.1",
53 | "eslint-plugin-html": "^3.0.0",
54 | "eslint-plugin-import": "^2.7.0",
55 | "eslint-plugin-node": "^5.2.0",
56 | "eslint-plugin-promise": "^3.4.0",
57 | "eslint-plugin-standard": "^3.0.1",
58 | "extract-text-webpack-plugin": "^3.0.0",
59 | "file-loader": "^1.1.4",
60 | "friendly-errors-webpack-plugin": "^1.6.1",
61 | "html-webpack-plugin": "^2.30.1",
62 | "node-notifier": "^5.1.2",
63 | "node-sass": "^4.5.3",
64 | "optimize-css-assets-webpack-plugin": "^3.2.0",
65 | "ora": "^1.2.0",
66 | "portfinder": "^1.0.13",
67 | "postcss-import": "^11.0.0",
68 | "postcss-loader": "^2.0.8",
69 | "postcss-url": "^7.2.1",
70 | "rimraf": "^2.6.0",
71 | "sass-loader": "^6.0.6",
72 | "semver": "^5.3.0",
73 | "shelljs": "^0.7.6",
74 | "uglifyjs-webpack-plugin": "^1.1.1",
75 | "url-loader": "^0.5.8",
76 | "vue-loader": "^13.3.0",
77 | "vue-style-loader": "^3.0.1",
78 | "vue-template-compiler": "^2.5.2",
79 | "webpack": "^3.6.0",
80 | "webpack-bundle-analyzer": "^2.9.0",
81 | "webpack-dev-server": "^2.9.1",
82 | "webpack-merge": "^4.1.0"
83 | },
84 | "engines": {
85 | "node": ">= 6.0.0",
86 | "npm": ">= 3.0.0"
87 | },
88 | "browserslist": [
89 | "> 1%",
90 | "last 2 versions",
91 | "not ie <= 8"
92 | ]
93 | }
94 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
15 |
16 |
18 |
--------------------------------------------------------------------------------
/src/components/ImageTransform/ImageTransform.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
646 |
647 |
--------------------------------------------------------------------------------
/src/components/ImageTransform/PerspectiveTransform.min.js:
--------------------------------------------------------------------------------
1 | (function(a){a(function(){function b(e,f,c,d){this.element=e;this.style=e.style;this.computedStyle=window.getComputedStyle(e);this.width=f;this.height=c;this.useBackFacing=!!d;this.topLeft={x:0,y:0};this.topRight={x:f,y:0};this.bottomLeft={x:0,y:c};this.bottomRight={x:f,y:c}}b.useDPRFix=false;b.dpr=1;b.prototype=(function(){var d={stylePrefix:""};var f;var k;var c;var m=[[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0]];var i=[0,0,0,0,0,0,0,0];function n(){var o=document.createElement("div").style;d.stylePrefix="webkitTransform" in o?"webkit":"MozTransform" in o?"Moz":"msTransform" in o?"ms":"";f=d.stylePrefix+(d.stylePrefix.length>0?"Transform":"transform");c="-"+d.stylePrefix.toLowerCase()+"-transform-origin"}function h(){var p=this.topLeft.x-this.topRight.x;var o=this.topLeft.y-this.topRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.bottomLeft.x-this.bottomRight.x;o=this.bottomLeft.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topLeft.x-this.bottomLeft.x;o=this.topLeft.y-this.bottomLeft.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topRight.x-this.bottomRight.x;o=this.topRight.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topLeft.x-this.bottomRight.x;o=this.topLeft.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topRight.x-this.bottomLeft.x;o=this.topRight.y-this.bottomLeft.y;if(Math.sqrt(p*p+o*o)<=1){return true}return false}function j(q,p,o){return q.x*p.y+p.x*o.y+o.x*q.y-q.y*p.x-p.y*o.x-o.y*q.x}function l(){var p=j(this.topLeft,this.topRight,this.bottomRight);var o=j(this.bottomRight,this.bottomLeft,this.topLeft);if(this.useBackFacing){if(p*o<=0){return true}}else{if(p<=0||o<=0){return true}}var p=j(this.topRight,this.bottomRight,this.bottomLeft);var o=j(this.bottomLeft,this.topLeft,this.topRight);if(this.useBackFacing){if(p*o<=0){return true}}else{if(p<=0||o<=0){return true}}return false}function g(){if(h.apply(this)){return 1}if(l.apply(this)){return 2}return 0}function e(){var x=this.width;var v=this.height;var E=0;var D=0;var t=this.computedStyle.getPropertyValue(c);if(t.indexOf("px")>-1){t=t.split("px");E=-parseFloat(t[0]);D=-parseFloat(t[1])}else{if(t.indexOf("%")>-1){t=t.split("%");E=-parseFloat(t[0])*x/100;D=-parseFloat(t[1])*v/100}}var G=[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight];var q=[0,1,2,3,4,5,6,7];for(var B=0;B<4;B++){m[B][0]=m[B+4][3]=B&1?x+E:E;m[B][1]=m[B+4][4]=(B>1?v+D:D);m[B][6]=(B&1?-E-x:-E)*(G[B].x+E);m[B][7]=(B>1?-D-v:-D)*(G[B].x+E);m[B+4][6]=(B&1?-E-x:-E)*(G[B].y+D);m[B+4][7]=(B>1?-D-v:-D)*(G[B].y+D);i[B]=(G[B].x+E);i[B+4]=(G[B].y+D);m[B][2]=m[B+4][5]=1;m[B][3]=m[B][4]=m[B][5]=m[B+4][0]=m[B+4][1]=m[B+4][2]=0}var y,r;var u;var s=[];var B,A,z,F;for(var A=0;A<8;A++){for(var B=0;B<8;B++){s[B]=m[B][A]}for(B=0;B<8;B++){u=m[B];y=BMath.abs(s[w])){w=B}}if(w!=A){for(z=0;z<8;z++){F=m[w][z];m[w][z]=m[A][z];m[A][z]=F}F=q[w];q[w]=q[A];q[A]=F}if(m[A][A]!=0){for(B=A+1;B<8;B++){m[B][A]/=m[A][A]}}}for(B=0;B<8;B++){q[B]=i[q[B]]}for(z=0;z<8;z++){for(B=z+1;B<8;B++){q[B]-=q[z]*m[B][z]}}for(z=7;z>-1;z--){q[z]/=m[z][z];for(B=0;Bw&&(d=l,w=f),0==o[l]&&g++}if(!(g>1)){var M=2,m=5*M,x=this.p.ctxo,u=this.p.ctxt;if(u.clearRect(0,0,u.canvas.width,u.canvas.height),d%2==0)for(var _=this.create_canvas_context(v,m),I=_.canvas,q=0;q
2 |
3 |
4 |
![]()
{}" :src="url" alt="">
5 |
6 |
7 |
8 |
26 |
27 |
--------------------------------------------------------------------------------
/src/examples/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
52 |
53 |
92 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App';
3 | import router from './router';
4 |
5 | import {ImageTransform} from '@/components';
6 | // import '../dist/vue-search-bar.min.css';
7 |
8 |
9 | Vue.use(ImageTransform);
10 |
11 | Vue.config.productionTip = false;
12 |
13 | /* eslint-disable no-new */
14 | new Vue({
15 | el: '#app',
16 | router,
17 | template: '',
18 | components: { App }
19 | });
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Router from 'vue-router';
3 | const Index = () => import('@/examples/index.vue');
4 |
5 |
6 | Vue.use(Router);
7 |
8 | export default new Router({
9 | routes: [
10 | {
11 | path: '/',
12 | name: 'index',
13 | component: Index
14 | }
15 | ]
16 | });
17 |
--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/.gitkeep
--------------------------------------------------------------------------------
/static/font_demo/demo.css:
--------------------------------------------------------------------------------
1 | *{margin: 0;padding: 0;list-style: none;}
2 | /*
3 | KISSY CSS Reset
4 | 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
5 | 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
7 | 特色:1. 适应中文;2. 基于最新主流浏览器。
8 | 维护:玉伯, 正淳
9 | */
10 |
11 | /** 清除内外边距 **/
12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
14 | pre, /* text formatting elements 文本格式元素 */
15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
16 | th, td /* table elements 表格元素 */ {
17 | margin: 0;
18 | padding: 0;
19 | }
20 |
21 | /** 设置默认字体 **/
22 | body,
23 | button, input, select, textarea /* for ie */ {
24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
25 | }
26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
30 |
31 | /** 重置列表元素 **/
32 | ul, ol { list-style: none; }
33 |
34 | /** 重置文本格式元素 **/
35 | a { text-decoration: none; }
36 | a:hover { text-decoration: underline; }
37 |
38 |
39 | /** 重置表单元素 **/
40 | legend { color: #000; } /* for ie6 */
41 | fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
43 | /* 注:optgroup 无法扶正 */
44 |
45 | /** 重置表格元素 **/
46 | table { border-collapse: collapse; border-spacing: 0; }
47 |
48 | /* 清除浮动 */
49 | .ks-clear:after, .clear:after {
50 | content: '\20';
51 | display: block;
52 | height: 0;
53 | clear: both;
54 | }
55 | .ks-clear, .clear {
56 | *zoom: 1;
57 | }
58 |
59 | .main {
60 | padding: 30px 100px;
61 | width: 960px;
62 | margin: 0 auto;
63 | }
64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
65 |
66 | .helps{margin-top:40px;}
67 | .helps pre{
68 | padding:20px;
69 | margin:10px 0;
70 | border:solid 1px #e7e1cd;
71 | background-color: #fffdef;
72 | overflow: auto;
73 | }
74 |
75 | .icon_lists{
76 | width: 100% !important;
77 |
78 | }
79 |
80 | .icon_lists li{
81 | float:left;
82 | width: 100px;
83 | height:180px;
84 | text-align: center;
85 | list-style: none !important;
86 | }
87 | .icon_lists .icon{
88 | font-size: 42px;
89 | line-height: 100px;
90 | margin: 10px 0;
91 | color:#333;
92 | -webkit-transition: font-size 0.25s ease-out 0s;
93 | -moz-transition: font-size 0.25s ease-out 0s;
94 | transition: font-size 0.25s ease-out 0s;
95 |
96 | }
97 | .icon_lists .icon:hover{
98 | font-size: 100px;
99 | }
100 |
101 |
102 |
103 | .markdown {
104 | color: #666;
105 | font-size: 14px;
106 | line-height: 1.8;
107 | }
108 |
109 | .highlight {
110 | line-height: 1.5;
111 | }
112 |
113 | .markdown img {
114 | vertical-align: middle;
115 | max-width: 100%;
116 | }
117 |
118 | .markdown h1 {
119 | color: #404040;
120 | font-weight: 500;
121 | line-height: 40px;
122 | margin-bottom: 24px;
123 | }
124 |
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 | color: #404040;
131 | margin: 1.6em 0 0.6em 0;
132 | font-weight: 500;
133 | clear: both;
134 | }
135 |
136 | .markdown h1 {
137 | font-size: 28px;
138 | }
139 |
140 | .markdown h2 {
141 | font-size: 22px;
142 | }
143 |
144 | .markdown h3 {
145 | font-size: 16px;
146 | }
147 |
148 | .markdown h4 {
149 | font-size: 14px;
150 | }
151 |
152 | .markdown h5 {
153 | font-size: 12px;
154 | }
155 |
156 | .markdown h6 {
157 | font-size: 12px;
158 | }
159 |
160 | .markdown hr {
161 | height: 1px;
162 | border: 0;
163 | background: #e9e9e9;
164 | margin: 16px 0;
165 | clear: both;
166 | }
167 |
168 | .markdown p,
169 | .markdown pre {
170 | margin: 1em 0;
171 | }
172 |
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 | width: 80%;
179 | }
180 |
181 | .markdown ul > li {
182 | list-style: circle;
183 | }
184 |
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 | margin-left: 20px;
188 | padding-left: 4px;
189 | }
190 |
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 | margin: 0.6em 0;
194 | }
195 |
196 | .markdown ol > li {
197 | list-style: decimal;
198 | }
199 |
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 | margin-left: 20px;
203 | padding-left: 4px;
204 | }
205 |
206 | .markdown code {
207 | margin: 0 3px;
208 | padding: 0 5px;
209 | background: #eee;
210 | border-radius: 3px;
211 | }
212 |
213 | .markdown pre {
214 | border-radius: 6px;
215 | background: #f7f7f7;
216 | padding: 20px;
217 | }
218 |
219 | .markdown pre code {
220 | border: none;
221 | background: #f7f7f7;
222 | margin: 0;
223 | }
224 |
225 | .markdown strong,
226 | .markdown b {
227 | font-weight: 600;
228 | }
229 |
230 | .markdown > table {
231 | border-collapse: collapse;
232 | border-spacing: 0px;
233 | empty-cells: show;
234 | border: 1px solid #e9e9e9;
235 | width: 95%;
236 | margin-bottom: 24px;
237 | }
238 |
239 | .markdown > table th {
240 | white-space: nowrap;
241 | color: #333;
242 | font-weight: 600;
243 |
244 | }
245 |
246 | .markdown > table th,
247 | .markdown > table td {
248 | border: 1px solid #e9e9e9;
249 | padding: 8px 16px;
250 | text-align: left;
251 | }
252 |
253 | .markdown > table th {
254 | background: #F7F7F7;
255 | }
256 |
257 | .markdown blockquote {
258 | font-size: 90%;
259 | color: #999;
260 | border-left: 4px solid #e9e9e9;
261 | padding-left: 0.8em;
262 | margin: 1em 0;
263 | font-style: italic;
264 | }
265 |
266 | .markdown blockquote p {
267 | margin: 0;
268 | }
269 |
270 | .markdown .anchor {
271 | opacity: 0;
272 | transition: opacity 0.3s ease;
273 | margin-left: 8px;
274 | }
275 |
276 | .markdown .waiting {
277 | color: #ccc;
278 | }
279 |
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 | opacity: 1;
287 | display: inline-block;
288 | }
289 |
290 | .markdown > br,
291 | .markdown > p > br {
292 | clear: both;
293 | }
294 |
295 |
296 | .hljs {
297 | display: block;
298 | background: white;
299 | padding: 0.5em;
300 | color: #333333;
301 | overflow-x: auto;
302 | }
303 |
304 | .hljs-comment,
305 | .hljs-meta {
306 | color: #969896;
307 | }
308 |
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 | color: #df5000;
316 | }
317 |
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 | color: #a71d5d;
322 | }
323 |
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 | color: #0086b3;
329 | }
330 |
331 | .hljs-section,
332 | .hljs-name {
333 | color: #63a35c;
334 | }
335 |
336 | .hljs-tag {
337 | color: #333333;
338 | }
339 |
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 | color: #795da3;
347 | }
348 |
349 | .hljs-addition {
350 | color: #55a532;
351 | background-color: #eaffea;
352 | }
353 |
354 | .hljs-deletion {
355 | color: #bd2c00;
356 | background-color: #ffecec;
357 | }
358 |
359 | .hljs-link {
360 | text-decoration: underline;
361 | }
362 |
363 | pre{
364 | background: #fff;
365 | }
366 |
367 |
368 |
369 |
370 |
371 |
--------------------------------------------------------------------------------
/static/font_demo/demo_fontclass.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | IconFont
7 |
8 |
9 |
10 |
11 |
12 |
IconFont 图标
13 |
202 |
203 |
font-class引用
204 |
205 |
206 |
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
207 |
与unicode使用方式相比,具有如下特点:
208 |
209 | - 兼容性良好,支持ie8+,及所有现代浏览器。
210 | - 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
211 | - 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
212 | - 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
213 |
214 |
使用步骤如下:
215 |
第一步:引入项目下面生成的fontclass代码:
216 |
217 |
218 |
219 |
第二步:挑选相应图标并获取类名,应用于页面:
220 |
<i class="iconfont icon-xxx"></i>
221 |
222 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
223 |
224 |
225 |
226 |
227 |
--------------------------------------------------------------------------------
/static/font_demo/demo_symbol.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | IconFont
7 |
8 |
9 |
10 |
24 |
25 |
26 |
27 |
IconFont 图标
28 |
279 |
280 |
281 |
symbol引用
282 |
283 |
284 |
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
285 | 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
286 |
287 | - 支持多色图标了,不再受单色限制。
288 | - 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。
289 | - 兼容性较差,支持 ie9+,及现代浏览器。
290 | - 浏览器渲染svg的性能一般,还不如png。
291 |
292 |
使用步骤如下:
293 |
第一步:引入项目下面生成的symbol代码:
294 |
295 |
第二步:加入通用css代码(引入一次就行):
296 |
<style type="text/css">
297 | .icon {
298 | width: 1em; height: 1em;
299 | vertical-align: -0.15em;
300 | fill: currentColor;
301 | overflow: hidden;
302 | }
303 | </style>
304 |
第三步:挑选相应图标并获取类名,应用于页面:
305 |
<svg class="icon" aria-hidden="true">
306 | <use xlink:href="#icon-xxx"></use>
307 | </svg>
308 |
309 |
310 |
311 |
312 |
--------------------------------------------------------------------------------
/static/font_demo/demo_unicode.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | IconFont
7 |
8 |
9 |
29 |
30 |
31 |
32 |
IconFont 图标
33 |
34 |
35 | -
36 |
37 |
all
38 | 
39 |
40 |
41 | -
42 |
43 |
back
44 | 
45 |
46 |
47 | -
48 |
49 |
close
50 | 
51 |
52 |
53 | -
54 |
55 |
delete
56 | 
57 |
58 |
59 | -
60 |
61 |
help
62 | 
63 |
64 |
65 | -
66 |
67 |
more_unfold
68 | 
69 |
70 |
71 | -
72 |
73 |
pic
74 | 
75 |
76 |
77 | -
78 |
79 |
search
80 | 
81 |
82 |
83 | -
84 |
85 |
set
86 | 
87 |
88 |
89 | -
90 |
91 |
Smile
92 | 
93 |
94 |
95 | -
96 |
97 |
ViewGallery
98 | 
99 |
100 |
101 | -
102 |
103 |
Viewlist
104 | 
105 |
106 |
107 | -
108 |
109 |
close
110 | 
111 |
112 |
113 | -
114 |
115 |
subtract
116 | 
117 |
118 |
119 | -
120 |
121 |
personal-center
122 | 
123 |
124 |
125 | -
126 |
127 |
download
128 | 
129 |
130 |
131 | -
132 |
133 |
map
134 | 
135 |
136 |
137 | -
138 |
139 |
bad
140 | 
141 |
142 |
143 | -
144 |
145 |
good
146 | 
147 |
148 |
149 | -
150 |
151 |
音乐_music217
152 | 
153 |
154 |
155 | -
156 |
157 |
home
158 | 
159 |
160 |
161 | -
162 |
163 |
search
164 | 
165 |
166 |
167 | -
168 |
169 |
音乐_music216
170 | 
171 |
172 |
173 | -
174 |
175 |
right
176 | 
177 |
178 |
179 | -
180 |
181 |
hot
182 | 
183 |
184 |
185 | -
186 |
187 |
add
188 | 
189 |
190 |
191 | -
192 |
193 |
speaker-6
194 | 
195 |
196 |
197 | -
198 |
199 |
speaker-5
200 | 
201 |
202 |
203 | -
204 |
205 |
security
206 | 
207 |
208 |
209 | -
210 |
211 |
Security
212 | 
213 |
214 |
215 | -
216 |
217 |
scan
218 | 
219 |
220 |
221 |
222 |
unicode引用
223 |
224 |
225 |
unicode是字体在网页端最原始的应用方式,特点是:
226 |
227 | - 兼容性最好,支持ie6+,及所有现代浏览器。
228 | - 支持按字体的方式去动态调整图标大小,颜色等等。
229 | - 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
230 |
231 |
232 | 注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
233 |
234 |
unicode使用步骤如下:
235 |
第一步:拷贝项目下面生成的font-face
236 |
@font-face {
237 | font-family: 'iconfont';
238 | src: url('iconfont.eot');
239 | src: url('iconfont.eot?#iefix') format('embedded-opentype'),
240 | url('iconfont.woff') format('woff'),
241 | url('iconfont.ttf') format('truetype'),
242 | url('iconfont.svg#iconfont') format('svg');
243 | }
244 |
245 |
第二步:定义使用iconfont的样式
246 |
.iconfont{
247 | font-family:"iconfont" !important;
248 | font-size:16px;font-style:normal;
249 | -webkit-font-smoothing: antialiased;
250 | -webkit-text-stroke-width: 0.2px;
251 | -moz-osx-font-smoothing: grayscale;
252 | }
253 |
254 |
第三步:挑选相应图标并获取字体编码,应用于页面
255 |
<i class="iconfont">3</i>
256 |
257 |
258 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
259 |
260 |
261 |
262 |
263 |
264 |
265 |
--------------------------------------------------------------------------------
/static/font_demo/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "iconfont";
3 | src: url('iconfont.eot?t=1535082662696'); /* IE9*/
4 | src: url('iconfont.eot?t=1535082662696#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
6 | url('iconfont.ttf?t=1535082662696') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('iconfont.svg?t=1535082662696#iconfont') format('svg'); /* iOS 4.1- */
8 | }
9 |
10 | .iconfont {
11 | font-family:"iconfont" !important;
12 | font-size:16px;
13 | font-style:normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-all:before { content: "\e696"; }
19 |
20 | .icon-back:before { content: "\e697"; }
21 |
22 | .icon-close1:before { content: "\e69a"; }
23 |
24 | .icon-delete:before { content: "\e69d"; }
25 |
26 | .icon-help:before { content: "\e6a3"; }
27 |
28 | .icon-moreunfold:before { content: "\e6a6"; }
29 |
30 | .icon-pic:before { content: "\e6a8"; }
31 |
32 | .icon-search:before { content: "\e6ac"; }
33 |
34 | .icon-set:before { content: "\e6ae"; }
35 |
36 | .icon-smile:before { content: "\e6af"; }
37 |
38 | .icon-viewgallery:before { content: "\e6b4"; }
39 |
40 | .icon-viewlist:before { content: "\e6b5"; }
41 |
42 | .icon-close:before { content: "\e619"; }
43 |
44 | .icon-subtract:before { content: "\e6fe"; }
45 |
46 | .icon-gerenzhongxin:before { content: "\e70b"; }
47 |
48 | .icon-icondownload:before { content: "\e714"; }
49 |
50 | .icon-map:before { content: "\e715"; }
51 |
52 | .icon-bad:before { content: "\e716"; }
53 |
54 | .icon-good:before { content: "\e717"; }
55 |
56 | .icon-yinlemusic217:before { content: "\e713"; }
57 |
58 | .icon-home:before { content: "\e60b"; }
59 |
60 | .icon-search1187938easyiconnet:before { content: "\e61d"; }
61 |
62 | .icon-yinlemusic216:before { content: "\e71e"; }
63 |
64 | .icon-right:before { content: "\e6c7"; }
65 |
66 | .icon-hot:before { content: "\e756"; }
67 |
68 | .icon-add:before { content: "\e63c"; }
69 |
70 | .icon-speaker-6:before { content: "\e66f"; }
71 |
72 | .icon-speaker-5:before { content: "\e670"; }
73 |
74 | .icon-yanzhengma:before { content: "\e682"; }
75 |
76 | .icon-Security:before { content: "\e630"; }
77 |
78 | .icon-icon-test:before { content: "\e62b"; }
79 |
80 |
--------------------------------------------------------------------------------
/static/font_demo/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.eot
--------------------------------------------------------------------------------
/static/font_demo/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.ttf
--------------------------------------------------------------------------------
/static/font_demo/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.woff
--------------------------------------------------------------------------------
/static/image/sofa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/image/sofa.png
--------------------------------------------------------------------------------
/static/image/sticker1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/image/sticker1.png
--------------------------------------------------------------------------------