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. (Sql Server)SQL FOR XML

    摘要:sql中的for xml语法为表转化为xml提供了很好的支持,当然使用同样的程序语言也能够达到同样的效果,但是有了for xml将使得这一切更加的方便. 主要内容: Select 的查询结果会作 ...

  2. 等待 Redis 应答 Redis pipeline It's not just a matter of RTT

    小结: 1.When pipelining is used, many commands are usually read with a single read() system call, and ...

  3. 算法总结篇---AC自动机

    目录 写在前面 算法流程 引例: 概述: Trie树的构建(第一步) 失配指针(第二步) 构建失配指针 字典树和字典图 多模式匹配 例题 写在前面 鸣谢: OiWiki 「笔记」AC 自动机---Lu ...

  4. (十七)整合 Zookeeper组件,管理架构中服务协调

    整合 Zookeeper组件,管理架构中服务协调 1.Zookeeper基础简介 1.1 基本理论 1.2 应用场景 2.安全管理操作 2.1 操作权限 2.2 认证方式: 2.3 Digest授权流 ...

  5. hadoop知识点总结(三)YARN设计理念及基本架构

    YARN设计理念与基本架构 1,MRv1的局限性:扩展性差,可靠性差,资源利用率低,无法支持多种计算框架 2,YARN基本设计思想 1)基本框架对比 Hadoop1.0中,JobTracker由资源管 ...

  6. .Net技术栈下的异步,你还在用同步方式进行开发吗?

    关于异步,其实是个老生常谈的话题,也是各大公司面试常问的问题之一.本文就几个点来介绍异步解决的问题 注:对多线程的运行的基本机制要了解 1.介绍 有人可能会有疑问,为什么并行,非得用异步.多线程也已可 ...

  7. MySQL的安装、改密及远程连接

    一.下载MySQL压缩包后的安装步骤 将压缩包解压到指定的目录 编辑好配置文件 [mysql] #设置MySQL客户端默认字符集 default-character-set=utf8 [mysqld] ...

  8. Codeforces Round #677 (Div. 3)【ABCDE】

    比赛链接:https://codeforces.com/contest/1433 A. Boring Apartments 题解 模拟即可. 代码 #include <bits/stdc++.h ...

  9. hdu517 Triple

    Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submissio ...

  10. codeforces Looksery Cup 2015 C. The Game Of Parity

    There are n cities in Westeros. The i-th city is inhabited by ai people. Daenerys and Stannis play t ...