base64 相关问题

Base64 PNG 数据到 HTML5 画布

我想将 Base64 编码的 PNG 图像加载到 canvas 元素。我有这个代码： <p>我想将 Base64 编码的 PNG 图像加载到 canvas 元素。我有这个代码：</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id=&#34;c&#34;&gt;&lt;/canvas&gt; &lt;script type=&#34;text/javascript&#34;&gt; var canvas = document.getElementById(&#34;c&#34;); var ctx = canvas.getContext(&#34;2d&#34;); data = &#34;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC&#34;; ctx.drawImage(data, 0, 0); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>在 Chrome 8 中我收到错误：<pre><code>Uncaught TypeError: Type error</code></pre></p> <p>在 Firefox 的 Firebug 中：“对象的类型与与该对象关联的参数的预期类型不兼容”代码：“17”</p> <p>base64是我在GIMP中制作的5x5px黑色PNG正方形，并在GNU/Linux的程序base64中将其转换为base64。</p> </question> <answer tick="true" vote="216"> <p>从外观上看，您实际上需要像这样向drawImage传递一个图像对象</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var canvas = document.getElementById(&#34;c&#34;); var ctx = canvas.getContext(&#34;2d&#34;); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); }; image.src = &#34;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC&#34;;</code></pre> <pre><code>&lt;canvas id=&#34;c&#34;&gt;&lt;/canvas&gt;</code></pre> </div> </div> <p></p> <p>我在 chrome 中尝试过，效果很好。</p> </answer> <answer tick="false" vote="22"> <p>Jerryf 的答案很好，除了一个缺陷。<br/></p> <blockquote> <p>onload事件应该设置在src之前。有时src可以 立即加载并且永远不会触发 onload 事件。</p> </blockquote> <p>（就像 Totty.js 指出的那样。）</p> <pre><code>var canvas = document.getElementById(&#34;c&#34;); var ctx = canvas.getContext(&#34;2d&#34;); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); }; image.src = &#34;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC&#34;; </code></pre> <p>....</p> </answer> <answer tick="false" vote="0"> <p>更现代的版本。所提供的解决方案的问题之一是您的内容安全策略必须允许在图像 src 中设置数据：协议。</p> <p>避免使用image.src。使用 Blob 和 createImageBitmap 代替，例如</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> function base64ToBlob(base64, mimeType) { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i &lt; byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mimeType }); } const canvas = document.getElementById(&#34;c&#34;); const ctx = canvas.getContext(&#39;2d&#39;); const b64 = &#39;iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII&#39;; const mime = &#39;image/png&#39;; const blob = base64ToBlob(b64, mime); createImageBitmap(blob).then((imageBitmap) =&gt; { ctx.drawImage(imageBitmap, 0, 0); });</code></pre> <pre><code>&lt;canvas id=&#34;c&#34; /&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

解码base64编码的字符串

我有一个关于解码base64编码的url的问题： 导入base64 url64="aHR0cDovLzR1ZnJlZS50ay9tZWRpYTcyMzY0Ni9mdWVuZi8wMzYubXAzA" FinalUrl=base64.b64decode(url64) 行不通！类型错误...

Python：解码base64编码的字符串

我是Python新手，有一个关于解码base64编码的url的问题： 导入base64 url64="aHR0cDovLzR1ZnJlZS50ay9tZWRpYTcyMzY0Ni9mdWVuZi8wMzYubXAzA" FinalUrl=base64.b64decode(url64) 不会...

Powershell 形式将字符串转换为 Base64 并返回并写入文件

我编写了这个函数，它将以 Base64 格式对字符串进行编码/解码。 我知道我所要求的最终目标可能没有意义，但这是我必须做的事情。 我有...

Qt 5 中字符串的 Base64 编码

我正在尝试在 Qt5 中对 QString 进行 Base64 编码。但是，我收到一条错误消息，指出在 QString b64string = base64_encode(src); 行上找不到标识符。 #包括 #包括...

如何将base64字符串作为Python脚本的参数传递？

我试图在 python 脚本中传递一个以 64 为基数的字符串作为参数。 我正在使用 Pycharm，当我尝试将其作为参数发送时，我得到以下信息： 运行“preprocess_image”时出错：无法...

如何在 Javascript 与 Python 中从 Base64 atob 获得相同的结果

我在网上找到了一些代码，我正在尝试将其编码为base64。我知道Python有base64.urlsafe_b64decode()，但我想更多地了解正在发生的事情。 JS...

将 Javascript atob 实现 for 循环移植到 Python

我在网上找到了一些代码，我正在尝试将其编码为base64。我知道Python有base64.urlsafe_b64decode()，但我想更多地了解正在发生的事情。 JS...

在 Rust 中将 u8 数组转换为 Base64 字符串

我有一个 Rust 中的 u8 数组。我该如何将它们转换为将它们表示为 base64 的字符串？

如何将 Promise 数组（原始 File 数组）转换为字符串值数组？

简而言之，我有一个将 File 类型值转换为 base64 字符串类型值的函数（如 How to conversion file to base64 in JavaScript? 所建议的那样）： 导出 const customConvertFileToBase64String = (

如何通过超链接直接在浏览器中打开base64 svg

我得到了一个base64 svg img和html链接，例如： img 但是当我单击 img 链接时，会出现一个新的

如何在 Itextsharp c# 中使用 Base64 图像

在此代码片段中，我用它来将 HTML 转换为 PDF，然后转换回 MemoryStream。 私有 MemoryStream createPDF(字符串 html) { 尝试 { MemoryStream msOutput...

项目导入Eclipse时无法解析import sun.misc.BASE64Decoder

我有一个很久以前实现的旧项目，它使用sun.misc.BASE64Decoder和sun.misc.BASE64Encoder。当我将项目导入 Eclipse 时，它向我展示了它们的

Sharepoint 在 Azure 逻辑应用中使用 Base64 内容更新 excel 文件？

我有一个 Azure 逻辑应用程序，它获取文件内容，将其编码为 Base64，然后将其发送到 Azure 函数。然后，该函数以 base64 格式返回处理后的 Excel 数据。 怎么会...

如何使用unix命令对base64和base64URL中的数据进行编码和解码？

Base64编码可以通过以下方式实现 $ echo Some_data_to_be_converted | 64位基数 U29tZV9kYXRhX3RvX2JlIF9jb252ZXJ0ZWQK Base64解码可以通过以下方式实现 $回声U29tZV9kYXRhX3RvX2JlIF9jb252ZXJ0ZWQK |

使用 JavaScript 将 JSON 转换为 Base64，无需依赖项

我在阅读了一些关于该主题的帖子后，其中一些建议 atob/btoa 的 bug 太多，无法在产品中使用。 mdn 没有针对它们的弃用徽章。我需要一个零依赖 JavaScript 解决方案

用于检测 Base64 编码字符串的 RegEx

我需要在我的应用程序中检测@base64形式的字符串（例如@VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw==）。 @ 必须位于开头，base64 编码字符串的字符集是 a-z、A-...

如何将base64图像添加到tiptap编辑器？

我在vue和nuxt js中使用tiptap编辑器，我希望用户上传图像，但通常的方法是从提示中询问他们的url，然后显示或加载它。我想要一个输入标签，然后

如何在C#中实现Base64 URL安全编码？

我想用C#实现Base64 URL安全编码。在 Java 中，我们有通用的 Codec 库，它为我提供了 URL 安全编码字符串。如何使用 C# 实现相同的效果？ 字节[] toEncodeAsBytes =

使用 jspdf 创建的 Pdf 文件太大

我正在使用 jspdf 在浏览器中创建 PDF。我有多个图表，其中 svg 作为图表数据。为了将数据添加到 pdf，我使用 canvas 将 svg 转换为 png，然后使用 can...