JS实现 带有话题的文本编辑 + 图片编辑(下)
标签：ase dash date() raw spl gad file change 文本编辑
本篇主要讲述九宫格上传图片
图片编辑实现效果:
图片编辑实现原理:
- 实现九宫格编辑图片可以做成一个组件,使用原生的图片上传方式通过 input 标签上传图片
- 一般图片都挺大,避免用户等待时间过长,使用 canvas 将上传的图片进行压缩
- 每次成功上传一张图片 && 图片总量
- 由于上传图片的接口需要formData 格式的文件,就需要将压缩后的base64格式的图片 通过dataURLtoBlob blobToFile 这两个函数转换成file文件,此方法不存在浏览器不兼容问题
子组件封装:
if="!info.imgUrl">
img
src="//nkb-yunpan.oss-cn-beijing.aliyuncs.com/d6de603efa86935328b439f276339c2b.png"
alt
@click.self.prevent="addImgEvent"
class="img1"
/>
input
class="file"
type="file"
id="add_input2"
accept="image/*"
ref="avatarInput"
@change="changeImage($event)"
/>
if="info.imgUrl">
img
src="https://nkb-yunpan.oss-cn-beijing.aliyuncs.com/1595a0b56803644173f839f27655754b.png"
alt
class="close"
@click.self.prevent="closeEvent(index)"
/>
View Code
父组件调用:
addImgComponent
v-for="(item,index) in imgList"
:key="index"
:info.sync="item"
@imgDel="imgDel"
@imgAdd="imgAdd"
@loadingEvent="loadingEvent"
:index="index"
:isLoading="isLoading"
>
if="isLoading">
View Code
分享一刻:
浏览器禁用三方 Cookie 的分析
Safari 浏览器开始完全禁用第三方 Cookie，本文分析了有何影响，以及如何在没有 Cookie 的情况下，获取浏览器的指纹。
JS实现 带有话题的文本编辑 + 图片编辑(下)
标签：ase dash date() raw spl gad file change 文本编辑
原文地址：https://www.cnblogs.com/huangaiya/p/12910304.html
评论