vue + vant 上传图片前加水印、压缩图片大小
没有废话直接上代码
另外使用了 image-conversion
来压缩图片
<template>
<div class="page">
<div>
<van-uploader
:accept="'image/*'"
:before-read="beforeRead"
:after-read="onUpload"
>
<!-- <van-button type="primary">主要按钮</van-button> -->
</van-uploader>
</div>
<img :src="imgUrl" alt="" style="width: 100%">
</div>
</template>
<script>
import { compressAccurately } from 'image-conversion'
export default {
data () {
return {
imgUrl: ''
}
},
methods: {
beforeRead (file) {
return new Promise((resolve) => {
const fileName = file.name
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.getImgUrl({
url: reader.result,
cb: (base64) => {
this.imgUrl = base64
const file = this.base64ToFile(base64, fileName)
compressAccurately(file, 500).then(res => {
resolve(res)
}).catch(() => {
this.$toast('上传图片失败')
})
}
})
}
})
},
onUpload (file) {
console.log('upload', file)
},
base64ToFile (urlData, fileName) {
const arr = urlData.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bytes = atob(arr[1]) // 解码base64
let n = bytes.length
const ia = new Uint8Array(n)
while (n--) {
ia[n] = bytes.charCodeAt(n)
}
return new File([ia], fileName, { type: mime })
},
getImgUrl ({
url = '',
textAlign = 'center',
textBaseline = 'center',
fillStyle = 'rgba(238, 10, 36, 0.5)',
content = '我是水印哈哈哈',
font = '40px Arial',
cb = null,
textX = 100,
textY = 70
}) {
const img = new Image()
img.src = url
img.crossOrigin = 'anonymous'
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
ctx.textAlign = textAlign
ctx.textBaseline = textBaseline
ctx.font = font
ctx.fillStyle = fillStyle
ctx.translate((img.width + textX) / 2, (img.height + textY) / 2)
ctx.rotate((Math.PI / 180) * -30)
ctx.translate(-(img.width + textX) / 2, -(img.height + textY) / 2)
// 单独绘制水印
ctx.fillText(content, img.width / 2, img.height / 2)
// 循环绘制水印
// for (let i = 0; i < img.height / 120; i++) {
// for (let j = 0; j < img.width / 30; j++) {
// ctx.fillText(content, i * 200, j * 100, img.width)
// }
// }
// 将绘制完成的canvas转换为base64的地址
const base64Url = canvas.toDataURL()
// return base64Url
cb && cb(base64Url)
}
}
}
}
</script>
参考链接
1、设置图片中心点旋转
https://blog.csdn.net/u014520...
2、图片转base64
https://blog.csdn.net/qq_2513...
3、vue项目中图片显示前端使用js添加水印
https://blog.csdn.net/weixin_...
4、vue项目中base64转file
https://blog.csdn.net/danby2/...
推荐阅读
从script标签引入AES.js进行加密
{代码...}
原谅我一生不羁放歌搞文艺阅读 434
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...
乌柏木赞 150阅读 12.3k评论 10
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...
寒青赞 56阅读 7.9k评论 11
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 46阅读 6k评论 12
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 66阅读 6.2k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.3k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 44阅读 7.4k评论 6
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。