热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

下面小编就为大家带来一篇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格式的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 如何在百度网盘中创建目录树结构?
    本文将详细介绍如何利用特定工具从百度网盘生成详细的目录树结构,帮助用户更好地管理和查找文件。 ... [详细]
  • 转载网址:http:www.open-open.comlibviewopen1326597582452.html参考资料:http:www.cocos2d-ip ... [详细]
  • 本文介绍了如何利用Python的Turtle库来绘制奥运五环。通过设置不同的颜色和位置,能够精确地模拟奥运标志。 ... [详细]
  • 本章节深入探讨了多种实用的辅助类,这些类将在未来的项目中发挥关键作用。此外,单元测试被强调为游戏开发初期的重要步骤。文章最后通过Breakout游戏的实例,展示了如何有效地利用前文所述的技术。 ... [详细]
  • 每位开发者都应该拥有一个展示自我技能与分享知识的空间——个人技术博客。本文将指导你如何使用静态网站生成器Hexo结合GitHub Pages搭建这样一个平台。 ... [详细]
  • 本文基于https://major.io/2014/05/13/coreos-vs-project-atomic-a-review/的内容,对CoreOS和Atomic两个操作系统进行了详细的对比,涵盖部署、管理和安全性等多个方面。 ... [详细]
  • 本文详细介绍了PHP汽车租赁网站源码的获取方式、本地部署步骤以及汽车租赁系统的功能模块,适合开发者和技术爱好者参考。 ... [详细]
  • 本文探讨了在一个UIViewController中同时存在两个或更多tableView时,若它们的初始Y坐标相同,则可能出现布局异常的问题,并深入解析了automaticallyAdjustsScrollViewInsets属性的作用及其设置方法。 ... [详细]
  • A题简单判断#includeusingnamespacestd;typedeflonglongll;intt;intmain(){cint;whil ... [详细]
  • 解决CSS因MIME类型不匹配导致的加载失败问题
    本文详细介绍了在Web开发过程中,遇到CSS文件因MIME类型不匹配而无法正确加载的问题及其解决方案,适合前端开发者阅读。 ... [详细]
  • 本文深入探讨了JavaScript中原型(prototype)、构造函数以及对象实例之间的关系,并通过实例分析了它们如何相互作用以实现代码复用和继承。 ... [详细]
  • 本章深入探讨了如何在JavaScript游戏中有效地管理和使用图像(精灵)及声音资源,包括加载、绘制和播放等关键步骤。 ... [详细]
  • 本文章介绍了如何将阿拉伯数字形式的金额转换为中国传统的大写形式,适用于财务报告和正式文件中的金额表示。 ... [详细]
  • 本文探讨了C#中所有内置数据类型如何通过默认构造函数初始化,并提供了一个示例方法来展示这些类型的默认值。 ... [详细]
  • 解决Vue Router在HTML5 History模式下本地访问的问题
    探讨了Vue Router在使用HTML5 History模式时遇到的本地访问问题及其解决方案。 ... [详细]
author-avatar
XbZSZl_682
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有