更新记录

1.0.1.20200323（2020-03-23）

• F 修复 H5端裁剪大图程序易崩溃问题, 1) 裁剪前压缩图片；2) H5端用canvas.toBlob代替uni.canvasToTempFilePath

平台兼容性

simple-crop-uni

关于SimpleCrop

前言

这个组件来自newbieYoung/Simple-Crop, 此为改写的uni appH5端版本，借鉴自原组件的微信小程序版本。

使用

请见本项目示例。

props

events

裁剪前压缩图片，可自行选择是否需要该压缩，不包含在组件代码内，压缩函数位于utils/file.js: compressImage

params: Object

返回：压缩后的图片路径

当前存在问题

• 刻度盘初始位置显示错误（scroll-view未按scroll-left设定滚动至目标位置）

关系讲解图

关于uni的canvas组件H5端需要注意的

uni对于canvas在H5端的实现，做了大小重置，浏览器审查元素可以发现，设置的canvas style, 将应用在其外部的uni-canvas, 而内部实际的canvas的width, height，其数值为所设置大小的SystemInfo.pixelRatio倍，若未设置，则为默认的300px, 150px的SystemInfo.pixelRatio倍。因此，需要注意以下几点：

• 动态设置canvas的大小，应通过其style来实现，而不要直接获取canvasEle，用canvasEle.width/height设置
• canvas动态改变大小后，需延迟绘图，否则绘图内容可能不显示或一闪而过
• 绘制时，尺寸计算以设置的style为准
• a)ctx = uni.createCanvasContext() b)ctx = canvasEle.getContext('2d'),
  • a和b所得到的ctx，其所拥有的方法略有差异，前者有ctx.draw(), 后者则无此方法，具体以uni文档及H5canvas方法为准
  • drawImage()方法，其image参数定义，前者为imagePath, 后者则为Image对象，此为微信小程序与H5 canvas的差异
  • 前者在onReady中绘图，也需延迟并调用ctx.draw(); 在onLoad中绘图无效；其他时候绘图均需调用ctx.draw()
• uni.canvasToTempFilePath()得到的image的大小，为设置大小的SystemInfo.pixelRatio倍

相关链接：

• uni 如何获取canvas并动态设置其宽高
• 【报Bug】【紧急非常严重】canvas h5下绘制空白,一闪而过

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn run lint

默认创建的uni项目中没有带eslint, 因此需自行加入。

请阅读vue-cli文档指南：插件和Preset-插件-在现有的项目中安装插件。对于babel, eslint, vue-router, vuex这些组件，使用vue add来安装，vue-cli同时可能加入一些初始化代码，更改现有文件。

对于eslint，推荐使用此方式安装，可省略配置工作。安装完成后，命令行会提示选择eslint config，可选：Error prevention only | Airbnb | Standard | Prettier，以及lint features: Lint on save, Lint and fix on commit，此项目配置了Standard + Lint on save, Lint and fix on commit.

Customize configuration

See Configuration Reference.