canvas 相关问题

我想将 Base64 编码的 PNG 图像加载到 canvas 元素。我有这个代码： <p>我想将 Base64 编码的 PNG 图像加载到 canvas 元素。我有这个代码：</p> <pre><code><html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> </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("c"); var ctx = canvas.getContext("2d"); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); }; image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";</code></pre> <pre><code><canvas id="c"></canvas></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("c"); var ctx = canvas.getContext("2d"); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); }; image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; </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 < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mimeType }); } const canvas = document.getElementById("c"); const ctx = canvas.getContext('2d'); const b64 = 'iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII'; const mime = 'image/png'; const blob = base64ToBlob(b64, mime); createImageBitmap(blob).then((imageBitmap) => { ctx.drawImage(imageBitmap, 0, 0); });</code></pre> <pre><code><canvas id="c" /></code></pre> </div> </div> <p></p> </answer> </body></html>

html canvas png base64

回答 0 投票 0

将画布上创建的图像发送到后端服务器

我有画布，现在我用它下载了jpg文件。 var a = document.createElement('a'); a.href = ref_canvas_release.current.toDataURL('image/jpeg', 0.85); a.download = GlobalParam.fil...

javascript canvas jpeg

回答 1 投票 0

将 canvas.toDataURL DOMString url 转换为 blob，

我正在使用cropperjs来裁剪图像使用 getCroppedCanvas 方法获取对裁剪后的画布图像的引用使用canvas方法canvas.toDataURL将图像压缩成jpeg文件...

javascript html canvas

回答 3 投票 0

HTML5 Canvas 使黑色透明

我有大量黑色背景的图像，这里是一个例子：是否有可能通过Javascript忽略黑色（#000000）并将其绘制在画布上？看起来像...

javascript html canvas transparent alpha

回答 4 投票 0

使用 PIXI.js 有一个非常基本的探针，无法在屏幕上渲染精灵

显然我忽略了关于 pixi 的一些非常基本的东西。我正在尝试在场景中渲染单个精灵我正在使用资源加载器加载纹理、创建精灵并将其渲染到