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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
js实现一个简易计算器
Mar 30 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
生成静态页面的PHP类
2006/07/15 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
跟老齐学Python之网站的结构
2014/10/24 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python端口扫描简单程序
2016/11/10 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python中rb含义理解
2020/06/18 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
2014年大学生自我评价
2014/01/19 职场文书
机电专业求职信
2014/06/14 职场文书
管理失职检讨书
2015/05/05 职场文书
活着观后感
2015/06/03 职场文书
导游词之永泰公主墓
2019/12/04 职场文书