Javascript将图片的绝对路径转换为base64编码的方法
时间:2019-04-12
本文章向大家介绍Javascript将图片的绝对路径转换为base64编码的方法,主要包括Javascript将图片的绝对路径转换为base64编码的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码;在这我们引用的是淘宝首页一张图片如下:
复制代码 代码如下:
我们如下编写代码:
function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }
chrome 运行如下所示:
通过搜索明白,我们使用的是淘宝服务器上的一张图片,在本地服务器下访问,结果出现图片跨域的问题;为止,我们可以把图片放在本地服务器下即可解决上面的跨域问题;比如我现在将淘宝服务器下的图片保存在本地服务器下;如下代码即可解决:
var img = "http://127.0.0.1/base64/1.jpg"; function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }
但是有时候我们想引用其他服务器下的图片该如何解决呢?我们可以使用下面这一句代码在chrome和firefox下生效,在目前safari6以下貌似不支持;如下代码:
image.crossOrigin = '';
所有代码如下:
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; //var img = "http://127.0.0.1/base64/1.jpg"; function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var image = new Image(); image.crossOrigin = ''; image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }
如上代码在chrome和firefox下,经测试生效,在safari目前不支持;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 斯坦福发布首份 AI Index 报告,AI 研究者不再茫然
- jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)
- Java程序员必读,Java设计模式应该遵循哪些原则
- Visual Studio 2010快速参考指南里头的Scrum海报
- TFS2010 Team Project Collections
- 基于Ext.Panel扩展一个更容易操作的Canvas
- 好玩的效果很好的Html游戏和范例
- jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)
- 北京市首个无人驾驶试运营基地落户顺义
- 后rtx集成时代
- 后短信集成时代
- jQuery仿极客公园火箭发射“返回顶部”效果(WordPress代码篇)
- Windows 2008 R2 Server Core .NET环境配置
- Request——Node世界中被依赖最多的库No.2
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 文件操作API
- Kotlin 扩展函数和扩展属性的使用方法
- PHP安全我见
- 使用Android WebSocket实现即时通讯功能
- 虚拟机设置桥接上网(下)
- WebSth 指纹识别插件简要分析
- Android实现3D层叠式卡片图片展示
- Android Studio屏幕方向以及UI界面状态的保存代码详解
- webshell,禁止你执行
- android实现下拉菜单三级联动
- Flutter 假异步的实现示例
- 详解Android4.4 RIL短信接收流程分析
- android 使用kotlin 实现点击更换全局语言(中日英切换)
- EasySec基于XP的渗透平台
- Android集成腾讯X5实现文档浏览功能