canvas 导出图片上传处理

359 阅读1分钟
// 将canvas导出base64

    function upLoad(){

     let  canvas = document.getElementById("canvas");
     let ctx =  canvas.getContext("2d")

      let  img = new Image()
      img.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2716398045,2043787292&fm=253&gp=0.jpg"
      img.crossOrigin = "anonymous"
      img.width= 1920,
      img.height = 1080
      img.onload = function(){
        ctx.drawImage(img,0,0,1920,1080)
      }
      
      let base64 = canvas.toDataURL('image/jpeg')
      let data = new FormData()
      let fileOfBlob = new File([dataURItoBlob(base64)], new Date().getTime() + '.png', {     type: "image/png" }); // 重命名了
      data.append('file', fileOfBlob)
      
      
        //执行上传接口
      
      
    }, 
}
    
    


// base64转blob
function dataURItoBlob(base64) {
    let byteString
    const arr = base64.split(',')

    if (arr[0].indexOf('base64') !== -1) {
        // 转回字符串数据
        byteString = atob(arr[1])
    } else {
        // 没有base64标志,使用unescape解码回字符串数据
        byteString = unescape(arr[1])
    }

    // 获取文件格式
    const mimeString = arr[0].split(':')[1].split(';')[0]
    // 创建一个8位无符号整型数组,长度为字符数据长度
    const ia = new Uint8Array(byteString.length)
    for (let i = 0; i < byteString.length; i++) {
        // 存入ascii码
        ia[i] = byteString.charCodeAt(i)
    }

    return new Blob([ia], { type: mimeString })
}

// blob 转 file 一行代码就行了
function blobToFile(blob) {
    return new File([blob], `${new Date().getTime()}.png`, { type: blob.type })
}