转。。。。

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

 var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

我们如下编写代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 运行如下所示:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 = '';

所有代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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目前不支持;

Js 将图片的绝对路径转换为base64编码的更多相关文章

  1. Js 将图片的绝对路径转换为base64编码(3)

    图片文件改变一方法:$('#file').change(function(){var oFReader = new FileReader();oFReader.readAsDataURL(this.f ...

  2. Js 将图片的绝对路径转换为base64编码(2)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Javascript 将图片的绝对路径转换为base64编码

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

  4. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  5. nodejs抓取网络图片转换为base64编码的图片

    抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...

  6. input file获取选择图片的本地路径和base64路径

    input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...

  7. 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码

    c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...

  8. Qt 中十六进制字节流转换为Base64编码

    在Qt中,在网络通信时,有时需要将16进制字节流转换为Base64编码传输,在Qt的QByteArray类中,提供了与Base64转换的接口: //16进制字节流转为Base64 QByteArray ...

  9. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

随机推荐

  1. 关于oracle下提示ORA-00904:Invalid identifier错误的问题

    转自:https://blog.csdn.net/suleil1/article/details/49471549 今天在建表后对数据进行插入,遇到这个恶心人的ORA-00904:Invalid id ...

  2. JetBrain系列学生免费授权

    1.访问网址:https://www.jetbrains.com/zh/student/ 2.往下滚动,点击立即申请 3.填写邮箱信息 4.确认后,跳转到Thank you页面,上面说已经给注册邮箱发 ...

  3. delete file SVN commit error has no URL

    在提交SVN的时候遇到这个提交失败的提示: delete file SVN commit error has no URL 我的提交顺序是: 先在自己工程的文件夹删除 ->工程中删除 -> ...

  4. C#在非UI线程调用UI线程的控件

    首先需要定义一个委托(delegate): private delegate void delegateSetProcessBarVal(int value); 然后定义一个方法来执行具体的操作: p ...

  5. java:easyui(重点示例)

    1.accordion(可折叠的): <!doctype html> <html lang="zh"> <head> <title> ...

  6. 【HANA系列】【第五篇】SAP HANA XS的JavaScript API详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第五篇]SAP HANA XS ...

  7. ASP.NET Core 入门笔记 1,项目概览

    (1)新建项目选择ASP.NET Core Web应用程序 (2)程序会自动安装相应的包组件,此时依赖项会有感叹号,等待安装完毕感叹号消失 (3)在项目的文件夹下建立其他文件,都会在项目资源视图中显示 ...

  8. android4.2 webkit 中的jni

    在android 应用开发中使用WebView,当一个webveiw 被创建时, 也会去load 他所对应的动态库,这里动态库也就是传说中的webkit 内核等. C++ 层与java 层的交互也是通 ...

  9. EditText inputType类型整理

    //文本类型,多为大写.小写和数字符号.     android:inputType="none"//输入普通字符    android:inputType="text& ...

  10. SolidWorks学习笔记6抽壳,加强筋,扫描,放样

    抽壳 概念:移除一个或者多个面,然后将其余的模型外表面向内或者向外偏移相等或者不等的距离 针对不同面设置不同厚度 方向参考 有实体的一侧是内测, 没有实体的一侧是外侧 顺序 先圆角再抽壳 加强筋. 点 ...