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 dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
} function main(src, cb) {
var image = new Image();
image.src = src + '?v=' + Math.random(); // 处理缓存
image.crossOrigin = "*"; // 支持跨域图片
image.onload = function () {
var base64 = getBase64Image(image);
cb && cb(base64);
}
} main('http://192.168.0.204:8082/rest/v1/newdip/web/background/15.jpg', function (base64) {
// console.log(base64);
document.querySelector(".box").style.backgroundImage = `url(${base64})`;
});

原文地址:http://www.cnblogs.com/minigrasshopper/p/9042686.html

在线图片资源转换成Base64格式的更多相关文章

  1. JS 如何将“在线图片资源”转换成“base64”

    在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...

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

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

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

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

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. 分别用Excel和python进行日期格式转换成时间戳格式

    最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...

  6. TXT电子书格式怎样转换成epub格式

    怎样将TXT电子书格式转换成epub格式呢?因为很多时候不同的阅读器所支持的电子书格式是有所不同,所以电子书格式转换的问题,在生活中也是会经常出现的问题.如果我们需要将TXT电子书格式转换成epub格 ...

  7. Flv视频格式如何转换成MP4格式

    如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...

  8. 如何将AAC音频转换成MP3格式

    我们应该怎样将AAC音频转换成MP3格式呢?AAC是一种专为声音数据设计的文件压缩格式,相对于MP3音频来说更加高效,性价比跟高.但是因为MP3音频格式的通用性,我们还是时常需要将AAC音频转换成MP ...

  9. .net amr格式文件转换成mp3格式文件的方法

    前言:winform端对于音频文件的格式多有限制,大多数不支持amr格式的文件的播放.但是,手机端传过来的音频文件大多数是amr格式的文件,所以,要想在winform客户端支持音频文件的播放,可以通过 ...

随机推荐

  1. 微信小程序页面传值详解

    我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如:   / ...

  2. MySQL 数据备份与同步

    前段时间使用MySQL作为数据存储做了一个小项目.项目上线运行了几十天之后,数据已经越来越多,达到了100多M.用mysqldump每天备份全量数据然后传输到另外一台机器上这种方式进行数据备份,久而久 ...

  3. 以太坊代币,USDT归集流程图

    1.用户充值 600 代币 (网站小助手会及时监听到用户的充值信息,并回调给用户填写的URL地址) 2.会员转账600代币,属于大额转账,开始触发系统的自动汇集程序 注:这里系统检测到会员的地址并没有 ...

  4. 五个简单的shell脚本

    1.编写shell脚本 ex1.sh,提示用户输入用户名,并判断此用户名是否存在. (提示:利用read.grep和/etc/passwd) #!/bin/bash echo "请输入用户名 ...

  5. Linux 下普通用户切换root超级管理员用户的几种方法

    1.在命令行下输入:sudo su ,之后会提示你输入密码 2.此时输入你之前设定的密码既可: 3.但有时会提示你该普通用户不在sudoers文件里 4.此时可以使用以下命令来切换root用户权限:s ...

  6. java 的 数字、汉字 和 字母 的所占字节长度 与 字符长度 (邮件限制50个汉字)

    public static void main(String[] args) {  String a = "餿餿餿餿餿z";  byte[] bytes = a.getBytes( ...

  7. 反射----获取class对象的五种方法

    反射Reflection 配合注解使用会格外强大,反射注解,天生一对 类如何加载? 动态语言和静态语言.我知道是什么,不用总结了. 由于反射,Java可以称为准动态语言. 允许通过反射获得类的全部信息 ...

  8. VulnHub靶场学习_HA: InfinityStones

    HA-InfinityStones Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-infinity-stones,366/ 背景: 灭霸认为,如果他杀 ...

  9. 在众多小说中,Python告诉你哪本小说好看

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 有趣的Python PS:如有需要Python学习资料的小伙伴可以 ...

  10. Java优秀教程

    1.java中局部变量是在栈上分配的: 2.数组是储存在堆上的对象,可以保存多个同类型变量: 3.在Java语言中,所有的变量在使用前必须声明. 4.局部变量没有默认值,所以局部变量被声明后,必须经过 ...