js 将图片连接转换成base64格式的简单实例

我们把图像文件的内容直接写在了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格式的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Js实现Base64编码与解码

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据. 1.加密解密方法使用: //1.加密 var str = '124中文内容'; var base = new Base64(); var result = base.encode(str); //doc

  • JS实现的base64加密、md5加密及sha1加密详解

    本文实例讲述了JS实现的base64加密.md5加密及sha1加密.分享给大家供大家参考,具体如下: 1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>base64加密</title> <script type="text/javascript" s

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

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

  • JavaScript Base64编码和解码，实现URL参数传递。

    为什么需要对参数进行编码?相信有过开发的经验的广大程序员都知道,在Web中,若是直接在Url地址上传递参数值,若是中文,或者+等什么的就会出现乱码现象,若是数字或者英文的好象没有什么问题,简言之,传递过来的参数是需要进行编码的.在这里,也许有人会说,为什么不直接用Server.UrlDecode和Server.UrlEncode这两个来进行编码和解码的操作呢? 的确,这两个服务器端对象很好使用,用起来也很方便,但是,若在客户端是HTML的Input,查询的时候页面是HTML或者其他的,反正不是.

  • javascript从image转换为base64位编码的String

    最近需要把app的微信分享方法开放给webview,涉及到分享的图片,如果通过传送图片连接,那将要在后台再取一次图片文件,会影响速度,我选择webview把image以base64位编码的方式传给本地应用. 下面是实现的参考代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"&g

  • node.js学习之base64编码解码

    node.js学习之base64编码解码

    一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能全部是可见字符,所以就传送不了.最好的方法就是在不改变传统协议的情 况下,做一种扩展方案来支持二进制文件的传送.把不可打印的字符也能用可打印字符来表示,问题就解决了.Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法

  • 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

  • JS 实现Base64编码与解码实例详解

    Js实现Base64编码与解码 Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍. Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据.

  • js 将图片连接转换成base64格式的简单实例

    我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Ano

  • 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

  • JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

  • 原生JS实现图片轮播与淡入效果的简单实例

    最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会

  • python heic后缀图片文件转换成jpg格式的操作

    python heic后缀图片文件转换成jpg格式的操作

    我就废话不多说了,直接上代码 heic_to_jpg.py import subprocess import os import io import whatimage import pyheif import traceback from PIL import Image def decodeImage(bytesIo): try: fmt = whatimage.identify_image(bytesIo) # print('fmt = ', fmt) if fmt in ['heic']

  • canvas压缩图片转换成base64格式输出文件流

    昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下 <!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--&

  • JS实现图片转换成base64的各种应用场景实例分析

    本文实例讲述了JS实现图片转换成base64的各种应用场景.分享给大家供大家参考,具体如下: 网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下: 场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时,将图片资源转化成base64: <input type="file" i

  • Java实现将png格式图片转换成jpg格式图片的方法【测试可用】

    本文实例讲述了Java实现将png格式图片转换成jpg格式图片的方法.分享给大家供大家参考,具体如下: import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class ConvertImageFile { public static void main(Str

  • 利用nodejs读取图片并将二进制数据转换成base64格式

    目录 读取图片并将二进制数据转换成base64格式 nodejs读取服务器图片,转为base64显示在网页上 读取图片并将二进制数据转换成base64格式 首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取: fs.readFile('你的资源路径','binary',function(err,data){     if(err){         console.log(err)     }else{         console.log('数据读取成功');  

  • Js中将Long转换成日期格式的实现方法

    Js中将Long转换成日期格式的实现方法

    主要用于将数据库中日期用long表示,转换成YYYY-MM-DD格式或YYYY-MM-DD HH:mm:ss格式 若显示为YYYY-MM-DD HH:mm:ss格式,调用如下方法: datetimeFormat(longTypeDate); 若显示为YYYY-MM-DD格式,调用如下方法: dateFormat(longTypeDate); Js中具体方法如下: /* * 时间格式化工具 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期 */

随机推荐