- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有这样一张图片
<img id='my_img' src='www.someimage.com'>
我创建了这个函数来获取 IMG 节点并将其转换为 Canvas 和 base 64 数据
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, "");
}
函数调用方式如下
getBase64Image(document.getElementById("my_img"));
但是当我发送一张图片时,它只返回一个被裁剪的图片,它只返回图片的左上角,这里是它为这张图片返回的内容
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
这是图片
为什么返回的图片被裁剪了?
最佳答案
我认为 promises 在这些情况下很有用:
function getBase64Image(url) {
var promise = new Promise(function(resolve, reject) {
var img = new Image();
// To prevent: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
img.crossOrigin = "Anonymous";
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
resolve(dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, ""));
};
img.src = url;
});
return promise;
};
// CORS (Cross-Origin Resource Sharing) is enabled for Facebook images; but that's not true for
// all images out there!
var url = "https://scontent.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/12294845_10153267425828951_7985428593018522641_n.jpg?oh=2bb55736fce035311c3d60a1ca559426&oe=57210504";
var promise = getBase64Image(url);
promise.then(function (dataURL) {
console.log(dataURL);
});
https://jsfiddle.net/5tjov243/2/
资源:
关于javascript - 将 <IMG> 转换为 base64 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34124604/
如果我不定义自己的构造函数,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
我是一名优秀的程序员,十分优秀!