使用img src Base64 实现图片的传输和预览

大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。

  Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
  在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件b
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue 3.0中实现base64图片预览放大缩小,可以使用VueCropper组件。以下是实现步骤: 1. 安装VueCropper组件库:在终端中运行以下命令进行安装:npm install vue-cropper 2. 引入VueCropper组件库:在需要使用的Vue组件中,使用import语句引入VueCropper组件库。 3. 在Vue组件中使用VueCropper组件:在Vue组件的template中,使用VueCropper组件的标签,并设置相关属性,如:src、outputType、canMove、autoCrop等。 4. 定义props参:在Vue组件的script中,定义props参,如:src、outputType、canMove、autoCrop等。 5. 编写核心方法:在Vue组件的script中,编写核心方法,如:onCrop、onZoom、onRotate等。 6. 在Vue组件中使用TipsDialog组件:在Vue组件的template中,使用TipsDialog组件的标签,并设置相关属性,如:title、content、visible等。 以下是一个简单的示例代码: ``` <template> <div> <vue-cropper ref="cropper" :src="imgSrc" :output-type="'jpeg'" :can-move="true" :auto-crop="true" @crop="onCrop" @zoom="onZoom" @rotate="onRotate" ></vue-cropper> <tips-dialog :title="'Tips'" :content="'Please crop the image.'" :visible="showTipsDialog" ></tips-dialog> </div> </template> <script> import { VueCropper } from 'vue-cropper' import TipsDialog from './TipsDialog.vue' export default { components: { VueCropper, TipsDialog }, props: { imgSrc: { type: String, required: true } }, data() { return { showTipsDialog: true } }, methods: { onCrop() { // 处理裁剪后的图片 }, onZoom() { // 处理缩放后的图片 }, onRotate() { // 处理旋转后的图片 } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值