zoukankan      html  css  js  c++  java
  • vant 上传图片加水印

    afterReadVideo(file, fileList) {
    console.log(file)
    let _this = this;
    let fileUp = file.file;
    file.status = 'uploading';
    file.message = '上传中...';
    var shuiyin = document.getElementById('shuiyin');
    let fileReader = new FileReader();
    fileReader.readAsDataURL(fileUp);
    let img = new Image()
    fileReader.onload = function () {
    img.src = fileReader.result;
    img.onload = function() {
    let canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    let dataURL = ''
    canvas.height = this.height
    canvas.width = this.width
    ctx.drawImage(this, 0, 0)
    ctx.globalAlpha = 0.3;
    ctx.rotate(-Math.PI / 15);
    for(let n = 0; n <= canvas.width / 192; n++) {
    ctx.drawImage(shuiyin, n * 200, 0, 192, 51)
    }
    // dataURL = canvas.toDataURL(canvas);
    let imgData = canvas.toDataURL(file.type)
    let content = _this.dataURLtoFile(imgData, file.name);
    //创建一个新的FormData
    let formData = new FormData();
    // upload这个名字是后台给的
    formData.append("arcFile", content);
    _this.$axios({
    method: "post",
    headers: {
    "Content-Type": "multipart/form-data"
    },
    url: '/raptorBrokerServer/service/cont/test/salesContract/uploads.do',
    data: formData
    })
    .then(response => {
    if (response.data.success) {
    file.status = 'success';
    file.message = '上传成功!';
    }else {
    file.status = 'failed';
    file.message = '上传失败,请重新上传';
    }
    }).catch(error => {
    file.status = 'failed';
    file.message = '上传失败,请重新上传';
    _this.$toast.fail(error);
    })
    }
    }
    },

    //base64码转化为文件
    dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while(n--) {
    u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {type:mime})
    }

  • 相关阅读:
    课程作业06-汇总整理
    课程作业04-汇总整理
    课程作业04-字串加密解密
    课程作业03-你已经创建了多少个对象?
    课程作业03-汇总整理
    课程作业02-汇总整理
    02-实验性问题总结归纳
    猜数字游戏
    RandomStr实验报告(验证码实验)
    个人总结
  • 原文地址:https://www.cnblogs.com/lhqdbk/p/12624442.html
Copyright © 2011-2022 走看看