Javascript将图片的绝对路径转换为base64编码的方法


Posted in Javascript onJanuary 11, 2018

我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码;在这我们引用的是淘宝首页一张图片如下:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.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 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 运行如下所示:

Javascript将图片的绝对路径转换为base64编码的方法

通过搜索明白,我们使用的是淘宝服务器上的一张图片,在本地服务器下访问,结果出现图片跨域的问题;为止,我们可以把图片放在本地服务器下即可解决上面的跨域问题;比如我现在将淘宝服务器下的图片保存在本地服务器下;如下代码即可解决:

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目前不支持;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
详解VUE2.X过滤器的使用方法
Jan 11 #Javascript
Vuex提升学习篇
Jan 11 #Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 #Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 #Javascript
angular2中Http请求原理与用法详解
Jan 11 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
小程序实现分类页
2019/07/12 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
Python数据可视化图实现过程详解
2020/06/12 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
小学教师岗位职责
2013/11/25 职场文书
社区中秋节活动方案
2014/01/29 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python