草庐IT

canvas_size

全部标签

javascript - react ,未捕获的范围错误 : Maximum call stack size exceeded

我正在做React,基本上我想制作一个带有工具提示的按钮,现在我正在制作工具提示。我正在更改css显示属性,以便在鼠标进入和离开期间使其可见或不可见。但是出现错误,我不知道该怎么办...这是我的代码:importReactfrom'react';importReactDOMfrom'react-dom';importStylefrom'style-it';varInk=require('react-ink');importFontIconfrom'../FontIcon/FontIcon';varIconButton=React.createClass({getInitialState

javascript - canvas.getContext() 不是函数

目前正在研究如何将Coldfusion与Canvas进行交互。目前,由于javascript错误“canvas.getContext('2d');不是函数”,我被卡住了。Canvas必须位于div内:这是用来生成图片的javascriptvarcanvas=$('#svgbasics').svg('get').toSVG();varcontext=canvas.getContext('2d');varstrDataURI=canvas.toDataURL();Canvas2Image.saveAsPNG(canvas);项目的附加信息(如果需要):使用了以下库:1.7.2/jquery

javascript - 使用 fabric js 调整 Canvas 大小

这个问题在这里已经有了答案:CanvaswidthandheightinHTML5(3个答案)关闭8年前。该应用程序允许用户保存设计并发布,以便其他用户稍后查看。原始Canvas以width=700和height=600的比例保存。但是在显示Canvas时,我想调整Canvas的大小以适应(350,300)的尺寸。原来的一半。但是,如果我直接应用这些尺寸并加载宽度setWidth()和setHeight(),它会以原始比例加载。我只想显示新尺寸的Canvas。

javascript - 从视频帧在 Canvas 中绘制图像改变色调

我写了一个简单的脚本,从视频中提取一帧并将其绘制到Canvas上。我的问题是视频和绘制图像之间的颜色在变化。我将结果放在原始结果旁边,以便于查看。原来的在左边。顺便说一句,它在chrome浏览器上似乎更明显。我在OSX上进行的所有测试。这里是一个片段,左边是Canvas,右边是视频://Getourmaskimagevarcanvas=document.querySelector(".canvas");varvideo=document.querySelector(".video");varctx=canvas.getContext('2d');functiondrawMaskedVi

javascript - 为什么 'file.size'需要很多时间,如何减少时间?

我正在制作一个处理被拖到应用程序中的歌曲的应用程序。当我使用file.size获取文件大小时,获取该值大约需要1500毫秒(平均)。有没有更快的方法?我理解为什么这需要时间(和内存),但由于我是处理HTML5文件的新手,也许有一些我不知道的东西可以使这个过程更快。文件系统API也是如此。如果我通过它调用文件并调用file.size,则需要类似的时间。PS我是通过在我的代码中添加console.time()得出这个结论的。这是代码(大量精简)fileSystem.root.getFile(id,{},function(fileEntry){fileEntry.file(function(

javascript - Canvas 和 requestAnimationFrame 的高 CPU 使用率

我在递归调用requestAnimationFrame时遇到高CPU使用率(30到40%),有没有人有降低它的好策略?简单的例子:varcanvas=document.createElement('canvas');canvas.width=100;canvas.height=20;varcanvasContext=canvas.getContext('2d');document.body.appendChild(canvas)varrafId;functiondrawLoop(time){canvasContext.clearRect(0,0,100,20);canvasContex

javascript - 使用 JavaScript 将 Canvas 转换为图像

这个问题在这里已经有了答案:Whydoescanvas.toDataURL()throwasecurityexception?(10个答案)关闭9年前。我想用JavaScript将Canvas转换为图像,当我尝试canvas.toDataURL("image/png");时出现以下错误SecurityError:Theoperationisinsecure

javascript - 使用选定的背景保存 Canvas

我正在使用Canvas,现在我可以保存到数据库中,并且可以将背景图像更改为我从图像列表中选择的图像。我的问题是,当我尝试用背景保存Canvas时,保存的图像只显示绘图但不显示图像背景...有人可以帮我解决这个问题吗?最好的问候!这里是代码:vardefaultBoard=newDrawingBoard.Board("default-board",{background:"#ffff",droppable:true,webStorage:false,enlargeYourContainer:true,addToBoard:true,stretchImg:false});defaultBo

javascript - 尝试比较两个 Canvas 元素

我使用下面的代码来比较两个Canvas元素functioncreateImage(html,can){varcanvas=$("#"+can);varctx=canvas[0].getContext("2d");vardata=""+""+""+html+""+""+"";varDOMURL=self.URL||self.webkitURL||self;varimg=newImage();img.crossOrigin='';varsvg=newBlob([data],{type:"image/svg+xml;charset=utf-8"});varurl=DOMURL.createO

javascript - Chrome Canvas 中的子像素渲染

我想知道是否有人知道是否可以在Chrome(和/或Safari)的HTML5Canvas中启用子像素渲染。Chrome在HTML中进行子像素渲染,而FF在HTML和Canvas渲染中进行。具体问题如下图: 最佳答案 简短回答:不。不可能这是让许多Canvas用户感到沮丧的两个主题之一。任何类型的亚像素渲染/抗锯齿取决于浏览器。这意味着不同的浏览器倾向于以不同的方式呈现事物。很多人都要求抗锯齿成为一个可以针对特定上下文打开或关闭的选项。还没有这样的运气。您尤其需要关注Chrome,因为它们处理亚像素渲染的方式在过去4个月内发生了巨大变