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

网络地址图片转变为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)
        },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值