网络图片转base64

该文章提供了一套在不同环境(如Web、H5、uni-app等)下将图片转换为base64编码并进行压缩的函数集合,包括getImageInfo、compressApp、imageSizeScale、dataUrlToBase64、pathToBase64和base64ToPath等方法,适用于处理网络图片和本地文件。
摘要由CSDN通过智能技术生成

网络图片进行截屏时候会跨域

function getLocalFilePath(path) {
  if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
    return path
  }
  if (path.indexOf('file://') === 0) {
    return path
  }
  if (path.indexOf('/storage/emulated/0/') === 0) {
    return path
  }
  if (path.indexOf('/') === 0) {
    var localFilePath = plus.io.convertAbsoluteFileSystem(path)
    if (localFilePath !== path) {
      return localFilePath
    } else {
      path = path.substr(1)
    }
  }
  return '_www/' + path
}
function getImageInfo(filePath) {
  return new Promise(resolve => {
    uni.getImageInfo({
      src: filePath,
      success: function(image) {
        resolve(image)
      },
      fail(err) {
        console.log(err)
      }
    })
  })
}
function compressApp(img, rate) {
  return new Promise((resolve) => {
    plus.io.resolveLocalFileSystemURL(img, (entry) => { // 通过URL参数获取目录对象或文件对象
      entry.file((file) => { // 可通过entry对象操作图片 
        plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
          src: img, // src: 压缩原始图片的路径    
          dst: img.replace('.png', '2222.png').replace('.PNG',
            '2222.PNG').replace('.jpg', '2222.jpg')
            .replace('.JPG', '2222.JPG'),
          width: rate * 100 + '%', // dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个2222区分一下
          height: rate * 100 + '%', // width,height: (String 类型 )缩放图片的宽度,高度
          quality: 100, // quality: (Number 类型 )压缩图片的质量
          overwrite: true // overwrite: (Boolean 类型 )覆盖生成新文件
          // format:'jpg'   //format: (String 类型 )压缩转换后的图片格式
        }, (event) => {
          resolve(event.target) // 返回新的图片地址,在uploadFile之前接收
        }, function(err) {
          console.log(err)
        })
      })
    }, (e) => { // 返回错误信息
      console.log('返回错误信息' + e.message)
    })
  })
}
export function imageSizeScale(file) {
  return new Promise(async(resolve, reject) => {
    let { width, height } = await getImageInfo(file)
    console.log(`图片原始尺寸${width},${height}`)
    if (width < 4999 && height < 4999) return resolve(file)
    let minScale = width > height ? 4500 / width : 4500 / height
    let newFile = await compressApp(file, minScale)
    let { width: newWidth, height: newHeight } = await getImageInfo(newFile)
    console.log(`新图片尺寸${newWidth},${newHeight}`)
    resolve(newFile)
  })
}
function dataUrlToBase64(str) {
  var array = str.split(',')
  return array[array.length - 1]
}

var index = 0
function getNewFileId() {
  return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
  var v1Array = v1.split('.')
  var v2Array = v2.split('.')
  var update = false
  for (var index = 0; index < v2Array.length; index++) {
    var diff = v1Array[index] - v2Array[index]
    if (diff !== 0) {
      update = diff > 0
      break
    }
  }
  return update
}

export function pathToBase64(path) {
  return new Promise(function(resolve, reject) {
    if (typeof window === 'object' && 'document' in window) {
      if (typeof FileReader === 'function') {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', path, true)
        xhr.responseType = 'blob'
        xhr.onload = function() {
          if (this.status === 200) {
            let fileReader = new FileReader()
            fileReader.onload = function(e) {
              resolve(e.target.result)
            }
            fileReader.onerror = reject
            fileReader.readAsDataURL(this.response)
          }
        }
        xhr.onerror = reject
        xhr.send()
        return
      }
      var canvas = document.createElement('canvas')
      var c2x = canvas.getContext('2d')
      var img = new Image
      img.onload = function() {
        canvas.width = img.width
        canvas.height = img.height
        c2x.drawImage(img, 0, 0)
        resolve(canvas.toDataURL())
        canvas.height = canvas.width = 0
      }
      img.onerror = reject
      img.src = path
      return
    }
    if (typeof plus === 'object') {
      plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
        entry.file(function(file) {
          var fileReader = new plus.io.FileReader()
          fileReader.onload = function(data) {
            resolve(data.target.result)
          }
          fileReader.onerror = function(error) {
            reject(error)
          }
          fileReader.readAsDataURL(file)
        }, function(error) {
          reject(error)
        })
      }, function(error) {
        reject(error)
      })
      return
    }
    if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
      wx.getFileSystemManager().readFile({
        filePath: path,
        encoding: 'base64',
        success: function(res) {
          resolve('data:image/png;base64,' + res.data)
        },
        fail: function(error) {
          reject(error)
        }
      })
      return
    }
    reject(new Error('not support'))
  })
}

export function base64ToPath(base64) {
  return new Promise(function(resolve, reject) {
    if (typeof window === 'object' && 'document' in window) {
      base64 = base64.split(',')
      var type = base64[0].match(/:(.*?);/)[1]
      var str = atob(base64[1])
      var n = str.length
      var array = new Uint8Array(n)
      while (n--) {
        array[n] = str.charCodeAt(n)
      }
      return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
    }
    var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
    if (extName) {
      extName = extName[1]
    } else {
      reject(new Error('base64 error'))
    }
    var fileName = getNewFileId() + '.' + extName
    if (typeof plus === 'object') {
      var basePath = '_doc'
      var dirPath = 'uniapp_temp'
      var filePath = basePath + '/' + dirPath + '/' + fileName
      if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
        plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
          entry.getDirectory(dirPath, {
            create: true,
            exclusive: false
          }, function(entry) {
            entry.getFile(fileName, {
              create: true,
              exclusive: false
            }, function(entry) {
              entry.createWriter(function(writer) {
                writer.onwrite = function() {
                  resolve(filePath)
                }
                writer.onerror = reject
                writer.seek(0)
                writer.writeAsBinary(dataUrlToBase64(base64))
              }, reject)
            }, reject)
          }, reject)
        }, reject)
        return
      }
      var bitmap = new plus.nativeObj.Bitmap(fileName)
      bitmap.loadBase64Data(base64, function() {
        bitmap.save(filePath, {}, function() {
          bitmap.clear()
          resolve(filePath)
        }, function(error) {
          bitmap.clear()
          reject(error)
        })
      }, function(error) {
        bitmap.clear()
        reject(error)
      })
      return
    }
    if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
      var filePath = wx.env.USER_DATA_PATH + '/' + fileName
      wx.getFileSystemManager().writeFile({
        filePath: filePath,
        data: dataUrlToBase64(base64),
        encoding: 'base64',
        success: function() {
          resolve(filePath)
        },
        fail: function(error) {
          reject(error)
        }
      })
      return
    }
    reject(new Error('not support'))
  })
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值