我们把图像文件的内容直接写在了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. pthread_cond_wait() 函数的使用

    1. 首先pthread_cond_wait 的定义是这样的 The pthread_cond_wait() and pthread_cond_timedwait() functions are us ...

  2. Luogu 2540 斗地主增强版(搜索,动态规划)

    Luogu 2540 斗地主增强版(搜索,动态规划) Description 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游 ...

  3. CF 991

    843名... 正规比赛肯定要掉分了...... 就算C没WA也是765名...为什么会这么菜呢? A,水.我加了两个特判. B,水.以 n * 4.5 为目标即可. C,裸二分,可耻的WA了一次是为 ...

  4. CodeForces 纪念一下这个突破性的时刻

  5. (reverse)Palindromes hdu2163

    Palindromes 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2163 (此题是为了对于JAVA温故知新的) Problem Description ...

  6. jsp中的request.getContextPath()

    jsp中的request.getContextPath()   <%=request.getContextPath()%>是为了解决相对路径的问题,可返回站点的根路径. 但不用也可以吧,比 ...

  7. CSS3:文字属性

    文字属性注意的细节: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. go 练习

    1.判断 101-200 之间有多少个素数,并输出所有素数 定义:为在大于1的自然数中,除了1和它本身以外不再有其他因数的数称为质数. package main import ( "fmt& ...

  9. 原生ajax写法

    ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData对象,xhr.send(formData)  //不能用GET 2.文件上传,文件 ...

  10. loadrunner java / JAVA_HOME / CLASSPATH / PATH

    s Loadrunner 9.5/11 java vuser环境配置问题(已解决) http://blog.csdn.net/achang21/article/details/45540483 Loa ...