在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.pdf实现PDF转图片,压缩包自带aspose.pdf破解版。方法简单实用。
2024-06-20 18:38:11 13.62MB aspose.pdf PDF转图片
1
NULL 博文链接:https://rensanning.iteye.com/blog/2315438
2024-06-20 10:40:56 20KB 源码
1
这是一个压缩包,包含了Opencv_Stitcher调用代码,PhotoShop脚本PhotoMerge插件和它相应的专利技术文档(含中英版),还包括了生成手动微调代码,所有的经过测试的拼合素材图片和拼合效果,最后附上我的全景拼合代码,具体的使用方法和说明见我的博客链接,如有什么问题,请私信或者博客中@我一下,我看到后,会尽量给出回答,谢谢大家的支持!
2024-06-19 17:06:14 288.97MB opencv photoshop python
1
java语言程序设计第十版课后习题答案及图片资源答案;
2024-06-19 11:33:25 95.17MB java答案
1
GitHub最新hosts。解决GitHub图片无法显示,加速GitHub网页浏览。
2024-06-18 11:22:42 95KB
1
描述:使用Shader将图片进行水平/竖直镜像翻转 资源类型:unitypackage,导入即可使用 内容: 包含shader,material,示例场景 可以在运行时自主对图形进行水平或者竖直镜像翻转,也可同时水平和竖直镜像翻转 对unity版本没有太高要求。 Shader中使用顶点着色器,首先坐标转换成UV坐标,然后使用使用镜像公式对坐标进行镜像处理。 Description: Use Shader to horizontally/vertically mirror and flip the image Resource type: Unitypackage, can be imported and used immediately Content: Including shaders, materials, and sample scenes It is possible to autonomously mirror and flip graphics horizontally or vertically during runtime, as well as simultane
2024-06-18 09:36:23 143KB unity
1
stable diffusion绘图时,需要限定图片的姿势,自己找图生成姿势图过于麻烦,直接使用线现成的姿势参考图,可以大大提升出图效率。拖入controlNet插件中即可使用。
2024-06-18 01:01:40 204.34MB 人工智能 controlNet
1
付费图片系统可用于个人写真站,wordpress主题 上传到模板就可以,源码学习研究请勿用于违法用途
2024-06-18 00:14:45 5.71MB
1