草庐IT

HTML2Canvas

全部标签

javascript - React 16.3 中从 Prop 更新 Canvas 的正确生命周期方法是什么?

我有一个Canvas组件,大致如下所示:classCanvasextendsReact.Component{saveRef=node=>{this._canvas=node;}shouldComponentUpdate(){/*Iwillneverre-renderthiscomponent*/returnfalse;}componentWillReceiveProps(nextProps){/*HereIdomanipulationswiththis._ctx,whennewpropscome*/}render(){return();}componentDidMount(){this

javascript - 生成一个 div 的图像并另存为

我想创建一个输入按钮“保存图像”:截屏一个div要求在用户的计算机上“另存为”我找到了如何使用html2canvas创建潜水屏幕并在新选项卡中打开它,它工作得很好:functionprintDiv2(div){html2canvas((div),{onrendered:function(canvas){varimg=canvas.toDataURL();window.open(img);}});}但是对于你来说,另存为部分是一个困难的部分......我发现了一些有趣的话题,因为我是JS(和对象)编码的新手,我有点困惑......我想我必须使用FileSaver.js并创建一个新的blo

javascript - 使用 JavaScript 调整图像大小以在 Canvas 中使用 createPattern

我见过一些关于如何调整图像大小的技巧在IMG标签中使用,但我想在里面有一个图像变量一个Javascript,调整它的大小,然后使用里面的图像context.createPattern(图像,“重复”)。我还没有找到任何提示关于如何做到这一点。您可以在http://karllarsson.batcave.net/moon.html找到功能演示用图片说明我想做什么。Loktar的解决方案看起来不错。我还没来得及修复正确的方面,但现在我知道该怎么做了。再一次谢谢你。这是一个工作演示http://karllarsson.batcave.net/moon2.html这是我没有按照我的意愿工作的两

javascript - 将 JSON 转换为 HTML 树

我想从下面的JSON示例生成一个HTML树(最好是UL-LI)。有没有人有可以处理这种特定结构的简单、递归JS函数(不是框架)?感谢您的帮助!{"folder":[{"title":"1","folder":[{"title":"1.1","folder":[{"title":"1.1.1",},{"title":"1.1.2",}]}]},{"title":"2",}]} 最佳答案 functionto_ul(obj){//--------vcreateanelementvarf,li,ul=document.createElem

javascript - 如何将 QuillJS 富文本输出呈现为 HTML

我有点卡住了,我正在使用QuillJS编辑器,现在我需要在html文档和可能的PDF文档中呈现编辑器的输出(HTML是优先事项)我将如何呈现这样的输出:{"ops":[{"attributes":{"bold":true},"insert":"TestPost"},{"insert":"\n\nThisisatestpost.\n"}]}我环顾四周,但似乎无法找出如何做到这一点。我希望有人能提供帮助。谢谢! 最佳答案 editor.root.innerHTML您需要为其设置样式。从那里您可以使用jsPDF或类似的东西导出到PDF或将

javascript - 在 AngularJS 1.2 中启用 HTML 5 模式

我正在开发一个需要使用HTML5模式的应用程序。由于我正在迁移现有站点以使用AngularJS1.2,因此我的URL中不能有“#”标记。目前,我有以下内容:angular.module('myApp',['ngRoute']).config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){$locationProvider.html5Mode(true);$routeProvider.when("/home",{templateUrl:'home.html',control

javascript - .clone() 和 .html() 有什么区别?

Jquery的.clone()和.html()函数有什么区别?Jquery文档指出:The.clone()methodperformsadeepcopyofthesetofmatchedelements,meaningthatitcopiesthematchedelementsaswellasalloftheirdescendantelementsandtextnodes.InanHTMLdocument,.html()canbeusedtogetthecontentsofanyelement.Iftheselectorexpressionmatchesmorethanoneeleme

javascript - 如何获取组中对象的 Canvas 相对位置?

通常一个对象相对于Canvas的位置可以从它的.left和.top属性得到,但是如果对象在一个选择/组。有没有办法获得它们相对于Canvas的位置? 最佳答案 当对象在组内时,其相对于Canvas的坐标将取决于组的原点(以及对象的原点)。假设我们有这段代码,其中添加了一个矩形和一个圆圈。varcanvas=newfabric.Canvas(document.getElementById('c'));varrect=newfabric.Rect({width:100,height:100,left:50,top:50,fill:'rg

javascript - 使用 fabric js 获取 Canvas 对象

我正在使用Fabric.js并在一个地方创建了一个织物Canvas对象。varx=newfabric.Canvas("mycanvas");现在在另一个地方,我想访问这个“x”不可用的对象。那么我怎样才能得到相同的织物Canvas对象。我不想更改x的范围或将x作为参数传递。另外,如何从fabriccanvas对象获取toDataURL? 最佳答案 假设mycanvas是Canvas元素的ID,您可以将对fabric对象的引用存储在Canvas元素本身上:varx=newfabric.Canvas("mycanvas");docume

javascript - 使用 Html.BeginCollectionItem 帮助程序传递集合的分部 View

我做了一个小项目来理解StephenMuecke在这里的回答:SubmitsamePartialViewcalledmultipletimesdatatocontroller?几乎一切正常。javascript从局部View添加新字段,我可以通过局部View的Controller方法插入的“temp”值知道它们绑定(bind)到模型。但是,当我提交新字段时,AddRecord()方法抛出一个异常,表明模型没有被传入(“对象引用未设置为对象的实例”)。另外,当我查看页面源代码时,BeginCollectionItem帮助器插入一个隐藏标签,因为它应该围绕主视图中显示预先存在的记录的表格,