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

https://cdn.xgqfrms.xyz/

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的更多相关文章

  1. JavaScript – Convert Image to Base64 String

    From: https://bytenota.com/javascript-convert-image-to-base64-string/ his post shows you two approac ...

  2. csharp:Convert Image to Base64 String and Base64 String to Image

    /// <summary> /// 图像转成二进制数组 /// </summary> /// <param name="imageIn">< ...

  3. convert image to base64

    ylbtech-Unitity-cs:convert image to base64 convert image to base64 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1,c ...

  4. [SCSS] Convert SCSS Variable Arguments to JavaScript

    We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...

  5. Javascript实现base64的加密解密【转】

    场景 这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致. ...

  6. Node.js Base64 Encoding和Decoding

    如何在Node.js中encode一个字符串呢?是否也像在PHP中使用base64_encode()一样简单? 在Node.js中有许多encoding字符串的方法,而不用像在JavaScript中那 ...

  7. nodejs base64 编码解码

    普通字符串 编码解码: var b = new Buffer('JavaScript'); var s = b.toString('base64'); // SmF2YVNjcmlwdA== var ...

  8. 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 ...

  9. Base64 image

    [前端攻略]:玩转图片Base64编码 什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样 ...

随机推荐

  1. net.core.somaxconn net.ipv4.tcp_max_syn_backlog

    Linux参数-net.core.somaxconn与net.ipv4.tcp_max_syn_backlog_梁海江的博客-CSDN博客_net.ipv4.tcp_max_syn_backlog h ...

  2. 「笔记」AC 自动机

    目录 写在前面 定义 引入 构造 暴力 字典图优化 匹配 在线 离线 复杂度 完整代码 例题 P3796 [模板]AC 自动机(加强版) P3808 [模板]AC 自动机(简单版) 「JSOI2007 ...

  3. Mysql数据库版本高低引起的group by问题

    低版本的Mysql,group by限制性比较小,在进行group by时,select的对象可包含多个,但是换成高版本5.6以上好像,使用group by 以后,select的对象必须也已经被聚合, ...

  4. MapReduce编程练习(三),按要求不同文件名输出结果

    问题:按要求文件名输出结果,比如这里我要求对一个输入文件中的WARN,INFO,ERROR,的信息项进行分析,并分别输入到对应的以WARN,INFO.ERROR和OTHER开头的结果文件中,其中结果文 ...

  5. Flink-v1.12官方网站翻译-P002-Fraud Detection with the DataStream API

    使用DataStream API进行欺诈检测 Apache Flink提供了一个DataStream API,用于构建强大的.有状态的流式应用.它提供了对状态和时间的精细控制,这使得高级事件驱动系统的 ...

  6. Linux下统计CPU核心数量

    首先第一步,cat /proc/cpuinfo processor : 0 vendor_id : GenuineIntel cpu family : 6 model : 45 model name ...

  7. MySQL常用SQL语句2

    -- 1创建student和score表 CREATE TABLE Student( Id INT(10) PRIMARY KEY auto_increment, Name VARCHAR(20) N ...

  8. 2019 沈阳网络赛 D Fish eating fruit ( 树形DP)

    题目传送门 题意:求一颗树中所有点对(a,b)的路径长度,路径长度按照模3之后的值进行分类,最后分别求每一类的和 分析:树形DP \(dp[i][j]\) 表示以 i 为根的子树中,所有子节点到 i ...

  9. Codeforces Round #316 (Div. 2) D. Tree Requests(dsu)

    题目链接 题意:对于m次询问 求解以vi为根节点 深度为hi的的字母能不能组合成回文串. 思路:暴力dsu找一边 简直就是神技! #include<bits/stdc++.h> #defi ...

  10. HDU6321 Dynamic Graph Matching【状压DP 子集枚举】

    HDU6321 Dynamic Graph Matching 题意: 给出\(N\)个点,一开始没有边,然后有\(M\)次操作,每次操作加一条无向边或者删一条已经存在的边,问每次操作后图中恰好匹配\( ...