convert image to base64 in javascript
convert image to base64 in javascript
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-05-16
* @modified
*
* @description convert image to base64 in javascript
* @augments
* @example
* @link
*
*/
const log = console.log;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/jpeg');
}
// Select the image
// const img = document.querySelector('#my-image');
// img.addEventListener('load', function (event) {
// const dataUrl = getDataUrl(event.currentTarget);
// console.log(dataUrl);
// });

demo
const log = console.log;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
// return canvas.toDataURL('image/webp');
// return canvas.toDataURL('image/jpeg');
}
img = document.querySelectorAll(`img`)[37];
base64Result = ``;
img.addEventListener('click', function (event) {
console.log(`event`, event)
console.log(`event.currentTarget`, event.currentTarget)
const dataUrl = getDataUrl(event.currentTarget);
console.log(dataUrl);
try {
// window.copy(dataUrl);
base64Result = dataUrl;
log(`auto copy success!`)
} catch (err) {
log(err)
}
});
copy(base64Result);
data:image/png;base64,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
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
convert image to base64 in javascript的更多相关文章
- JavaScript – Convert Image to Base64 String
From: https://bytenota.com/javascript-convert-image-to-base64-string/ his post shows you two approac ...
- csharp:Convert Image to Base64 String and Base64 String to Image
/// <summary> /// 图像转成二进制数组 /// </summary> /// <param name="imageIn">< ...
- convert image to base64
ylbtech-Unitity-cs:convert image to base64 convert image to base64 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1,c ...
- [SCSS] Convert SCSS Variable Arguments to JavaScript
We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...
- Javascript实现base64的加密解密【转】
场景 这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致. ...
- Node.js Base64 Encoding和Decoding
如何在Node.js中encode一个字符串呢?是否也像在PHP中使用base64_encode()一样简单? 在Node.js中有许多encoding字符串的方法,而不用像在JavaScript中那 ...
- nodejs base64 编码解码
普通字符串 编码解码: var b = new Buffer('JavaScript'); var s = b.toString('base64'); // SmF2YVNjcmlwdA== var ...
- Base64 Encoding / Decoding in Node.js
Posted on April 20th, 2012 under Node.js Tags: ASCII, Buffer, Encoding, node.js, UTF So how do you e ...
- Base64 image
[前端攻略]:玩转图片Base64编码 什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样 ...
随机推荐
- python 9学习 高级特性
高级特性 掌握了Python的数据类型. 语句 和函数,基本上就可以编写出很多有用的程序了. 比如构造一个1, 3, 5, 7, ..., 99的列表,可以通过循环实现: L = [] n ...
- 20200927gryz校赛心得
今天gyh学长给我们办了一场校内模拟赛,特地跑来记录一下心得 昨天晚上问了一下lkp学长,听说题目不卡常,不毒瘤,因此我在考试前20分钟仍在若无其事的练习着刚学的强连通分量,丝毫不慌 结果虽然rank ...
- spark整合Phoenix相关案例
spark 读取Phoenix hbase table表到 DataFrame的方式 Demo1: 方式一:spark read读取各数据库的通用方式 方式二:spark.load 方式三:phoen ...
- java获取post请求头部字符串
尝试过很多方式,下面的方式最有效: 用获取数据流的方式,直接获取post过来的所有数据流 // 读取请求内容 BufferedReader br = new BufferedReader(new In ...
- OpenStack (neutron 网络服务)
neutron介绍 提供 OpenStack 虚拟网络服务,也是 OpenStack 重要的核心模块之一,该模块最开始是 Nova 的一部分,叫 nova-network,后来从 Nova 中分离出来 ...
- 秒啊,速来get这9个jupyter实用技巧
1 简介 jupyter notebook与jupyter lab作为广受欢迎的ide,尤其适合开展数据分析相关工作,而掌握它们相关的一些实用技巧,势必会大大提升日常工作效率.而今天我就来给大家介绍9 ...
- Windows下使用poetry和pyproject.toml
0. 题引 为什么要使用poetry? 因为想使用pyproject.toml,并通过pyproject.toml进行依赖包管理,目前pip还不支持,所以poetry是首选 为什么要使用pyproje ...
- hdu3559 Frost Chain (概率dp+记忆化搜索)
Problem Description In the unimaginable popular DotA game, the hero Lich has a wonderful skill: Fros ...
- GPTL L3-003 社交集群(并查集)
数据有些弱,Union函数不判不等也可以过. 题意: 依次给出 n 个人的兴趣,不同人兴趣相交.不同兴趣所属人员相交均属于同一集群,求形成的不相交集群个数及每个集群的人数. 思路: 枚举每个兴趣的人员 ...
- 2019ICPC南昌邀请赛 Sequence
题意:给出n个点的权值,m次操作,操作为1时为询问,每次询问给出 l 和 r ,求 f(l,r).操作为0时为修改权值.f(l,r)=f(l,l)⊕f(l,l+1)⊕⋯⊕f(l,r)⊕f(l+1,l+ ...