上传图片 vue,vue发布的视频怎么去水印
这篇文章主要为大家详细介绍了某视频剪辑软件实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件项目实现上传图片添加水印升级版，供大家参考，具体内容如下
封装水印方法
/**
* 添加水印
* @param {blob}文件
* @param {string} el
* @returns {Promise}
*/
导出异步函数addWaterMarker(file，el=#markImg) {
返回新承诺（异步（解决，拒绝)={
尝试{
//先压缩和旋转图片
文件=等待压缩器（文件)
//将文件一滴转换成图片
让img=await blobToImg(文件)
//创建帆布画布
让画布=文档。createelement(“画布”)
画布宽度=img.naturalWidth宽度
画布。身高=img。自然高度
let ctx=canvas.getContext(2d )
//填充上传的图片
ctx.drawImage(img，0，0，canvas.width，canvas.height)
//生成水印图片
const markEle=document。查询选择器
const markWidth=markele。客户宽度
常量刻度=画布。宽度* 0.25/标记宽度
//先缩放水印再转成图片
马克尔。风格。transform= scale($ { scale })
const markImg=await htmlToCanvas(markEle)
//填充水印
ctx.drawImage(markImg，canvas。width-markImg.width-15 *比例，画布。height-markImg.height-15 *刻度，markImg。宽度，标记。高度)
//将帆布转换成一滴
画布。to blob(blob=resolve(blob))
} catch(错误){
拒绝（错误)
}
})
}
函数blobToImg(blob) {
返回新承诺((解决，拒绝)={
let reader=new FileReader()
reader.addEventListener(load ，()={
让img=新图像()
img.src=reader。结果
img.addEventListener(load ，()=resolve(img))
})
reader.readAsDataURL(blob)
})
}
导出函数htmlToCanvas(el，backgroundColor=rgba(0，0，0，1)) {
返回新承诺（异步（解决，拒绝)={
尝试{
const markImg=await html 2 can vas(El，{
比例：2,//此处不使用默认值window.devicePixelRatio，需跟移动端保持一致
allowTaint: false，//允许污染
没错，
backgroundColor //透明//背景色
})
解决（标记)
} catch(错误){
拒绝（错误)
}
})
}
/**
* 压缩和旋转图片
* @param {blob}文件
* @param {number}质量压缩比例
* @param {number} maxWidth
* @returns {Promise}
*/
导出函数压缩器（文件，质量=0.6,最大宽度=750) {
返回新承诺(resolve={
新压缩程序（文件，{
最大宽度，
质量，
成功：决心，
错误(呃){
console.log(错误消息)
}
})
})
}
页面中使用水印并压缩图片
模板
差异
埃尔-上传
操作=
:headers=uploadProps.headers
list-type=图片卡
:show-file-list=false
:http-request=fnUploadRequest
:on-success=handleSuccess
：上传前=handleUpload
接受=。png，100 .jpg，1000 .jpeg，1000 .gif，网页
div class=弹性中心
插槽/插槽
/div
/El-上传
！-图片上传水印-
div id=markImg
div class=logo
img src= @/assets/img/icon-logo。巴布亚新几内亚/
文本文本
/div
p
{{ parseTime(fileDate， {y}-{m}-{d} {h}:{i}:{s}) }}周{{
parseTime(fileDate， {a} )
}}
/p
p{{ executor }}/p
/div
/div
/模板
脚本
导入{
getAccessToken，
getRefreshToken，
getAccessTokenTTL
}来自@/utils/auth
从" @/utils/OS映像"导入{ uploadOSS }
从" @/实用工具"导入{ parseTime，compressor，addWaterMarker }
导出默认值{
名称："索引",
道具：{
需要水印：{
类型：布尔型，
默认值：错误
},
执行者：{
类型：字符串，
默认值：""
}
},
data() {
返回{
文件日期：新日期()
}
},
已创建(){
this.parseTime=parseTime
},
计算值：{
userAccountID() {
归还这个100美元商店。状态。用户。用户帐户id
},
uploadProps() {
返回{
//操作：` $ { process。环境。vue _ APP _ BASE _ API }/API/image/upload `，
标题：{
//接口可能要带令牌： ,
授权：getAccessToken()
},
数据：{}
}
}
},
方法：{
//beforeUpload_u(file，fileList){
////console.log(文件，文件列表)；
//var testmsg=file。姓名。子串(文件。姓名。lastindexof( . ) 1)
//const extension=testmsg=== png testmsg=== jpg testmsg=== JPEG testmsg=== gif testmsg=== webp
//const被限制为10m=file。尺寸/1024/1024 10
//var bool=false；
//如果(扩展名为限制10M){
//bool=true；
//}其他{
//bool=false；
//}
//如果(!扩展){
//这个message.error(请上传图片格式文件!);
//返回弯曲件
//}
//如果(!isLimit10M) {
//这个message.error(上传失败，不能超过10米！");
//返回弯曲件
//}
//返回弯曲件
//},
//handleSuccess(res) {
//控制台。日志(分辨率)；
//if (res.code==0) {
//这个. emit(imgData ，RES . item)；
//这个message.success(上传图片成功!);
//}其他{
//这个message.error(上传图片失败!);
//}
//},
//handleError(err){
//这个message.error(上传图片失败!);
//},
//上传图片判断
handleUpload(文件，文件列表){
var testmsg=file。姓名。子串(文件。姓名。lastindexof( . ) 1)
常量扩展=
testmsg。tolowercase()=== png
testmsg。tolowercase()=== jpg
testmsg。tolowercase()=== JPEG
testmsg。tolowercase()=== gif
testmsg.toLowerCase()===webp
const被限制为10m=file。尺寸/1024/1024 10
var bool=false
如果(扩展名为10米){
bool=true
}否则{
bool=false
}
如果(!扩展){
这个message.error(请上传图片格式文件!)
返回布尔值
}
如果(!isLimit10M) {
这个message.error(上传失败，不能超过10米！")
返回布尔值
}
返回布尔值
},
//上传图片
异步fnUploadRequest(选项){
尝试{
let file=options.file //拿到文件
这个。filedate=文件。上次修改日期
//压缩图片
如果(文件。大小为512 * 1024的文件。类型。包括( image/){
文件=等待压缩器（文件)
}
//添加水印
如果(this.needWaterMark) {
常量文件名=文件名
file=await addWaterMarker(file， #markImg )
文件名=文件名
}
让RES=等待上传OSS(文件)
//返回的就是图片地址
这个emit(imgData ，res)
这个message.success(上传图片成功!)
} catch (e) {
console.log(e)
这个message.error(上传图片失败！请重新上传)
}
},
//图片上传成功回调
handleSuccess(res) {
//控制台。日志(分辨率)；
if (res) {
这个emit(imgData ，res)
}
}
}
}
/脚本
样式lang=scss 范围
*深v型100 . El-上传，
*深v型100 . El-上传-图片-卡片{
//宽度：120像素
高度：24px
高度：0;
边框：无；
行高：0;
显示：块；
背景：# f5f 6 FB
}
//*五深100 . El-上传{
//宽度：50px
//}。img-cont {
宽度：50px
高度：24px
背景：# f5f 6 FB。img-icon {
颜色：# ccc
}。img-text {
字体大小：12px
高度：24px
颜色：# 000;
}
}
#标记{
位置：绝对；
左：-9999999 px；
文本对齐：右对齐；
填充：10px 15px。徽标{
字体粗细：600;
字号：15px
颜色：# ffffff
显示器：flex
身高：21px
对齐-项目：居中；
justify-content:flex-end；
img {
身高：21px
右边距：5px
}
}
p {
边距-顶部：6px
颜色：# ffffff
字体大小：12px
字体粗细：400;
}
}
/风格
水印方法更新版
/**
* 压缩和旋转图片
* @param {blob}文件
* @param {number}质量压缩比例
* @param {number} maxWidth
* @returns {Promise}
*/
导出函数压缩器（文件，绘制，最大宽度=750,质量=0.6) {
返回新承诺(resolve={
新压缩程序（文件，{
严格：假的，
最大宽度，
质量，
德鲁，
成功：决心，
错误(呃){
console.log(错误消息)
}
})
})
}
/**
* 添加水印
* @param {blob}文件
* @param {string} el
* @returns {Promise}
*/
导出异步函数addWaterMarker(file，el=#brandMarkImg ，direction=rightDown) {
返回新承诺（异步（解决，拒绝)={
尝试{
const maxWidth=750
const img=await blobToImg(file)
恒定图像宽度=图像。自然宽度maxWidth？maxWidth : img.naturalWidth
//生成水印图片
const markEle=document。查询选择器
常量刻度=图像宽度* 0.25/标记。客户宽度
//先缩放水印再转成图片
马克尔。风格。transform= scale($ { scale })
const markImg=await htmlToCanvas(markEle)
//先压缩和旋转图片
file=await compressor(文件，(上下文，画布)={
if(direction==rightDown){
//填充水印右下角
context.drawImage(markImg，canvas。width-markImg.width-15 *比例，画布。height-markImg.height-15 *刻度，markImg。宽度，标记。高度)
}否则{
//填充水印左下角
context.drawImage(markImg，15 *比例尺，画布。height-markImg.height-15 *刻度，markImg.width，markImg。高度)
}
}，maxWidth)
解决（文件)
} catch(错误){
拒绝（错误)
}
})
}
函数blobToImg(blob) {
返回新承诺((解决，拒绝)={
let reader=new FileReader()
reader.addEventListener(load ，()={
让img=新图像()
img.src=reader。结果
img.addEventListener(load ，()=resolve(img))
})
reader.readAsDataURL(blob)
})
}
导出函数htmlToCanvas(el，backgroundColor=rgba(0，0，0，1)) {
返回新承诺（异步（解决，拒绝)={
尝试{
const markImg=await html 2 can vas(El，{
比例尺：2,
allowTaint: false，//允许污染
没错，
backgroundColor //透明//背景色
})
解决（标记)
} catch(错误){
拒绝（错误)
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。