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

我们可以使用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 运行如下所示：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • HTML5 JS压缩图片并获取图片BASE64编码上传
  • js 显示base64编码的二进制流网页图片
  • js对图片base64编码字符串进行解码并输出图像示例
赞 (0)

相关推荐

  • js 显示base64编码的二进制流网页图片

    Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc

  • HTML5 JS压缩图片并获取图片BASE64编码上传

    本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下 基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 c

  • js对图片base64编码字符串进行解码并输出图像示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

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

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

    我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: 复制代码 代码如下: var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; 我们如下编写代码: function getBase64Image(img) { var canvas = document.createElement("canva

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • python将图片文件转换成base64编码的方法

    本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码 代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU

  • android图片文件的路径地址与Uri的相互转换方法

    一个android文件的Uri地址一般如下: content://media/external/images/media/62026 这是一张图片的Uri,那么我们如何根据这个Uri获得其在文件系统中的路径呢? 其实很简单,直接上代码: public static String getRealFilePath( final Context context, final Uri uri ) { if ( null == uri ) return null; final String scheme

  • JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

    本文实例讲述了JS实现对中文字符串进行utf-8的Base64编码的方法.分享给大家供大家参考,具体如下: 要进行编码的字符串:"select 用户名 from 用户" 使用JAVA进行编码,Java程序: String sql = "select 用户名 from 用户"; String encodeStr = new String(Base64.encode(sql.getBytes("UTF-8"))); // 编码 System.out.

  • php自动识别文字编码并转换为目标编码的方法

    本文实例讲述了php自动识别文字编码并转换为目标编码的方法.分享给大家供大家参考.具体如下: 在PHP处理页面的时候,我们对于字符集的转换都是采用了iconv或者mb_convert等函数,但,这其实是有一个前提的.即我们事先得知道in和out是什么样的编码,我们才能进行正确的转换. 虽然大多数转换都是在gbk和utf-8之间转,但如果不知道转换对象的编码怎么办呢?谷歌出来这么一个函数safeEncoding,可以简单的识别UTF8和GBK的编码.这个函数在一定程度上识别的很准确,但是在一些比较

  • go语言实现字符串base64编码的方法

    本文实例讲述了go语言实现字符串base64编码的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: package main import (     "fmt"     "encoding/base64" ) func main() { var b bytes.Buffer w := base64.NewEncoder(base64.URLEncoding, &b) w.Write(data) w.Close() data := b.B

  • C#对二进制数据进行base64编码的方法

    本文实例讲述了C#对二进制数据进行base64编码的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.IO; static class MyModClass { public static string Base64EncodeBytes(this byte[] inBytes) { return (Convert.ToBase64String(inBytes)); } } 希望本文所述对大家的C#程序设计有所帮助.

  • Java JDK1.7对字符串的BASE64编码解码方法

    如下所示: package cn.itcast; import java.io.IOException; import java.io.UnsupportedEncodingException; import org.junit.Test; import sun.misc.BASE64Decoder; /* * @author soto * BASE64编码 解码 * */ public class Demo1 { @Test public void fun1() throws IOExcept

  • 详解Python中使用base64模块来处理base64编码的方法

    base64模块是用来作base64编码解码的.这种编码方式在电子邮件中是很常见的. 它可以把不能作为文本显示的二进制数据编码为可显示的文本信息.编码后的文本大小会增大1/3. 闲话不说了,base64模块真正用的上的方法只有8个,分别是encode, decode, encodestring, decodestring, b64encode,b64decode, urlsafe_b64decode,urlsafe_b64encode.他们8个可以两两分为4组,encode,decode一组,专

随机推荐