在JavaScript中,将图片的绝对路径转换为base64字符串或blob对象,是常见的图片上传前的预处理步骤。这通常用于将用户选择的本地图片数据化,以便于通过Ajax方式上传到服务器,同时可以避免跨域问题。下面将详细阐述这个过程。 首先,将图片的绝对路径转换为base64字符串,主要依赖于HTML5的``元素的`toDataURL()`方法。这个方法可以将画布的内容转换为一个data URL,即base64编码的字符串,可以直接作为``标签的`src`属性使用。下面是一个简单的示例: ```javascript function getBase64Image(imgPath, width, height) { var img = new Image(); img.src = imgPath; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 确保图片加载完成 img.onload = function() { canvas.width = width || img.width; canvas.height = height || img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); var dataURL = canvas.toDataURL(); return dataURL; }; return img; } // 使用示例 getBase64('img/1.jpg').then(function(base64String) { console.log(base64String); }, function(err) { console.log(err); }); ``` 在这个例子中,`getBase64Image`函数接收图片路径、宽度和高度作为参数。它创建一个新的`Image`对象并设置其`src`属性为图片路径。当图片加载完成后,利用`canvas`绘制图片并调用`toDataURL`获取base64字符串。 如果图片位于不同的源(例如,跨域),浏览器出于安全考虑,会阻止在`canvas`上操作这些图片。为了解决这个问题,你可以将图片放在本地服务器下,以避免跨域问题。如示例中的`var imgSrc = "img/1.jpg";`,这样图片就在同一个源下,不会触发跨域错误。 除了base64字符串,还可以将图片转换为blob对象。blob对象是二进制大型对象,适用于处理大量数据。转换过程如下: ```javascript function imageToBlob(base64String) { return fetch(base64String.replace('data:image/jpeg;base64,', '')) .then(response => response.blob()); } // 使用示例 getBase64('img/1.jpg').then(base64String => { imageToBlob(base64String).then(blob => { // 上传blob对象 uploadImage(blob); }); }, function(err) { console.log(err); }); ``` 在这个例子中,`imageToBlob`函数首先将base64字符串转换为fetch请求,然后将响应体转换为blob对象。最后,可以将这个blob对象通过Ajax或其他异步方法上传到服务器。 总结起来,JavaScript中处理图片上传的过程通常包括以下步骤: 1. 获取图片的绝对路径。 2. 将图片路径转换为`Image`对象。 3. 使用`canvas`绘制图片并获取base64字符串或blob对象。 4. 上传base64字符串或blob对象到服务器。 确保处理过程中遵循同源策略,必要时将图片放在本地服务器,以避免跨域问题。同时,对于大文件,使用blob对象上传可能更高效,因为它允许分块传输。
2024-06-22 20:55:03 51KB 图片上传
1
该工具类可以实现以下几个功能 1、得到有效文件的长度(即大小),以字节表示 getFileSize(String filePath),需要传入文件路径 2、可以上传图片与非图片文件。有二个重构方法 一、无限制文件大小上传upLoad(String uploadPath,String filePath,String fileName),uploadPath代表上传目录,filePath代表文件路径,fileName 代表上传到服务器上的文件名 二、限制文件的大小,如果是图片则对图片进行压缩,如果是非图片,大于设定则不能上传 upLoad(
2024-06-22 18:27:11 9KB java
1
注释掉原有的aspose依赖,将下载文件挡在lib文件夹下,并在pom文件中添加新的依赖。 com.aspose.cad aspose-cad ${aspose-cad.version} system ${project.basedir}/lib/aspose-cad-23.7.jar
2024-06-20 07:57:09 35.69MB java
1
商家广告牌数据集,一共4G左右,分开上传,需要的可自行下载
2024-06-17 15:27:46 836.34MB 数据集
1
[可道云文件管理kodbox 1.15] 企业网盘+云端文档管理+批量上传下载文件夹+移动端H5优化
2024-06-12 14:27:50 29.17MB
1
FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。接下来通过本文给大家实例讲解Java实现FTP文件的上传和下载功能,需要的的朋友一起看看吧
1
1、嵌入式物联网单片机项目开发实战,每个例程都经过实战检验,简单好用。 2、代码使用KEIL 标准库开发,当前在STM32F407V运行,如果是STM32F407其他型号芯片,依然适用,请自行更改KEIL芯片型号以及FLASH容量即可。 3、软件下载时,请注意keil选择项是jlink还是stlink。 4、技术v:wulianjishu666; 5、如果接入其他传感器,请查看发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。
2024-06-04 17:08:32 3.87MB stm32 MQTT协议 esp8266
Matlab模拟基于多径传输和多普勒频移的 瑞利(Rayleigh)信道的仿真 上传版本.zip
2024-05-20 18:24:44 1.79MB
百度文库最新批量上传软件,批量上传修改文档,可设置试读页等。自己开发的。需要使用的可以下载。这个是电脑64位系统运行的。免费使用。不收取任何费用
2024-05-18 15:26:32 47.87MB 百度文件 百度文库批量上传
1
讯猴百度文库批量上传下载全能助手(cookie版)
2024-05-18 15:24:20 2.04MB 百度文库
1