将字节转换为图像,以便在HTML5画布上绘图
有人知道我将如何转换通过Websocket(从C#应用)发送到图像的字节?然后,我想在画布上绘制图像.我可以看到两种方法: 以某种方式以字节形式在画布上绘制图像而不转换 它. 将字节转换为base64字符串以某种方式在JavaScript中 画. 这是我的功能,它接收到图形的字节: function draw(imgData) { var img=new Image(); img.onload = function() { cxt.drawImage(img, 0, 0, canvas.width, canvas.height); }; // What I was using before... img.src = "data:image/jpeg;base64,"+imgData; } 我之前已经收到已经转换为base64字符串的图像,但是在得知发送字节的尺寸较小(30%?)之后,我更愿意让此工作.我还应该提到该图像
10 2024-04-05
编程技术问答社区
在画布上为图像的非透明部分绘制边框
我正在使用drawImage在画布上绘制图像.这是一个被透明像素包围的PNG,例如: 如何在画布上的该图像的可见部分中添加固体颜色的边框?要澄清:我不想要围绕图像边界框的矩形.边界应围绕草片. 我确实考虑过使用阴影,但我真的不想要一个发光的边界,我想要一个坚实的边界. 解决方案 有点晚,但只需绘制图像偏移,它比分析边缘要快得多: var ctx = canvas.getContext('2d'), img = new Image; img.onload = draw; img.src = "https://i.stack.imgur.com/UFBxY.png"; function draw() { var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array s = 2, // thickness scale
8 2024-04-02
编程技术问答社区
HTML5画布运动模糊效果?
我正在尝试使用HTML5画布来制作类似运动模糊效果而没有成功的东西. 基本上我要做的是拍照,使其看起来像"快速转发",就像当您拍照和人移动时一样. 解决方案 有几个用于实现各种模糊算法的画布的库. easeljs 已经实现了X-和Y-Axis,并独立模糊,您可以看到在此样本中. 您可能想要的只是X轴的模糊. 其他解决方案 我到了这里遇到了相反的问题.在缩放图像时,我试图摆脱模糊.幸运的是,我的问题为您的问题提供了一个简单的解决方案.另外,繁重的举重是由API执行的,因此很有效. 如果将图像绘制到较小的分辨率画布中,然后将其缩放,则将获得模糊的图像.我已经在许多浏览器中尝试了此操作,并且似乎也可以使用. 这个问题关于跨浏览器和将来版本中这种技术的一致性. 图像参数到canvas.drawimage接受另一个画布.当您将图像绘制到中间画布上时,您可以尝试使用一个轴沿一个小分辨率.然后,将其缩放到原始大小,模糊效果应主要沿着一个轴. 我不是图像专家
16 2024-04-01
编程技术问答社区
画布在边缘上变成圆球
尝试将HTML帆布元素转换为BLOB时,在Microsoft Edge浏览器上获得异常.一切在普通浏览器上都效果很好. 例外: script438:对象不支持属性或方法'toblob' html摘要: javaScript: var files[]; var canvas = document.getElementById('cnv'); canvas.toBlob(function (blob) { files.push(blob); } }, 'image/jpeg', 1); 我调用toBlob方法时会正确地得到此例外.有什么方法可以教边缘斑点转换? 我正在使用: Microsoft Edge 41.16299.15.0
10 2024-04-01
编程技术问答社区
如何使用blobs和filesaver将Chart JS图表保存为没有黑色背景的图片?
$("#NoBidsChart").get(0).toBlob(function(value) { saveAs(value, "Summary.jpg"); }); 在这里,我正在使用图表JS(v2.5.0)进行渲染图表.当我尝试使用Canvas将图表导出到Blob Converter和FilesAver.js时,我会得到黑色背景.那么如何获得具有自定义背景颜色(最好是白色)的图像? 解决方案 如果您想要自定义的背景颜色,那么您必须用自己喜欢的颜色绘制背景,并且可以这样做,例如... var backgroundColor = 'white'; Chart.plugins.register({ beforeDraw: function(c) { var ctx = c.chart.ctx; ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, c.char
6 2024-04-01
编程技术问答社区
在Blazor Server/Hybrid中显示快速变化图像的有效方法
我正在考虑使用Blazor Hybrid重写我的应用程序.到目前为止,我喜欢生产力,但核心功能之一是图像处理. 要检查大麻混合动力车是否是有效的选项,我创建了一个示例WPF应用程序,添加了jullazor,我注意到仅绑定到标签的来源非常慢. 这是我创建的组件: @using System.Reactive.Subjects @using System.Reactive @using System.Reactive.Linq @using SkiaSharp @using MudBlazor FollowCursor Hide image with opacity Visibillity hidden
20 2024-04-01
编程技术问答社区
如何从画布上点击删除位图图像
我正在使用createjs作为我的框架.我已经在画布上放置了一个位图,并创建了一个函数来尝试删除它,但是我一直在控制台中收到一个错误消息,即未定义图像.这就是我的代码的样子: // onload=init() called in html doc function init(){ var canvas = new createjs.Stage("canvas"); // Add image to canvas image = new createjs.Bitmap("image.png"); image.x = 200; image.y = 180; image.scaleX = 0.35; image.scaleY = 0.35; canvas.addChild(image); image.addEventListener('click', pop); canvas.update(); } //remove image from canvas function pop(
18 2024-03-31
编程技术问答社区
如何在画布上将图像像素转换为)|()-曲线形状
我的图像具有以下模式: 我想将图像中的直线转换为a)|(形状.我已经使用画布及其属性实现了C型和S型曲线,但我无法做到)|(-curve. 我该怎么做? 解决方案 您可以修改上一个答案略微,将半半sin范围应用于宽度(或高度)作为偏移,然后取偏移x 2并从新线的总高度中减去. 发生的事情是SIN()函数将采用输入并产生[0.0,1.0]之间的新值.通常,您会结合sin+cos来产生一个圆,但是我们只需要一个轴的值​​,而且由于我们只需要更多的椭圆形形状,所以我们比半径较小(图像大小代表轴上的直径,您'之后). 因此,通过我在另一个答案中进行的代码进行了一些修改: 在 var ctx = c.getContext("2d"); // just some inits for demo var img = new Image; img.onload = slice; img.src = "//i.stack.imgur.com/Uv
6 2024-03-30
编程技术问答社区
弯曲的路线或路径标记的解决方案
我想为用户提供一种简单的方法,可以在地图或图片上进行视觉跟踪路线.解决方案必须让用户添加可以使用的控制点,以将弯曲放入路线. 它应该与HTML5画布一起使用 - 我当前使用Konvajs库,因此使用此功能的解决方案很好. 为了共享和学习的利益,如果您可以使用其他HTML5帆布库建议解决方案,这也很高兴. 注意:这不是提出的原始问题.但是,随着时间的流逝,这是实际的要求. OP要求使用HTML5画布中的线/曲线找到任意点部分的方法,以便在该点可以添加可拖动的控制点以编辑线/曲线.公认的答案不满足这一需求.但是,对这个原始问题的答案将涉及严重的碰撞检测数学和可能使用bezier控制点 - 换句话说,这将是一个很大的要求,而接受的答案是一个非常平易近人的解决方案,具有一致的UX. 最初的问题可以通过下面的编辑链接中看到. 解决方案 这个想法怎么样.您单击要下一个点的位置,路由线沿线段延伸,并沿线段延伸.如果需要箭头,则可以根据需要扩展此处的对象.您可以使用路由类
28 2024-03-30
编程技术问答社区
如何在HTML画布上绘制一条厚度可变的贝塞尔曲线?
我想用连接框的bezzer曲线进行可视化.更重要的边缘应该更厚.每个盒子都有一个输出,但很多输入.因此,我想保持收入边缘的厚度不变(节省空间),并仅更改外向边缘的厚度(其中只有一个盒子). 这就是为什么我要在两端绘制不同厚度不同的bezier cureves的原因.它们应在HTML帆布元素上渲染.我知道context.bezierCurveTo(),但这仅允许曲线的一个厚度. 有人可以帮我吗? 解决方案 假设您正在绘制曲线,在x1,y1和控制点1处厚2次r在x-driection中,那么您可以做以下操作: canvas.fillStyle = "red"; canvas.beginPath(); canvas.moveTo(x1, y1-r); canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2); canvas.bezierCurveTo(cpx2, cpy2, cpx1,
12 2024-03-30
编程技术问答社区
Html5画布上的虚线贝塞尔曲线
对于我的一个应用程序之一,我需要在HTML5画布中的bezier路径上绘制虚线曲线...之间的仪表长度和间隙应该是可变的...在Javafx中可以实现,请参阅此链接 ...我想使用html5 canvas实现相同的效果.我知道如何绘制虚线的直线,而不是沿着Bezier的弯曲线... 尽管我不是专家,但我知道 bezier Drawing AlgorithM 我使用此算法看到的问题是,它允许您使用范围为0到1 ... 的时间参数在bezier上识别坐标. 这是不够的,因为要画一个虚线的bezzier,我需要在主比奇的路径上绘制许多带有指定长度参数和给定间隙距离的小型beziers. Javafx必须使用一些算法.如果有人能帮助我那会很棒. 解决方案 我会假定Javafx正在使用一般技术来绘制任何虚拟曲线,并且恰好在该示例中使用它. 困难的部分是弄清楚从哪里开始并停止每个破折号,这需要知道 arc length a>沿沿着各个点的Bezier曲线. 有一种分析方
12 2024-03-30
编程技术问答社区
如何在画布上将图像像素转换成s型曲线形状
我有这样类型的图像我希望我们看到的图像中的直线(实际上是像素),它应该转换为S曲线.我已经使用画布及其属性实现了曲线的C型曲线,但无法进行S-Curve. 请帮助我. 解决方案 如果我正确理解您,您希望每条垂直线遵循" S"? 如果是这种情况,则可以使用F.Ex. Math.sin()与drawImage()及其剪辑参数结合在一起,以每个像素列切片图像,同时根据SIN()取代切片. 关键公式为: var step = Math.PI * 2 / w; 这将一个完整的圆圈映射到画布的宽度,以便在到达末端时,我们会回到起点,在这种情况下,形成S-Curve. var y = Math.sin(step * x) * scale; 这基于先前计算的步骤值计算y轴上的位移,该步骤值现在链接到x位置.这会产生-1和1之间的值,因此我们需要将其扩展.比例代表像素数的最大半径. 示例 在 var ctx = c.getContext("2
14 2024-03-30
编程技术问答社区
哪个JavaScript库可以对贝塞尔曲线进行布尔运算?
是否存在可以在路径上执行布尔操作的JavaScript库(Bezier Curves)? 我知道paper.js和raphael.js,但现在都无法执行这些动作. 解决方案 Paper.js现在具有布尔操作的核心操作: https://github.com/paperjs/paper.js/blob/master/src/path/pathitem.boolean.js ,在这里您可以看到正在行动中的操作: http://assets.paperjs.org/boolean/ 其他解决方案 如果将路径转换为多边形(例如使用PathElement.getPointAtlength()),则可以使用JavaScript Clipper,这是流行的Angus Johnson的Johnson的JavaScript端口. . 这是差异的一个示例,而且还是可能的: JavaScript快船的页面是如果GetPointAtlength()给出过多的
12 2024-03-30
编程技术问答社区
如何使用javascript HTML5画布通过N个点绘制平滑的曲线?
对于绘图应用程序,我将鼠标移动坐标保存到数组中,然后用Lineto绘制它们.结果线不平滑.如何在所有聚集点之间产生单个曲线? 我已经搜索了谷歌搜索,但是我只找到了3个用于绘制线路的功能:对于2个示例,只需使用lineTo即可.对于3个样本quadraticCurveTo,对于4个样本点,bezierCurveTo. (我尝试在数组中每4点绘制bezierCurveTo,但这会导致每4个样品扭结,而不是连续平滑的曲线.) 如何编写一个功能以绘制5个样品及以后的平滑曲线? 解决方案 将随后的样品点与"曲面"类型函数一起连接在一起的问题是,曲线相遇的地方不平滑.这是因为两条曲线共享一个终点,但受到完全不相交的控制点的影响.一种解决方案是"曲线到"接下来的两个随后的样本点之间的中点.使用这些新的插值点连接曲线可以在终点上平稳过渡(一个迭代的终点变成了下一个迭代的控制点)换句话说.现在有更多共同点. 此解决方案是从" Foundation ActionScript
12 2024-03-30
编程技术问答社区
toDataURL'的输出是base64,如何减少上传时间和带宽的1/3?
以下代码的目标是压缩输入文件(2 MB JPG文件=> 500 kb文件),然后在提交 时将其上传到服务器. 从JPG文件导入图像时" nofollow noreferrer"> toDataURL with: 在 function doit() { var file = document.getElementById('file').files[0], canvas = document.getElementById('canvas'), hidden = document.getElementById('hidden'), ctx = canvas.getContext("2d"), img = document.createElement("img"), reader = new FileReader(); reader.onload
20 2024-03-27
编程技术问答社区