美文网首页
网络地址图片转变为base64,再转换为文件流。js处理

网络地址图片转变为base64,再转换为文件流。js处理

作者: 杨wen慧 | 来源:发表于2020-10-14 14:35 被阅读0次
    <button @click="toImg"></button>
    data(){
      return{
         img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg",
         base64: ""
      }
    }
    getBase64Image(img) {
                var canvas = document.createElement("canvas")
                canvas.width = img.width
                canvas.height = img.height
                var ctx = canvas.getContext("2d")
                ctx.drawImage(img, 0, 0, img.width, img.height)
                var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
                var dataURL = canvas.toDataURL("image/" + ext)
    
                return dataURL
            },
    toImg() {
                var _this = this
                var image = new Image()
                image.src = _this.img
                image.setAttribute("crossOrigin", "Anonymous")
                // image.setAttribute("crossorigin", " *")
                image.onload = function() {
                    var base64 = _this.getBase64Image(image)
                    _this.base64 = base64
                    // document.getElementById("img").src = base64
                    var formData = new FormData()
    
                    //转换base64到file
                    var file = _this.btof(base64, "test")
                    formData.append("imageName", file)
                }
            },
    btof(data, fileName) {
                const dataArr = data.split(",")
                const byteString = atob(dataArr[1])
    
                const options = {
                    type: "image/jpeg",
                    endings: "native"
                }
                const u8Arr = new Uint8Array(byteString.length)
                for (let i = 0; i < byteString.length; i++) {
                    u8Arr[i] = byteString.charCodeAt(i)
                }
                return new File([u8Arr], fileName + ".jpg", options)
            },
    

    相关文章

      网友评论

          本文标题:网络地址图片转变为base64,再转换为文件流。js处理

          本文链接:https://www.haomeiwen.com/subject/hoqwpktx.html