个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我真的很难编写一个函数来获取图像的 Base64 编码。由于此函数将成为使用 jsPDF.js 从网站即时生成 PDF 的更大脚本的一部分，因此能够计算这些 Base64 编码作为函数的结果非常重要。图像将托管在同一服务器上，因此不存在同源问题。我知道canvas元素的.toDataURL()方法可以做到这一点，而且我也知道图像需要完全加载才能正确获取数据URL，所以我编写了这个函数
// Encode image to Base64
function encodeBase64(url, format)
{
var image = new Image(),
canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
image.src = url;
image.onload = function ()
{
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
var dataURL = canvas.toDataURL(format);
alert(dataURL);
};
}
问题是我不知道如何从 onload 函数中“提取”dataURL 值，以便encodeBase64 函数仅返回该值，然后我可以将其放入数组中。警报正确返回该字符串，因此我确信代码可以正常工作，但是如果我尝试编写任何其他语句(例如“return dataURL”或类似的语句)，我只会得到 未定义 值。请帮忙。
最佳答案
首先将所有图像加载到数组中。
然后使用 canvas 创建 dataURL，并将 dataURL 加载到第二个数组中。
示例代码和演示:http://jsfiddle.net/m1erickson/fbdb3qbw/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// array for dataURLs
var dataURLs=[];
// put the paths to your images in imageURLs[]
var imageURLs=[];
// push all your image urls!
imageURLs.push({url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sun.png",format:null});
imageURLs.push({url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp1.png",format:'image/jpeg'});
// the loaded images will be placed in images[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
img.format=imageURLs[i].format;
imgs.push(img);
dataURLs.push('');
img.index=imgs.length-1;
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i].url;
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
// now loop through each img and create its dataURL
for(var i=0;i<imgs.length;i++){
var img=imgs[i];
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
dataURLs[img.index] = canvas.toDataURL(img.format);
}
// Demo: report the results to the console
console.log(dataURLs);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Fetch dataURLs from images (see results in the console)</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
[添加:从文本区域中提取网址]
以下是如何从文本区域中提取网址。
(#loadImages 是一个按钮，当您的用户在文本框中输入网址时就会按下该按钮)。
我还没有查看 jsPDF 源代码，因此无法解决您的 dims 问题。
$('#loadImages').click(function(){
var inputText = document.getElementsByTagName("textarea")[0].value.split("\n");
for(var i = 0; i < inputText.length; i++){
imageURLs.push({url: inputText[i],format:"image/jpeg"});
}
loadAllImages(start);
});
关于javascript - 在 Javascript 中返回图像的数据 URI Base64 字符串的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25851540/
25
4
0
如果我不定义自己的构造函数，Base *b = new Base; 与 Base *b = new Base(); 之间有什么区别吗？ 最佳答案 初始化是标准中要遵循的一种 PITA...然而，这两个
是否有现成的函数可以在 C# 中进行基本转换？我希望将以 26 为基数和以 27 为基数的数字转换为以 10 为基数。我可以在纸上完成，但我不是一个非常有经验的程序员，如果可能的话，我宁愿不要从头开始
JNA 中'base'是什么意思 Pointer.getPointerArray(long base) Pointer.getStringArray(long base) ? JNA Document
我正在做一个将数字从 10 进制转换为 2 进制的基本程序。我得到了这段代码: #include #include #include #include using namespace std;
“假设以下代码: public class MultiplasHerancas { static GrandFather grandFather = new GrandFather();
当我分析算法的时候，我突然问自己这个问题，如果我们有三元计算机时间复杂度会更便宜吗？还是有任何基础可以让我们构建计算机，这样时间复杂度分析就无关紧要了？我在互联网上找不到太多，但是基于三元的计算机在给
一个简化的场景。三个类，GrandParent，Parent 和 Child。我想要做的是利用 GrandParent 和 Parent 构造函数来初始化一个 Child 实例。 class Gran
我编写了一个简单的函数来将基数为 10 的数字转换为二进制数。我编写的函数是我使用我所知道的简单工具的最佳尝试。我已经在这个网站上查找了如何执行此操作的其他方法，但我还不太了解它。我确定我编写的函数非
我尝试了以下代码将数字从 base-10 转换为另一个 base。如果目标基地中没有零(0)，它就会工作。检查 79 和 3 并正确打印正确的 2221。现在尝试数字 19 和 3，结果将是 21 而
这个问题在这里已经有了答案: Is Big O(logn) log base e? (7 个答案) 关闭 8 年前。 Intro 练习 4.4.6 的大多数解决方案。算法第三版说，n*log3(n)
如何判断基类(B)的指针是否(多态)重写了基类的某个虚函数？ class B{ public: int aField=0; virtual void f(){}; }; class C
我测试了这样的代码: class A { public A() { } public virtual void Test () { Console.WriteL
两者都采用相同的概念:定义一些行和列并将内容添加到特定位置。但是 Grid 是最常见的 WPF 布局容器，而 html 中基于表格的布局是 very controversial .那么，为什么 WPF
我试图在 JS 中“获得”继承。我刚刚发现了一种基本上可以将所有属性从一个对象复制到另一个对象的简洁方法: function Person(name){ this.name="Mr or Miss
class A { public override int GetHashCode() { return 1; } } class B : A { pu
我有一个 Base32 信息哈希。例如IXE2K3JMCPUZWTW3YQZZOIB5XD6KZIEQ ，我需要将其转换为base16。 我怎样才能用 PHP 做到这一点？ 我的代码如下所示: $ha
我已经使用其实验界面对 Google Analytics 进行了一些实验，一切似乎都运行良好，但我无法找到 Google Analytics 属性如何达到变体目标的答案，即归因 session - 基
if (state is NoteInitial || state is NewNote) return ListView.builder(
MSVC、Clang 和 GCC 不同意此代码: struct Base { int x; }; struct Der1 : public Base {}; struct Der2 : public
我已经尝试构建一个 Base 10 到 Base 2 转换器... var baseTen = window.prompt("Put a number from Base 10 to conver
我是一名优秀的程序员,十分优秀！