图片标签拖拽 && url、base64、Blob、File、canvas之间相互转换

瑶瑶领先_2026-02-13 18:24

图片标签拖拽 && url、base64、Blob、File、canvas之间相互转换

背景：已有选择本地文件上传和粘贴图片上传，由于用户喜欢使用拖拽事件，提出要求会话框中的图片通过拖拽到右侧可上传区域释放后可以上传相关的图片。

问题： 拖拽聊天框中的图片和本地图片拖拽有什么不一样？传递什么数据？图片地址为什么不能就直接用当前图片地址？图片跨域（开发过程中，我的浏览器开起来允许跨域请求）

尝试： 请求允许跨域(mode: 'cros')、图片转成canvas、图片允许跨域（crossOrigin：'Anonymous'），后端服务器请求图片

  1. 先在聊天框中监听拖拽事件，携带上图片地址
ini 复制代码 
    const onDrag = (e) => {
      // 携带上拖拽图片的地址
      e.dataTransfer.setData('text/plain', e.target.currentSrc);
    };
    const el = document.getElementById('im-jtalk-chat__zone');
    el?.addEventListener('dragstart', onDrag);
  1. 在拖拽目标上监听onDrop事件，获取数据传送中的图片url地址 ，通过fetch将图片转换成blob 再转换成文件。
scss 复制代码 
 const getImageFileFromUrl = (url, imageName, callback) => {
        fetch(url)
          .then((res) => {
            return res.blob();
          })
          .then((blob) => {
            const imgFile = new File([blob], imageName, { type: "image/jpeg" });
            callback(imgFile);
          });
      }
// 选择默认图片
const chooseStaticImg = (imageUrl) => {
        getImageFileFromUrl(imageUrl, "image.png", (file) => {
          //获取file对象 图片处理方法
          changeFileList(file)
        });
      }

 const imgUrl = e.dataTransfer.getData("text");
      // 拖拽的不是文件 && 拖拽图片被赋值了图片链接
      if(!e.dataTransfer.files?.length && imgUrl) {
        chooseStaticImg(imgUrl);
      }

其中有坑，图片fetch是走了接口请求，这里就会有跨域问题，需要后端设置允许图片跨域下载

以下是几种图片格式之间的转换：

图片标签拖拽 && url、base64、Blob、File、canvas之间相互转换

背景：已有选择本地文件上传和粘贴图片上传，由于客服喜欢使用拖拽事件，提出要求会话框中的图片通过拖拽到右侧可上传区域释放后可以上传相关的图片。

问题： 拖拽聊天框中的图片和本地图片拖拽有什么不一样？传递什么数据？图片地址为什么不能就直接用当前图片地址？图片跨域（开发过程中，我的浏览器开起来允许跨域请求）

尝试： 请求允许跨域(mode: 'cros')、图片转成canvas、图片允许跨域（crossOrigin：'Anonymous'），后端服务器请求图片

  1. 先在聊天框中监听拖拽事件，携带上图片地址
ini 复制代码 
    const onDrag = (e) => {
      // 携带上拖拽图片的地址
      e.dataTransfer.setData('text/plain', e.target.currentSrc);
    };
    const el = document.getElementById('im-jtalk-chat__zone');
    el?.addEventListener('dragstart', onDrag);
  1. 在拖拽目标上监听onDrop事件，获取数据传送中的图片url地址 ，通过fetch将图片转换成blob 再转换成文件。
scss 复制代码 
 const getImageFileFromUrl = (url, imageName, callback) => {
        fetch(url)
          .then((res) => {
            return res.blob();
          })
          .then((blob) => {
            const imgFile = new File([blob], imageName, { type: "image/jpeg" });
            callback(imgFile);
          });
      }
// 选择默认图片
const chooseStaticImg = (imageUrl) => {
        getImageFileFromUrl(imageUrl, "image.png", (file) => {
          //获取file对象 图片处理方法
          changeFileList(file)
        });
      }

 const imgUrl = e.dataTransfer.getData("text");
      // 拖拽的不是文件 && 拖拽图片被赋值了图片链接
      if(!e.dataTransfer.files?.length && imgUrl) {
        chooseStaticImg(imgUrl);
      }

其中有坑，图片fetch是走了接口请求，这里就会有跨域问题，需要后端设置允许图片跨域下载

以下是几种图片格式之间的转换：

URL => Blob
scss 复制代码 
 function URLToBlob(url, callback) {
     // 图片地址需要允许跨域
    fetch(url).then(res => res.blob()).then(res => {
      callback(res)
    })
  }
URL => base64
ini 复制代码 
 function URLToBase64(url, callback) {
    let image = new Image();
    // CORS 策略，会有跨域问题
    image.setAttribute("crossOrigin",'Anonymous');
    image.src = url;
    image.onload = function() {
      let canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      // 将图片插入画布并开始绘制
      canvas?.getContext('2d')?.drawImage(image, 0, 0);
      // result
      let result = canvas.toDataURL('image/png')
      callback(result)
    };
  }
URL => canvas
ini 复制代码 
 function URLToBase64(url, callback) {
    let image = new Image();
    // CORS 策略，会有跨域问题
    image.setAttribute("crossOrigin",'Anonymous');
    image.src = url;
    image.onload = function() {
      let canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      // 将图片插入画布并开始绘制
      canvas?.getContext('2d')?.drawImage(image, 0, 0);
      callback(canvas)
    };
  }
canvas => URL
javascript 复制代码 
function canvasToURL(canvas) {
    return canvas.toDataURL('image/png')
  }
canvas => Blob
javascript 复制代码 
function canvasToBlob(canvas, callback) {
    canvas.toBlob(blob => {
      callback(blob)
    }, "image/jpeg")
  }
base64 => Blob
ini 复制代码 
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
function Base64ToBlob(base64) {
    const arr = base64.split(",");
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
Blob => base64
ini 复制代码 
 function BlobToBase64(blob, callback) {
    const a = new FileReader();
    a.readAsDataURL(blob); 
    a.onload = function (e) {
      callback(e.target?.result);
    };
  }
Blob => File
javascript 复制代码 
function BlobToFile(blob) {
    return new window.File([blob], 'imageName', { type: 'text/plain' })
  }
FIle => Blob
ini 复制代码 
<input type="file" accept="image/*" onChange={onChange} />

function FileToBlob (file) {
    let url = window.URL.createObjectURL(file.item[0]);
    return url;
}

const onChange = (e) => {
    FileToBlob(e.nativeEvent.srcElement.files)
  }
URL => Blob
scss 复制代码 
 function URLToBlob(url, callback) {
     // 图片地址需要允许跨域
    fetch(url).then(res => res.blob()).then(res => {
      callback(res)
    })
  }
URL => base64
ini 复制代码 
 function URLToBase64(url, callback) {
    let image = new Image();
    // CORS 策略，会有跨域问题
    image.setAttribute("crossOrigin",'Anonymous');
    image.src = url;
    image.onload = function() {
      let canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      // 将图片插入画布并开始绘制
      canvas?.getContext('2d')?.drawImage(image, 0, 0);
      // result
      let result = canvas.toDataURL('image/png')
      callback(result)
    };
  }
URL => canvas
ini 复制代码 
 function URLToBase64(url, callback) {
    let image = new Image();
    // CORS 策略，会有跨域问题
    image.setAttribute("crossOrigin",'Anonymous');
    image.src = url;
    image.onload = function() {
      let canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      // 将图片插入画布并开始绘制
      canvas?.getContext('2d')?.drawImage(image, 0, 0);
      callback(canvas)
    };
  }
canvas => URL
javascript 复制代码 
function canvasToURL(canvas) {
    return canvas.toDataURL('image/png')
  }
canvas => Blob
javascript 复制代码 
function canvasToBlob(canvas, callback) {
    canvas.toBlob(blob => {
      callback(blob)
    }, "image/jpeg")
  }
base64 => Blob
ini 复制代码 
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
function Base64ToBlob(base64) {
    const arr = base64.split(",");
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
Blob => base64
ini 复制代码 
 function BlobToBase64(blob, callback) {
    const a = new FileReader();
    a.readAsDataURL(blob); 
    a.onload = function (e) {
      callback(e.target?.result);
    };
  }
Blob => File
javascript 复制代码 
function BlobToFile(blob) {
    return new window.File([blob], 'imageName', { type: 'text/plain' })
  }
FIle => Blob
ini 复制代码 
<input type="file" accept="image/*" onChange={onChange} />

function FileToBlob (file) {
    let url = window.URL.createObjectURL(file.item[0]);
    return url;
}

const onChange = (e) => {
    FileToBlob(e.nativeEvent.srcElement.files)
  }
相关推荐
感性的程序员小王2 小时前
我做了个 AI + 实时协作 的 draw.io，免费开源！！
前端·后端
_周游2 小时前
Java8 API文档搜索引擎_7.项目优化之权重合并
java·开发语言·前端·搜索引擎·intellij-idea
木斯佳2 小时前
前端八股文面经大全：2026-02-09快手春招前端一面
前端·状态模式
闲云一鹤2 小时前
UV 包管理器 - 新一代的 Python 包和环境管理神器
前端·python
电商API_180079052472 小时前
淘宝商品详情数据获取全方案分享
开发语言·前端·javascript
Amumu121383 小时前
CSS简介
前端·css
Yzw3 小时前
当vue.diff遇上了扩展运算符(...)
前端
前端不开发3 小时前
在任意网页里“召唤”一个火柴人：一次有趣的 JavaScript Hack
前端·javascript
whatever who cares3 小时前
Java Web 架构全组件详解
java·前端·架构
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03243 行 microGPT：把“训练 + 推理”拆到骨头里04UV安装并设置国内源05openclaw 配置飞书 报错 应用未建立长连接06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07openclaw配置教程（linux+局域网ollama）08Zsh/Bash Conda设置延迟启动，启动速度优化09MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法10爬虫逆向之观安（观镜WEB应用安全防护系统）