Canvas是自由格式图形输出的通用元素。
我知道如何使用 tkinter 更改 Canvas 的突出显示背景的颜色，但我不知道如何更改它的厚度。当我尝试更改 baz['highlightbackgroundthickness'...
我一直在浏览文档和其他帖子，但似乎以前没有人问过这个问题。 有没有办法向使用 Chart.js 制作的图表添加水印或徽标？ 我主要需要这个
Canvas.toDataURL 无法在移动 Safari iOS 上运行？
我尝试了以下方法。我从 svg 图像创建了一个 。然后我将其绘制在画布上，最后将其导出为 PNG 并将生成的 PNG 设置为新的 。它在 Andro 上运行良好...
如何在 PDF 上添加手绘签名？ 我有一份 jquery mobile 报告，客户在最后签名。在画布上绘制签名后，它会显示给客户......
我正在研究画布上 SVG 的图案放置算法，它将是一个 WordPress 插件。我可以将 SVG 放在画布上并计算宽度和高度值，但是，因为 SVG h...
我正在尝试在画布元素上实现缩放功能，其中： 缩放应以鼠标光标为中心。 画布应正确缩放。 滚动条应该更新以反映...
如何停止与canvas imageData的alpha预乘？
有没有办法停止画布数据的 Alpha 通道预乘，或者解决方法？ 我想生成一个图像（在本例中是一些随机的 rgba 值）并将画布保存为 im...
如何在 Three.js 中正确地将 CanvasTexture 适配到网格上？
我正在开发一个项目，涉及将 2D 画布纹理应用到 3D 模型的网格上（具体来说，将模仿 Windows 95 的画布投影到计算机模型的屏幕上）。我的去...
我正在尝试将包含文本和图像的 HTML div 保存为图像。我使用过基于画布的方法，例如 html2canvas，但是生成图像需要花费大量时间，特别是对于较大或
当我缩放画布（通常是多次），然后取消缩放相同次数时，画布不会以相同的方式取消缩放。下面是 1 次放大和 1 次缩小的结果。你看图像永远不会消失...
我可以使用画布内的计算机放大和缩小。但是，我无法在移动设备（智能手机、平板电脑等）上放大和缩小。当我查看文档时，我发现了 &...
将 SVG 添加到 FabricJS 画布时出现类型错误（不可迭代）
我有一个fabricjs画布，我正在尝试向其中添加一个SVG。但无论我做什么，我都会遇到问题。它一直在说： “未捕获（承诺中）类型错误：t 不可迭代”。 让 svg = ` 我有一个fabricjs画布，我正在尝试向其中添加一个SVG。但无论我做什么，我都会遇到问题。它一直在说： “未捕获（承诺中）类型错误：t 不可迭代”。 let svg = `<svg viewBox="-8 -8 136 136"> <path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path> </svg>`; let canvas = new fabric.Canvas("canvas"); let path = fabric.loadSVGFromString(svg, function(objects, options) { let obj = fabric.util.groupSVGElements(objects, options); obj.set({ left: canvas.width / 2 - obj.width / 2, top: canvas.height / 2 - obj.height / 2 }); canvas.add(obj).renderAll(); }); 希望有人可以帮助我 我不确定您使用的是哪个版本，但我已将您的代码添加到可运行的代码片段中，它似乎对我来说工作得很好： let svg = `<svg viewBox="-8 -8 136 136"> <path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path> </svg>`; let canvas = new fabric.Canvas("canvas"); let path = fabric.loadSVGFromString(svg, function(objects, options) { let obj = fabric.util.groupSVGElements(objects, options); obj.set({ left: canvas.width / 2 - obj.width / 2, top: canvas.height / 2 - obj.height / 2 }); canvas.add(obj).renderAll(); }); canvas.renderAll(); <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.js"></script> <canvas id="canvas" width="800" height="600"></canvas><br/>
我写了一段使用dial作为选择器的qml代码，如下： 质量管理语言 组框{ // 颜色：“#2b6684” 布局.fillHeight: true 布局.fillWidth: true 字体.像素大小：...
我正在尝试创建一个具有缩放和边距的画布图，以便我有空间来绘制轴。但是我注意到，当我添加较大的左边距时，例如常量边距 = { 顶部：20，右侧：20，底部：40...
我正在尝试创建一个简单的画布网格，它将适合玩家当前的缩放级别，但也适合一定的画布高度/宽度比例屏幕限制。这是我到目前为止得到的： ...
我正在通过画布将图像剪切成形状。现在我想在它外面添加一个阴影。我怎样才能做到这一点？ var canvas1 = document.createElement("canvas"); var ctx = canvas1.getContext("2...
Compose 中的 android.graphics.Path
我尝试将图像放在切口后面。通过文档，我可以获得剪切路径（LocalView.current.view.rootWindowInsets.displayCutout.cutout.cutoutPath） 但这个路径是android.graphics.Path并且c...
我正在寻找一个可以帮助完善显示星星的代码的人。 我最近看到了异星工厂的更新和他们的网站 - https://factorio.com/galaxy。我对
canvas无法在chrome中生成bmp图像dataurl
我有从视频中绘制图像的代码。这是代码 函数捕获（）{ var video = document.getElementById("videoId"); var 画布 = 捕获(vi...</desc> <question vote="5"> <p>我有从视频中绘制图像的代码。这是代码</p> <pre><code><script type="text/javascript"> function capture() { var video = document.getElementById("videoId"); var canvas = capture(video, 1); var dataURL = canvas.toDataURL("image/bmp", 1.0); console.log("dataurl: "+dataURL); } </script> <body> <input type="button" value="Capture" onClick="capture()"/> <video id="videoId" width="640" height="480"/> </body> </code></pre> <p>在控制台上，dataurl 显示为“data:image/png;base64,...”</p> <p>问题？</p> <p>为什么dataurl生成为png格式？</p> <p>注意： 这发生在 Chrome 浏览器[41.0.2272.89]中。 在 firefox 中，url 是以 bmp 格式生成的。</p> </question> <answer tick="true" vote="11"> <h1>支持</h1> <p>并非所有浏览器都支持 BMP。没有要求支持<strong><a href="https://html.spec.whatwg.org/multipage/scripting.html#serialising-bitmaps-to-a-file" rel="noreferrer">除PNG之外的其他格式</a></strong>（我的重点）：</p> <blockquote> <p>用户代理必须支持 PNG（“image/png”）。用户代理<strong>可能</strong>支持 其他类型。</p> </blockquote> <p>任何无法识别的格式<strong><a href="https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element" rel="noreferrer">将保存为默认PNG</a></strong>。</p> <blockquote> <p>第一个参数（如果提供）控制要显示的图像的类型 返回（例如 PNG 或 JPEG）。默认为image/png；该类型是 如果不支持给定类型，也可以使用。</p> </blockquote> <p>要检查是否支持某种格式，请检查返回的 data-uri 的第一部分：</p> <pre><code> var wantType = "image/bmp"; var dataUri = canvas.toDataURL(wantType); if (dataUri.indexOf(wantType) < 0) { // or use substr etc. data: + mime // Format NOT supported - provide workaround/inform user // See update below for workaround (or replacement) } </code></pre> <h1>解决方法：手动生成低级 BMP </h1> <p>要另存为 BMP，您必须从画布中提取像素数据、格式化文件头、以正确的格式附加数据、创建 Blob 并通过 objectURL 将其提供给用户。</p> <p><strong>用途：</strong></p> <pre><code>var bmpDataUri = CanvasToBMP.toDataURL(canvas); // returns an data-URI </code></pre> <p>还有获取 BMP 图像作为原始图像的选项 <pre><code>ArrayBuffer</code></pre>:</p> <pre><code>var bmpBuffer = CanvasToBMP.toArrayBuffer(canvas); </code></pre> <p>和<pre><code>Blob</code></pre>：</p> <pre><code>var bmpBlob = CanvasToBMP.toBlob(canvas); var url = URL.createObjectURL(bmpBlob); // example objectURL </code></pre> <p><pre><code>Blobs</code></pre> 当然可以与 <pre><code>createObjectURL()</code></pre> 一起使用，它可以用作图像源以及下载目标，并且往往比使用数据 URI 更快，因为它们不需要与 Base 进行编码/解码-64.</p> <p>它写入支持 Alpha 的 32 位 BMP 文件（Firefox 目前忽略 BMP 文件中的 Alpha 通道）。</p> <p>无论如何，这里是-</p> <h1>演示和源码</h1> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>/*! canvas-to-bmp version 1.0 ALPHA (c) 2015 Ken "Epistemex" Fyrstenberg MIT License (this header required) */ var CanvasToBMP = { /** * Convert a canvas element to ArrayBuffer containing a BMP file * with support for 32-bit (alpha). * * Note that CORS requirement must be fulfilled. * * @param {HTMLCanvasElement} canvas - the canvas element to convert * @return {ArrayBuffer} */ toArrayBuffer: function(canvas) { var w = canvas.width, h = canvas.height, w4 = w * 4, idata = canvas.getContext("2d").getImageData(0, 0, w, h), data32 = new Uint32Array(idata.data.buffer), // 32-bit representation of canvas stride = Math.floor((32 * w + 31) / 32) * 4, // row length incl. padding pixelArraySize = stride * h, // total bitmap size fileLength = 122 + pixelArraySize, // header size is known + bitmap file = new ArrayBuffer(fileLength), // raw byte buffer (returned) view = new DataView(file), // handle endian, reg. width etc. pos = 0, x, y = 0, p, s = 0, a, v; // write file header setU16(0x4d42); // BM setU32(fileLength); // total length pos += 4; // skip unused fields setU32(0x7a); // offset to pixels // DIB header setU32(108); // header size setU32(w); setU32(-h >>> 0); // negative = top-to-bottom setU16(1); // 1 plane setU16(32); // 32-bits (RGBA) setU32(3); // no compression (BI_BITFIELDS, 3) setU32(pixelArraySize); // bitmap size incl. padding (stride x height) setU32(2835); // pixels/meter h (~72 DPI x 39.3701 inch/m) setU32(2835); // pixels/meter v pos += 8; // skip color/important colors setU32(0xff0000); // red channel mask setU32(0xff00); // green channel mask setU32(0xff); // blue channel mask setU32(0xff000000); // alpha channel mask setU32(0x57696e20); // " win" color space // bitmap data, change order of ABGR to BGRA while (y < h) { p = 0x7a + y * stride; // offset + stride x height x = 0; while (x < w4) { v = data32[s++]; // get ABGR a = v >>> 24; // alpha channel view.setUint32(p + x, (v << 8) | a); // set BGRA x += 4; } y++ } return file; // helper method to move current buffer position function setU16(data) {view.setUint16(pos, data, true); pos += 2} function setU32(data) {view.setUint32(pos, data, true); pos += 4} }, /** * Converts a canvas to BMP file, returns a Blob representing the * file. This can be used with URL.createObjectURL(). * Note that CORS requirement must be fulfilled. * * @param {HTMLCanvasElement} canvas - the canvas element to convert * @return {Blob} */ toBlob: function(canvas) { return new Blob([this.toArrayBuffer(canvas)], { type: "image/bmp" }); }, /** * Converts the canvas to a data-URI representing a BMP file. * Note that CORS requirement must be fulfilled. * * @param canvas * @return {string} */ toDataURL: function(canvas) { var buffer = new Uint8Array(this.toArrayBuffer(canvas)), bs = "", i = 0, l = buffer.length; while (i < l) bs += String.fromCharCode(buffer[i++]); return "data:image/bmp;base64," + btoa(bs); } }; // -------- DEMO CODE ------------- var canvas = document.querySelector("canvas"), w = canvas.width, h = canvas.height, ctx = canvas.getContext("2d"), gr = ctx.createLinearGradient(0, 0, w, h), img = new Image(); gr.addColorStop(0, "hsl(" + (Math.random() * 360) + ", 90%, 70%)"); gr.addColorStop(1, "hsl(" + (Math.random() * 360) + ", 100%, 30%)"); ctx.fillStyle = gr; ctx.fillRect(0, 0, w, h); // append image from the data-uri returned by the CanvasToBMP code below: img.src = CanvasToBMP.toDataURL(canvas); document.body.appendChild(img);</code></pre> <pre><code><h2>Canvas left, BMP from canvas as image right</h2> <canvas width="299" height="200"></canvas></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>转换为 bmp 24bpp 受到用户1693593答案的启发：</p> <p>静态 toArrayBuffer24bpp（画布：HTMLCanvasElement）：ArrayBuffer {</p> <pre><code> var w = canvas.width, h = canvas.height, w4 = w * 4, idata = canvas.getContext("2d").getImageData(0, 0, w, h), data32 = new Uint32Array(idata.data.buffer), // 32-bit representation of canvas stride24 = Math.floor((24 * w + 31) / 32) * 4, // row length incl. padding pixelArraySize = stride24 * h, // total bitmap size fileLength = 122 + pixelArraySize, // header size is known + bitmap file = new ArrayBuffer(fileLength), // raw byte buffer (returned) view = new DataView(file), // handle endian, reg. width etc. pos = 0, x, y = 0, p, s = 0, v, r, g, b, x2; // write file header setU16(0x4d42); // BM setU32(fileLength); // total length pos += 4; // skip unused fields setU32(0x7a); // offset to pixels // DIB header setU32(108); // header size setU32(w); setU32(-h >>> 0); // negative = top-to-bottom setU16(1); // 1 plane setU16(24); // 24-bits setU32(0); // BI_RGB = 0 setU32(pixelArraySize); // bitmap size incl. padding (stride x height) setU32(2835); // pixels/meter h (~72 DPI x 39.3701 inch/m) setU32(2835); // pixels/meter v pos += 8; // skip color/important colors setU32(0xff0000); // red channel mask setU32(0xff00); // green channel mask setU32(0xff); // blue channel mask setU32(0xff000000); // alpha channel mask setU32(0x57696e20); // " win" color space // bitmap data, change order of ABGR to BGRA while (y < h) { p = 0x7a + y * stride24; // offset + stride x height x = 0; x2 = 0 while (x < w4) { v = data32[s++]; // get ABGR b = v & 0xff g = (v >> 8) & 0xff r = (v >> 16) & 0xff view.setUint8(p + x2++, r) view.setUint8(p + x2++, g) view.setUint8(p + x2++, b) x += 4; } y++ } return file; // helper method to move current buffer position function setU16(data) {view.setUint16(pos, data, true); pos += 2} function setU32(data) {view.setUint32(pos, data, true); pos += 4} </code></pre> <p>}</p> </answer> </body></html>
我对游戏开发还很陌生。事实上，这是我创建的第一个游戏。我的游戏是一个简单的气球爆破游戏。问题是我有一个泵资产，可以在 cl 上给气球充气......