javascript从image转换为base64位编码的String_javascript技巧-js教程-PHP中文网

Input

Output

首页

web前端

js教程

javascript从image转换为base64位编码的String_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

base64 image 编码

最近需要把app的微信分享方法开放给webview，涉及到分享的图片，如果通过传送图片连接，那将要在后台再取一次图片文件，会影响速度，我选择webview把image以base64位编码的方式传给本地应用。下面是实现的参考代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Image to Base64 - jsFiddle demo by handtrix</title> 

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> 

<link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow" > 

<style type='text/css'> 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); 

body{ 
padding: 20px; 
} 
</style> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
/** 
* convertImgToBase64 
* @param {String} url 
* @param {Function} callback 
* @param {String} [outputFormat='image/png'] 
* @author HaNdTriX 
* @example 
convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){ 
console.log('IMAGE:',base64Img); 
}) 
*/ 
function convertImgToBase64(url, callback, outputFormat){ 
var canvas = document.createElement('CANVAS'); 
var ctx = canvas.getContext('2d'); 
var img = new Image; 
img.crossOrigin = 'Anonymous'; 
img.onload = function(){ 
canvas.height = img.height; 
canvas.width = img.width; 
ctx.drawImage(img,0,0); 
var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
callback.call(this, dataURL); 
// Clean up 
canvas = null; 
}; 
img.src = url; 
} 

$('#img2b64').submit(function(event){ 
var imageUrl = $(this).find('input[name=url]').val(); 
console.log('imageUrl', imageUrl); 
convertImgToBase64(imageUrl, function(base64Img){ 
$('.output') 
.find('textarea') 
.val(base64Img) 
.end() 
.find('a') 
.attr('href', base64Img) 
.text(base64Img) 
.end() 
.find('img') 
.attr('src', base64Img); 
}); 

event.preventDefault(); 
}); 

});//]]> 

</script> 
</head> 
<body> 
<h2 id="Input">Input</h2> 
<form class="input-group" id="img2b64"> 
<input 
type="url" 
name="url" 
class="form-control" 
placeholder="Insert an IMAGE-URL" 
value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" 
required> 
<span class="input-group-btn"> 
<input 
type="submit" 
class="btn btn-default"> 
</span> 
</form> 
<hr> 
<h2 id="Output">Output</h2> 
<div class="output"> 
<textarea class="form-control"></textarea><br> 
<a></a><br><br> 
<img  alt="javascript从image转换为base64位编码的String_javascript技巧" ><br> 
</div> 
</body> 
</html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7647

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

Related knowledge

11个常见的分类特征的编码技术 Apr 12, 2023 pm 12:16 PM

机器学习算法只接受数值输入，所以如果我们遇到分类特征的时候都会对分类特征进行编码，本文总结了常见的11个分类变量编码方法。1、ONE HOT ENCODING最流行且常用的编码方法是One Hot Enoding。一个具有n个观测值和d个不同值的单一变量被转换成具有n个观测值的d个二元变量，每个二元变量使用一位（0，1）进行标识。例如：编码后最简单的实现是使用pandas的' get_dummiesnew_df=pd.get_dummies(columns=[‘Sex’], data=df)2、

如何在 Windows 11 上安全禁用 Windows Modules Installer Worker Apr 13, 2023 pm 03:43 PM

无论您使用的是旧计算机还是需要您的 PC 同时运行许多任务，您都可能希望禁用 Windows 模块安装程序工作程序。原因是 Windows 模块安装程序工作人员对您的磁盘、CPU 和内存施加了很高的负载。您可能会使用最好的软件来修复高 CPU 使用率，但一些报告显示它甚至可能会占用 100% 的 CPU 使用率。虽然它可以帮助您维护一个更安全和可靠的系统，但它会付出代价。因此，您可以决定保留或禁用它以避免性能问题。在本文中，我们将详细探讨什么是 Windows 模块安装程序工作人员以及如何启用或

utf8编码汉字占多少字节 Feb 21, 2023 am 11:40 AM

utf8编码汉字占3个字节。在UTF-8编码中，一个中文等于三个字节，一个中文标点占三个字节；而在Unicode编码中，一个中文（含繁体）等于两个字节。UTF-8使用1~4字节为每个字符编码，一个US-ASCIl字符只需1字节编码，带有变音符号的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文等字母则需要2字节编码。

知识图谱：大模型的理想搭档 Jan 29, 2024 am 09:21 AM

大型语言模型（LLM）具有生成流畅和连贯文本的能力，为人工智能的对话、创造性写作等领域带来了新的前景。然而，LLM也存在一些关键局限。首先，它们的知识仅限于从训练数据中识别出的模式，缺乏对世界的真正理解。其次，推理能力有限，不能进行逻辑推理或从多个数据源融合事实。面对更复杂、更开放的问题时，LLM的回答可能变得荒谬或矛盾，被称为“幻觉”。因此，尽管LLM在某些方面非常有用，但在处理复杂问题和真实世界情境时，仍存在一定的局限性。为了弥补这些差距，近年来出现了检索增强生成（RAG）系统，其核心思想是

常见的几种编码方式 Oct 24, 2023 am 10:09 AM

常见的编码方式有ASCII编码、Unicode编码、UTF-8编码、UTF-16编码、GBK编码等。详细介绍：1、ASCII编码是最早的字符编码标准，使用7位二进制数表示128个字符，包括英文字母、数字、标点符号以及控制字符等；2、Unicode编码是一种用于表示世界上所有字符的标准编码方式，它为每个字符分配了一个唯一的数字码点；3、UTF-8编码等等。

如何免费使用Bing Image Creator Feb 27, 2024 am 11:04 AM

本文将介绍七种利用免费的BingImageCreator获得高质量输出的方法。BingImageCreator（现称为MicrosoftDesigner的ImageCreator）是一个出色的在线人工智能艺术生成器之一。它能根据用户的提示生成高度逼真的视觉效果。提示越具体、清晰和创意，生成的效果也会更出色。BingImageCreator在创建高质量图像方面取得了重大进展。它现在使用Dall-E3培训模式，显示出更高水平的细节和现实主义。然而，它能否始终如一地生成高清结果取决于几个因素，包括快速

小米手机image怎么删除 Mar 02, 2024 pm 05:34 PM

小米手机image怎么删除?在小米手机中是可以删除image，但是多数的用户不知道image如何的删除，接下来就是小编为用户带来的小米手机image删除方法教程，感兴趣的用户快来一起看看吧！小米手机image怎么删除1、首先打开小米手机中的【相册】功能;2、然后勾选不需要的图片，点击右下角的【删除】按钮;3、之后点击最顶部的【相册】进入到专区，选择【回收站】;4、接着直接点击下图所示的【清空回收站】;5、最后直接点击【永久删除】即可完成。

PHP编码小技巧：如何生成带有防伪验证功能的二维码？ Aug 17, 2023 pm 02:42 PM

PHP编码小技巧：如何生成带有防伪验证功能的二维码？随着电子商务和互联网的发展，二维码越来越被广泛应用于各行各业。而在使用二维码的过程中，为了确保产品的安全性和防止伪造，为二维码添加防伪验证功能是十分重要的一环。本文将介绍如何使用PHP生成带有防伪验证功能的二维码，并附上相应代码示例。在开始之前，我们需要准备以下几个必要的工具和库：PHPQRCode：PHP

See all articles

javascript从image转换为base64位编码的String_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题