在线图片资源转换成Base64格式
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格式的更多相关文章
- JS 如何将“在线图片资源”转换成“base64”
在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- javascript-文件File转换成base64格式
不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...
- java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
- 分别用Excel和python进行日期格式转换成时间戳格式
最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...
- TXT电子书格式怎样转换成epub格式
怎样将TXT电子书格式转换成epub格式呢?因为很多时候不同的阅读器所支持的电子书格式是有所不同,所以电子书格式转换的问题,在生活中也是会经常出现的问题.如果我们需要将TXT电子书格式转换成epub格 ...
- Flv视频格式如何转换成MP4格式
如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...
- 如何将AAC音频转换成MP3格式
我们应该怎样将AAC音频转换成MP3格式呢?AAC是一种专为声音数据设计的文件压缩格式,相对于MP3音频来说更加高效,性价比跟高.但是因为MP3音频格式的通用性,我们还是时常需要将AAC音频转换成MP ...
- .net amr格式文件转换成mp3格式文件的方法
前言:winform端对于音频文件的格式多有限制,大多数不支持amr格式的文件的播放.但是,手机端传过来的音频文件大多数是amr格式的文件,所以,要想在winform客户端支持音频文件的播放,可以通过 ...
随机推荐
- JVM基础结构与字节码执行引擎
JVM基础结构 JVM内部结构如下:栈.堆. 栈 JVM中的栈主要是指线程里面的栈,里面有方法栈.native方法栈.PC寄存器等等:每个方法栈是由栈帧组成的:每个栈帧是由局部变量表.操作数栈等组成. ...
- Chrome截图截满滑动栏,QQ截长屏,录屏
1.Chrome截图截满滑动栏 一般我们截图都是用QQ的Ctrl+shift+A,但是网页不好截,这里我们可以用Chrome控制台来截全网页: F12或Ctrl+shift+i打开控制台: 点击一下控 ...
- App 性能测试分享
在本文内,主要以Android性能测试为主进行分析 一.性能测试包含 1.启动时间测试 测试场景包括 - - - 首次安装启动时间.冷启动.热启动测试 2.页面响应时间: 用户从点击一个控件, ...
- idea 本地代码被覆盖问题
一不小心误操作先执行更新操作怎么办!辛辛苦苦工作一下午的代码全被覆盖了,心里紧张死了!不过别着急,还好用的idea,请看如图操作! 1.点击鼠标右键 => 2.点击Local History = ...
- 第一章构建vue项目,代码仓库管理
一.安装node.js.vue-cli脚手架 1.安装node.js 下载地址:https://nodejs.org/en/download 查看版本号 node -v .npm -v 出现版本号即安 ...
- ClickHouse学习系列之三【配置文件说明】
背景 最近花了些时间看了下ClickHouse文档,发现它在OLAP方面表现很优异,而且相对也比较轻量和简单,所以准备入门了解下该数据库系统.在介绍了安装和用户权限管理之后,本文对其配置文件做下相关的 ...
- IP和端口查询
- Linux服务器架设篇,DNS服务器(一),基础知识
一.端口 DNS监听端口 注意: DNS通常是以UDP协议来进行数据传输协议的,但是若没有办法查询到完整的信息是.DNS的daemon是named,它会启动TCP和UDP的53端口,所以启用DSN服务 ...
- Linux网络安全篇,配置Yum源(一),本地Yum源
1.创建挂载目录 mkdir /mnt/cdrom 2.挂载软件源cdrom mount /dev/cdrom /mnt/cdrom/ 3.建立本地yum源资源文件夹 mkdir /usr/local ...
- IDEA使用技巧,如何在JSP中创建Servlet“小程序”
步骤 1.新建一个java类,实现Servlet接口 2.实现接口中的抽象方法: 3.在web.xml文件中配置好servlet <web-app ......> <servlet& ...