背景 首先，说说文章的背景。近期手中的一个项目，因为需求中要求提供Web界面的打印功能。当然假设没有打印机，还能够提供保存到本地。项目组长把这个“小任务”分给了我。...组件 组件名称：Lodop（提供下载） 须要引入的文件：lodop.cab（自己制作的）、LodopFuncs.js（必须的）、install_lodop32.exe（可选的，官方提供的exe格式插件）...然后是保存功能 html 代码同样，这里就不再反复贴了 js 代码 <span style="font-family:Microsoft YaHei;font-size:12px;"...ActiveXObject("Word.Application"); // 打开已有模板 // var doc = word.documents.open(""); // 不打开模板直接增加内容...就能够保存到word中了。 结束语 怎么样，非常easy吧！web 页面打印指定内容事实上就这么简单。 仅仅要找对好的工具，什么都不它是一个事！
用法 paper.fitToContent({ padding: 20, // 内容周围留白大小 allowNewOrigin: 'any' // 注意此配置如果不填，padding的top
使用 canvas 开发的项目，滚轮缩放画布的需求应该不算少数，比如地图。 Fabric.js 也提供了缩放画布的功能，本文主要讲解设置画布大小的几种方法。 动手实现 在动手前先查查文档。...我把和本文相关的文档放在这 mouse:wheel：滚轮事件 getZoom：获取画布当前缩放级别 setZoom：设置画布缩放级别 zoomToPoint：设置画布缩放比例及缩放原点 其中 setZoom...-- 引入 Fabric.js --> ...getZoom 可以获取画布当前缩放级别，用 setZoom 设置一个新的缩放级别。 所以我在页面上再加2个按钮，一个放大，一个缩小。...zoomToPoint 可以理解为 setZoom 的增强版，第一个参数是原点坐标，本例传入鼠标当前所在的坐标；第二个参数是缩放级别。 代码仓库 ⭐Fabric 滚轮缩放画布
本文简介 点赞 + 关注 + 收藏 = 学会了 使用 fabric.js 创建出来的画布默认是不能拖拽移动的。...不过我们可以利用一些小技巧让画布具有被拖拽的能力，fabric.js 官网也提供了一个 demo ，但文档上并没有详细的讲解拖拽画布的实现原理。 本文就粗略分析一下这个原理。.../js/fabric.js"> // 创建画布 let canvas = new fabric.Canvas('c', { allowTouchScrolling...viewportTransform 是 fabric.js 在画布上的一个属性。...以上就是在 fabric.js 中拖拽画布的方法。 代码仓库 ⭐拖拽移动画布
本文简介 点赞 + 关注 + 收藏 = 学会了 我们可以在 Canvas 上绘制图形，同样也可以将画布上的所有内容都清空掉。...本文主要聊聊： 在 fabric.js 中如何清空画布； 和原生 canvas 对比，fabric.js 到底有多方便； 销毁 fabrci.js 创建的画布； 把 canvas 元素也销毁掉； 原生...但没关系，本文不是讲原生 canvas 的，如果想入门 canvas 可以移步到 《Canvas 从入门到劝朋友放弃（图解版）》 fabric.js清空画布：clear fabric.js 提供了 clear...使用 clear 方法只会清空画布上的内容，并不会销毁画布。 可以看到清空画布后，fabric.js 的默认操作还是在的（可以框选），这证明画布只是被清空了，并没有被销毁。...销毁 fabric 实例：dispose 除了使用 clear 方法清空画布外，fabric.js 还提供了另一个更强的方法：dispose dispose 方法可以把 fabric.js 创建出来的实例销毁掉
本文简介 学习 Fabric.js，我的建议是看文档不如看 demo。 本文实现的功能：将元素拖进到画布中并生成对应的图形或图片。...解2：Fabric.js 创建元素可看 《Fabric.js 从入门到膨胀》的基础图形篇，要创建图片可以看 图片篇。 解3：缩放画布我在 《Fabric.js 缩放画布》 里讲解过。...解4：移动画布我在 《Fabric.js 拖拽平移画布》 里讲解过。 解5：画布的左上角不一定在body的左上角，也就是鼠标当前位置可能和画布对应的坐标不一样，需要通过加减法计算一下。...解6：Fabric.js 提供了一个方法可以将鼠标当前坐标转换为画布对应的真实坐标，这个方法叫 restorePointerVpt 。 动手 我分几个步骤慢慢实现上述功能。...) }) } initCanvas() 上面的代码使用了 Fabric.js 绑定了页面上的画布，并创造了一个粉红色的矩形。
分析 要实现上图的效果，需要考虑2中情况： 【情况1】元素的左边和上边不能超出画布的左边和上边。 【情况2】元素的右边和下边不能超出画布的右边和下边。...这两句话看上去很像一句话，但其实真实情况是有点不一样的。 元素的坐标和画布的坐标，都是以左上角为原点。所以【情况1】只需考虑元素的 xy坐标 有没有超过画布的左边和上边。...【情况2】是用元素右边和下边跟画布做比较，而元素的原点是在元素的左上角，所以元素的右边是 元素原点x坐标 + 元素的宽度 ，元素的下边是 元素原点y坐标 + 元素的高度 。...最后得出的公式： 【公式1】超出画布左边：图形左上方x坐标 < 画布左上方x坐标，将图形的 left 设置成画布左上方x坐标的值。...【公式2】超出画布上边：图形左上方y坐标 < 画布左上方y坐标，将图形的 top 设置成画布左上方y坐标的值。
Fiddler抓取内容自动保存本地 一.点击FidderScript 二.选择你想要的获得内容的方法 OnBeforeRequest:发送请求后 OnBeforeResponse:获得响应 三.修改js...代码在对应的方法函数内 只是其中一段举例 //oSession.host 请求的host //oSession.url.Contains 请求host之后的字段 if(oSession.host ==...var logContent = oSession.GetResponseBodyAsString(); //oSession.GetResponseBodyAsString()获取相应内容字符串...// 修改session中的显示样式 oSession["ui-color"] = "orange"; // 移除http头部中的MQB-X5-Referer字段 oSession.oRequest.headers.Remove...("MQB-X5-Referer"); // 修改http头部中的Cache-Control字段 oSession.oRequest["Cache-Control"] = "no-cache";
本文简介 点赞 + 关注 + 收藏 = 学会了 在 《Fabric.js 使用纯色遮挡画布（前景色）》 中讲到使用纯色的方式遮盖画布。...如果你的常见需要使用图片来遮盖的话，fabric.js 也提供了相应的属性来配置。 相比起使用纯色遮盖画布，使用图片会更复杂。 因为图片本身是有尺寸大小的，所以可能会遇到缩放画布、平移画布等操作。...使用图片覆盖画布 如果需要用图片遮盖画布，可以设置 canvas 的 overlayImage 属性，传入的值就是图片地址。 可以使用网图，也可以使用本地图片。...覆盖图像不受视口变换的影响 由于图片是有尺寸的，如果你的场景中，画布可以缩放或者被拖拽，就会出现下图的效果。 覆盖的图片被缩小或者移动后，就露出了背景色（红色）。...canvas.isDragging = false }) 感觉这和 《Fabric.js 锁定背景图，不受缩放和拖拽的影响》 里讲到的有点像，对吧~ 所以当看到 fabric.js
使用js将图片拷贝进画布 //将图片对象转化为画布，返回画布 function ImageToCanvas(image) { var canvas = document.createElement("...image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点...，图片将会拷贝到这个地方 return canvas; } 使用js将画布转化为图片 //将画布转化为图片 function canvasToImage(canvas) { var image =...new Image(); image.src = canvas.toDataURL("image/png"); //在此处也可以使用js的appendChild()方法将此img加入html页面
大家好，又见面了，我是你们的朋友全栈君。...1.进入文件 vim 文件名（vim test.txt） 2.编辑完成之后，按ESC键 跳到命令模式（命令前面冒号是必要的）： :w 保存文件但不退出vi :w file 将修改另外保存到...强制保存，不推出vi :wq 保存文件并退出vi :wq! 强制保存文件，并退出vi :q 不保存文件，退出vi :q! 不保存文件，强制退出vi :e!...放弃所有修改，从上次保存文件开始再编辑 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164468.html原文链接：https://javaforall.cn
本文简介 使用 Fabric.js 创建画布时，可以在参数里配置画布的宽高。 除了初始化时设置之外，Fabric.js 还提供了其他 api 供后期修改画布宽高。...本文列举了 Fabric.js 的3个 api 设置画布宽高。 这3个 api 虽然简单，但在实际开发中可能很重要。比如监听浏览器窗口缩放，动态调整画布的宽高。...如果想入门 Fabric.js 可以看 《Fabric.js从入门到膨胀》 环境说明 Chrome浏览器版本：96.0.4664.45 Fabric.js版本：4.6.0 我是在原生环境下开发的，同时也提供了一份...Vue3 环境下开发的代码（文末有链接）。.../460/fabric.min.js"> let canvas = null // 设置画布宽度 function setWidth(width) {
本文简介 点赞 + 关注 + 收藏 = 学会了 如果要覆盖 canvas 里的所有内容你会用什么方法？ 清空画布内容？ 直接移除 canvas 元素？ 创建一个新元素放在 canvas 的上一层？...如果你的项目使用到 fabric.js ，可以直接使用 fabric.js 提供的方法去遮盖画布，而且用法非常简单。...移除覆盖层 在某些应用场景（比如游戏）需要提前把画布加载出来，但用户在某一时刻还没权限查看画布内容时，就可以使用 overlayColor 将画布遮盖起来。...还是上面有矩形的例子。 从图中可以看到鼠标指针的变化，可以判断出画布上的矩形仍然能被操作。...代码仓库 ⭐ Fabric.js 使用纯色遮盖画布 ⭐ Fabric.js setOverlayColor
画布裁剪：矩形裁剪、圆角矩形裁剪、路径裁剪。 ---- 一、画布变换和状态 画布变换主要通过一个 4*4 的变换矩阵。其中transform方法是最核心的，也是最难用的。...当使用 canvas.save() 时，当前画布的状态就会被保存，当执行 canvas.restore() 时，画布就会回到上次保存的状态。...比如：在上面画横线前save画布这时画布的[顶点在屏幕中心]，画横线的过程中画布的顶点被[下移到了最后]。 画完后restore画布，就能让画布顶点重新回到[屏幕中心]。...下面是本节要绘制的内容，源码位置：p03_canvas/05_like_rect/paper.dart Screenshot_1603935956 ---- 【1】 绘制矩形 drawRect 下面是矩形的五种构造方法...: image-20201031153932161 1、矩形裁剪: 指定一个矩形，画布在之后的绘制中仅保留矩形内的内容 。
很多同学网站都在用静态博客,安全轻量的同时也带来了些许麻烦,正如首图中那样,站点被别人全盘撸走,反而比自己文章关键字还高.自己辛辛苦苦的耕耘变成了别人的果实…所以本文提供一下通过JS手段防止网站被扒皮的手段...,这条思路并不可取… (亦或者静态资源也被别人扒走了) 就是使用JS啦, 例如 如下代码: //这里的放到最开头 一加载页面就运行这个....let whitelist=['huai.pub','127.0.0.1','localhost','']; //host白名单;空的话,为以file类型打开,是为了防止保存到本地调试,如果不担心此条...把上面部分放到一个不得不运行且打开页面就运行的JS里面(不建议放到公共资源部分,比如 jQuery之类的 )…当然 需要按照注释修改为自己的参数; 之后将这条JS 加密 然后将第二部分放到页面底部的JS...中,同时也加密后再引入(siteprotect变量可以改名 且改掉值,最好使用随机值) 重要的是 JS一定要加密 且放到对站点效果影响大的JS中… 这样就算被别人恶意保存,基本也不会有大的问题了
精益画布 [小商家版精益画布] 产品原型设计 经过对比分析，决定通过墨刀来进行产品原型设计，目前免费。...“解决方案”尤其热心）； 你的任务并不只是提供解决方案，而是形成一套完整的商业模式； 对于大部分创业公司来说，怕只怕做出的东西根本无人想要；思考下面3个问题： 你的解决方案是否是客户想要的？...独特卖点的设计公式：直白清晰的头条=客户想要的结果+限定的时间期限+做不到怎么办； 海盗指标组： 获取 （用户怎么找到你？） 激活 （用户的第一印象极好吗？） 留客 （有没有回头客？）...专注+调研-速度：资源耗尽 可证伪的假设=具体并且可重复的动作可以导致预期的可评估的目标或结果 系统地解决风险：1....：增加活动抽奖竞品分析，补充独特卖点，修改解决方案、客户群体分类部分内容 2019/7/30：初稿
相关参考文章: python-鼠标拖拽 Python时间sleep()方法 如何获取电脑桌面坐标,如何获取屏幕位置 超简单 ImageGrab.grab()方法截图之后，图片如何保存在指定路径...a version that satisfies the requirement 安装包名字 (from versions: ) ---- 在微信小程序中拖动鼠标完成翻页功能，翻一页截一张图，并保存在本地...cut_save(save_dir,target_nums): # 获取窗口坐标 & 句柄 (x1, y1, x2, y2), handle = get_window_pos('要截取的窗口的窗口标题...') # 发送还原最小化窗口的信息 win32gui.SendMessage(handle, win32con.WM_SYSCOMMAND, win32con.SC_RESTORE, 0...，截取数量 cut_save(r'保存路径',截取数量) ----
name 文件名 data 数据 type mime类型 saveAs: function (name, data, type) { const ele...
---- 本文介绍 我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。...如果本文内容对你有所帮助，也请你帮我点个赞呗~ 原生操作 通过 获取图片路径，会受到浏览器安全策略影响，所以需要处理一下。...-- 引入fabric.js --> ...，上面两种情况出现的概率应该不多（除非你的后端伙伴是个懒人） 先说说上面两种情况存在的问题： 图片路径是本地地址，保存到服务器是没意义的。...在正式项目中，你可能还要考虑到背景图的大小和画布大小不匹配问题。 你可以参考 《Fabric.js 从入门到膨胀》 中 “拉伸背景图” 这小节。
掌握JS操作符的目的是为了能够灵活的操作变量，以便完成JS的各种逻辑处理；掌握数据类型转换可以让我们避免一些不该发生的问题，能够让我们更好的完成JS的各种功能。...而今天我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式。 Tips：由于上一期的文章篇幅过长，微信的文章有字数要求，所以小编把部分的内容（操作符）放到这一期进行讲解。...基础算是告一段落了，希望大家能把JS基础打扎实，它直接影响着后期JS的学习。...3 获取/设置标签的内容 现在可以利用JS来控制标签的样式，能否利用JS控制标签的内容？当然可以，我们可以使用innerHTML属性实现修改或获取标签中的内容。...，为实现动态的交互效果打下一定的基础； 掌握操作标签的内容目的在于能够灵活的操作标签的内容，能够更好的辅助页面交互效果的实现。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
