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})
    }

  • 相关阅读:
    <mvc:default-servlet-handler />说明
    sql server 数据库创建链接服务器访问另外一个sql server 数据库
    WebSocket实现简易聊天室
    WebSocket在建立连接时通过@PathParam获取页面传值
    Shiro密码处理
    Java enum应用小结
    Java8 Optional类使用小结
    Java中使用Jedis操作Redis
    前台图片Canvas压缩上传小结
    剪邮票
  • 原文地址:https://www.cnblogs.com/lhqdbk/p/12624442.html
Copyright © 2011-2022 走看看