html5-canvas 相关问题

Canvas是一个HTML元素，允许2D和3D中的2D形状，3D形状，位图图像和动画的动态，可编写脚本的渲染。

我想使用JavaScript在嵌入svg（在html5页面中）的html5画布上绘图。如果这样做的话，在“cvs”上绘图就可以很好地工作：我想使用 JavaScript 在嵌入 svg 的 html5 画布上绘制（在 html5 页面中）。如果这样做的话，在“cvs”上绘图就可以很好地工作： <svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <foreignObject x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </svg> 但如果使用画布完成并在 use 标签中引用则不会。绘图根本就没有出现。在 Safari 中检查该元素告诉我，use 元素的尺寸为 NaN x NaN； Firebug 说 0x0。 <svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <defs> <foreignObject id="circles" x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </defs> <use x="0" y="0" xlink:href="#circles"></use> </svg> 这是一个错误吗？预期的行为？我只是不明白如何使用foreignObject（很可能）吗？ SVG 1.1 规范不允许使用直接指向foreignObject 元素。仅限“svg”、“符号”、“g”、图形元素或其他“使用”。因此，对于 SVG 1.1，您必须指向具有 <g> 元素作为子元素的 <svg> 或 <foreignObject> 元素。 SVG 2 放宽了这一要求，现在大多数浏览器可能都允许这样做。 Firefox 当然可以。

svg html5-canvas

回答 1 投票 0

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>

google-chrome canvas html5-canvas

回答 0 投票 0

在画布上图像的不透明部分周围绘制边框

我正在使用drawImage 将图像绘制到画布上。它是一个被透明像素包围的 PNG，如下所示：如何在 ca 上该图像的可见部分添加纯色边框...

javascript image canvas html5-canvas border

回答 4 投票 0

PhaserJS：在知道 x 和 y 的情况下放置精灵的视觉指南

是否有某种 Chrome 插件或移相器的东西可以让我找出我想要放置精灵的位置的 x 和 y 坐标？现在，这是一个猜谜游戏。我必须使用一个号码，

html5-canvas phaser-framework

回答 2 投票 0

将图像拖放到画布图像上

我想将文本拖放到图像上方。为此，我使用画布。我正在使用这个代码我想将文本拖放到图像上方。为此，我使用画布。我正在使用这个代码 <img id="scream" src="http://127.0.0.1/demo/images.jpg" alt="The Scream" style="display:none;" width="220" height="277"><p>Canvas:</p> <canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> var c=document.getElementById("canvas"); var ctx1=c.getContext("2d"); var img=document.getElementById("scream"); ctx1.drawImage(img,10,10); var canvas; var ctx; var x = 75; var y = 50; var dx = 5; var dy = 3; var WIDTH = 400; var HEIGHT = 300; var dragok = false, text = "Hey there im moving!", textLength = (text.length * 14)/2; function rect(x,y,w,h) { ctx.font = "14px Arial"; ctx.strokeText("Hey there im a moving!!", x, y); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; ctx.fillStyle = "#444444"; rect(x - 15, y + 15, textLength, 30); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + textLength + canvas.offsetLeft && e.pageX > x - textLength + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; 我要么能够显示图像，要么拖放文本，但我两者都想要，请帮助我哪里错了。您可以在这里查看：- http://jsfiddle.net/FWdSv/11/ 当您清除画布时，您也会清除图像。因此，简单的解决方法是在绘图函数中重新绘制图像： function draw() { clear(); ctx.drawImage(img,0,0); ctx.fillStyle = "#FAF7F8"; ctx.fillStyle = "#444444"; rect(x - 15, y + 15, textLength, 30); } 或者：您可以在画布下方显示图像，这样当您清除画布时它不会受到影响。我相信你没有抓住我的重点。我正在画布中创建一个圆形蒙版，因此片段：我没有遵循 rect(x-15, y+15, textLength, 30)。我没有这样的功能，想要使用和偏移确定我的鼠标向上事件，而不是某个固定值。

html drag-and-drop html5-canvas

回答 2 投票 0

缩放图像以适合画布

我有一个允许用户上传图像的表单。加载图像后，我们对其进行一些缩放，以减小其文件大小，然后再将其传回服务器。为此，我们计划...

javascript html canvas html5-canvas

回答 6 投票 0

仅在加载图像后渲染画布的最佳角度实践

我非常了解 Typescript/Javascript，但正在开发我的第一个 Angular 应用程序。它有一个大组件（CAD 绘图板），其中包括一些画布。图像以编程方式加载。什...

angular html5-canvas

回答 1 投票 0

在画布标签上绘制箭头

我想使用canvas标签javascript绘制一个箭头。我已经使用二次函数实现了它，但是我在计算箭头的旋转角度时遇到问题...... 任何人都知道...