src转换成base64,src转换成Blob,base64转换为file文件流

    //  src转base64(1)
		getBase64(img) {
		        function getBase64Image(img, width, height) {
		          var canvas = document.createElement('canvas')
		          canvas.width = width ? width : img.width
		          canvas.height = height ? height : img.height
		          var ctx = canvas.getContext('2d')
		          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
		          var dataURL = canvas.toDataURL()
		          return dataURL
		        }
		        var image = new Image()
		          image.setAttribute('crossOrigin', 'anonymous') // 解决跨域
		          image.setAttribute('referrerpolicy', 'no-referrer') // 不用带 referer 所有的防止外链的行为都会失效
		        image.crossOrigin = '*'
		        image.src = img + '?v=' + Math.random() // 解决图片URL缓存问题
		        return new Promise((resolve, reject) => {
		          console.log(reject)
		          image.onload = function () {
		            resolve(getBase64Image(image)) //将base64传给done上传处理
		          }
		        })
		      },
        // src转换成base64(2)
		      getBase64(img_url) {
		        function toBase64(image) {
		          const canvas = document.createElement('canvas')
		          canvas.width = image.width
		          canvas.height = image.height
		          const ctx = canvas.getContext('2d')
		          ctx.drawImage(image, 0, 0, image.width, image.height)
		          const base64 = canvas.toDataURL('image/png')
		          return base64
		        }
		        return new Promise((resolve, reject) => {
		          console.log(reject)
		          const image = new Image()
		          image.setAttribute('crossOrigin', 'anonymous') // 解决跨域
		          image.setAttribute('referrerpolicy', 'no-referrer') // 不用带 referer 所有的防止外链的行为都会失效
		          image.crossOrigin = '*'
		          image.src = img_url + '?v=' + Math.random() // 解决图片URL缓存问题
		          image.onload = () => {
		            resolve(toBase64(image))
		          }
		        })
		      },
       // src转换成Blob
		      getImgBlob(imgUrl) {
		        return new Promise((resolve, reject) => {
		          const img = new Image()
		          img.setAttribute('crossorigin', 'anonymous') // 允许图片跨域
		          img.setAttribute('referrerpolicy', 'no-referrer') // 不用带 referer 所有的防止外链的行为都会失效
		          img.onload = () => {
		            const canvas = document.createElement('canvas')
		            canvas.height = img.height
		            canvas.width = img.width
		            const ctx = canvas.getContext('2d')
		            ctx.drawImage(img, 0, 0, img.width, img.height)
		            canvas.toBlob((b) => resolve(b))
		          }
		          img.onerror = (err) => reject(err)
		          img.src = imgUrl
		        })
		      },
      // base64转换为file文件流
		      base64toFile(dataurl, filename = 'file') {
		        let arr = dataurl.split(',')
		        let mime = arr[0].match(/:(.*?);/)[1]
		        let suffix = mime.split('/')[1]
		        let bstr = atob(arr[1])
		        let n = bstr.length
		        let u8arr = new Uint8Array(n)
		        while (n--) {
		          u8arr[n] = bstr.charCodeAt(n)
		        }
		        return new File([u8arr], `${filename}.${suffix}`, {
		          type: mime,
		        })
		      },
          //使用
              // 图片转成Blob格式
	              //   that.getImgBlob(imageArr[i]).then((url) => {
	              //     console.log(
	              //       new window.File([url], Math.random(), {
	              //         type: url.type,
	              //       })
	              //     )
            // Blob格式转成file文件
	              //     formData.append(
	              //       'files',
	              //       new window.File([url], Math.random(), {
	              //         type: url.type,
	              //       })
	              //     )
	              //   })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值