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

<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)
        },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容