我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。现在我们提供一个js:

function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
} convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});

js 将图片连接转换称base64格式的更多相关文章

  1. [转]js 将图片连接转换称base64格式

    参考:http://blog.csdn.net/wyyfwm/article/details/45917255 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求 ...

  2. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  3. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  4. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  5. C++读写图片数据转成Base64格式的一种方法

    最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...

  6. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  7. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  8. javascript-文件File转换成base64格式

    不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...

  9. C++读写图片数据转成Base64格式

    转载:http://www.cnblogs.com/jeray/p/8746976.html 转载:https://www.cnblogs.com/lujin49/p/4957742.html 转载: ...

随机推荐

  1. CodeForces842C 树上dfs

    http://codeforces.com/problemset/problem/842/C 题意: 有一个n个节点的数,每个点有一个点权,根到这个点的所有点权(包括这个点和根)的gcd值为这个点的答 ...

  2. 面向对象【day07】:面向对象概念介绍(二)

    本节内容 1.概念 2.特性 3.面向对象介绍 一丶概念 1.面向对象编程 OOP(Object-Oriented Programming)编程是利用“类”和“对象”来创建各种模型来实现对真实世界的描 ...

  3. Python基础【day03】:集合入门(三)

    本节内容 1.集合常用方法总结2.定义3.关系测试 集合是无序的,天生不重复的数据组合,它的作用如下: 去重,即:把一个列表变成集合,就去重了 关系测试,即:测试两组集合的交集.并集和差集等 一.集合 ...

  4. Spark记录-Spark-Shell客户端操作读取Hive数据

    1.拷贝hive-site.xml到spark/conf下,拷贝mysql-connector-java-xxx-bin.jar到hive/lib下 2.开启hive元数据服务:hive  --ser ...

  5. Ubuntu 下 Tomcat7 的安装和配置

    tomcat下载地址:http://tomcat.apache.org/download-70.cgi 声明:下面的内容和原创笔者的博文的内容差不多,不一样的只是tomcat7的安装目录不同,我按照我 ...

  6. Study 5 —— CSS概述

    CSS(Cascading Style Sheet)称为层叠样式表,也可以称为CSS样式表或样式表,其文件扩展名为.css,CSS是用于增强或控制网页样式,并允许将样式信息与网页内容分离的一种标记性语 ...

  7. Dubbo是什么

    读音 |ˈdʌbəʊ| !不是[dubəʊ]!  (重点:调用步骤) Dubbo是什么 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.其核心 ...

  8. Linux 命令详解(六)Linux 守护进程的启动方法

    Linux 守护进程的启动方法 http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html

  9. spring boot(十):定时任务

    springboot默认已经帮我们实行了,只需要添加相应的注解就可以实现. 1.pom包配置 <dependency> <groupId>org.springframework ...

  10. DBeaver入门

    1 安装好连接好数据库,查询操作 注意黄色字体1 2 3 4 执行sql操作