首页 文章
  • 0 votes
     answers
     views

    使用fabric js在shopify中将Canvas导出到Image(使用toDataUrl)

    我正在开发一个shopify应用程序,用于自定义产品,我使用fabric.js来操作不同的画布对象,最后,我想要的是从画布导出自定义图像 . 但是我面临的问题是,当我使用 canvas.toDataURL("image/jpeg") 时,它会给我这个错误: SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染...
  • 2 votes
     answers
     views

    KineticJS是否有SVG的库支持?

    我一直在寻找FabricJS和KineticJS作为我正在进行的项目的潜在解决方案,并且像FabricJS对SVG的库级支持一样 . 然而,它缺乏缩放和平移功能让我想要更多 . 出于这个原因,我开始(再次)在KineticJS上寻找 . 我在KineticJS文档中没有看到有关SVG支持的内容,我想知道是否有人可以告诉我KineticJS是否支持渲染SVG图像作为其框架的一部分 . 我假设就Kin...
  • 0 votes
     answers
     views

    设置背景图像中的CORS问题

    我使用以下代码将图像设置为背景图像: var img = new Image(); img.src = "<%=@templates[0][1]%>"; img.crossOrigin = "anonymous"; img.onload = function(){ canvas.setBackgroundIm...
  • 1 votes
     answers
     views

    Multiple Drag将多个元素拖放到canvas元素中

    我的项目的一部分是将多个图像从div元素拖放到画布中,图像是.svg类型,我使用库fabric.js来渲染这些图像 . 我面临的问题是文件不会多次掉入画布 . 每个级别的警报显示,尽管拖动函数被调用两次,但函数丢弃仅被调用一次 . 这是javascript代码的一部分: var object = new Image(); function allowDrop(ev) { ev.preve...
  • 1 votes
     answers
     views

    FabricJS支持哪些类型的SVG文件?

    我使用以下代码通过FabricJS将SVG文件添加到画布: fabric.loadSVGFromURL(stampURL, function (objects, options) { var obj = fabric.util.groupSVGElements(objects, options); obj.set({ fill: stampColor, ...
  • 1 votes
     answers
     views

    Fabric.js:如何将滤镜应用于整个画布?

    虽然我已经看到了几种将滤镜应用于图像的方法,但我还没有看到任何将布料滤镜应用于整个画布的方法 . http://fabricjs.com/fabric-intro-part-2/的图像过滤功能示例 fabric.Image.fromURL('pug.jpg', function(img) { // add filter img.filters.push(new fabric.Image....
  • 0 votes
     answers
     views

    fabric js object transformMatrix roundingBox

    当我在画布中添加图像并对图像执行transformMatrix时,roundingBox会移位 . 看看我的jsfiddle:http://jsfiddle.net/ULsr4/2/ canvas = this .__ canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('_ http://icons.iconarchive.com...
  • 1 votes
     answers
     views

    使用一个画布上的过滤器复制图像并粘贴到其他画布

    我正在使用Fabric库在画布上绘制不同的对象,对于某些图像,我需要提供效果和过滤器,所以我使用的是Caman库 . 我在弹出窗口中提供效果和过滤功能,我添加了另一个画布并获取所选图像的URL,但在通过Caman librray对图像应用效果后,我需要将该图像放回主画布 . 但问题是,我需要放回具有相同尺寸且没有分辨率损失的图像 . 请帮助我这方面 .
  • 2 votes
     answers
     views

    剪切区域角度未反映

    我有一个面板用于使用canvas fabric js创建一些东西 . Canvas有许多占位符,如矩形,我想在该特定区域添加图像 . 我正在修剪该区域,以便图像不会离开该区域 . 现在一切正常,除了剪切区域没有使用画布实例设置角度(旋转不起作用) . 这是我的代码: var clipByName = function(bindClip){ this.setCoords(); var clipRe...
  • -2 votes
     answers
     views

    我们如何在使用结构Js在画布上应用的php中对图像进行相同的操作(缩放和旋转)?

    我已经将一个图像(已调整大小的图像)添加到画布并对其应用了缩放和旋转操作 . 画布宽度为380px,高度为217.143px . 情况1) . 仅应用缩放后的Json: [{"objects":[{"type":"image","originX":"left","originY"...
  • 1 votes
     answers
     views

    Fabric.js BlendColor图像过滤器

    我无法在Fabric.js中更改画布上的小png的颜色 . 在我的研究中,我发现我可以使用 new fabric.Image.filters.Tint() 以我想要的方式修改图像的颜色 . 但是,Fabric的v2中没有 Tint() 构造函数 . 根据this page, Tint() 现在是 BlendColor() 过滤器的一部分 . 我已经用 BlendColor() 尝试了各种各样的东西...
  • 1 votes
     answers
     views

    Fabricjs并没有加载画布

    我在fabricjs中遇到canvas.loadFromDatalessJSON(savedDataDLJSON)的问题 . 当我的画布与我的简单矩形一切都很好,但当我添加img(简单图像),画布不想加载(矩形和图像),我没有任何错误 . 所以我显示了json,我认为它是正常的,我将src更改为'my_link_to_image'但是图像src是正确的 . {"objects"...
  • 1 votes
     answers
     views

    使用fabric js在画布上两次鼠标单击之间绘制矩形

    我是织物js的初学者 . 我想在具有背景图像的画布上绘制一个矩形 . 用户在画布上向下鼠标时第一次进行协调,然后用户鼠标向上然后再次按下鼠标时,应在这些点之间绘制矩形,这些点是左上角点和右下角点 . 我很困惑如何做到这一点 . 我正在分享我用于绘制画布和设置背景图像的代码,它也绘制和排列 . <html lang="en" > <head> &l...
  • 0 votes
     answers
     views

    Fabric Canvas重置所有对象和鼠标事件

    我使用织物画布在两次鼠标点击上绘制矩形 . 我正在使用Angular.js和fabric.When我登录到应用程序后,两次鼠标点击后矩形绘制位置发生了变化 . 我完全不知道如何重置和刷新fabric js canvas . 对于任何疑问,请参阅我以前的问题,包括代
  • 2 votes
     answers
     views

    画布png不工作fabricjs

    这是我使用FabricJS将canavs导出到Image的代码: $("#canvas2png").click(function(){ canvas.isDrawingMode = false; if(!window.localStorage){alert("This function is not supported by your browser...
  • 1 votes
     answers
     views

    Fabric.js - 组位错误

    我想在我的画布上添加箭头 - 用户点击画布,织物画线三角形 . 然后,当用户移动鼠标线“移动”并且箭头角度改变时 . 鼠标移动时“绘图模式”结束 . 这很有效,但位置和选择区域是错误的 . 我写的是鼠标:向下: // Draw new arrow using move canvas.fabric.on('mouse:down', function(options){ $...
  • 3 votes
     answers
     views

    Fabricjs可以防止画布边界外的自由绘制

    如何防止用户在自由绘制模式下在画布外绘图 . 用户无法从外部开始绘制,但可以从内部开始绘制并将鼠标拖到画布外部,然后返回内部并释放鼠标按钮 . 部分线将绘制在画布之外 . 当鼠标移到画布外时,如何告诉布料停止绘图? 我试过这个: _onMouseOut(e) { if(this.canvas.isDrawingMode) { this.canvas.trigger('mouse:up'...
  • 1 votes
     answers
     views

    Fabric JS Angular2:在自由绘图模式下鼠标向上移动的对象

    我在使用FabricJS和Angular2时面临一个问题,在自由绘图模式下,无论我绘制的对象最终都会向左或向上移动 . 例如,我开始在画布上绘制这条垂直线:See the location of the line during mouse down 当我完成后,结果行最终向上移动,如下图所示:After mouse up, the line shifted to left 我通过谷歌搜索,但似乎很...
  • 4 votes
     answers
     views

    FabricJS - 从JSON加载Canvas时出错

    我在我的画布中使用从 fabric.Image 扩展的自定义对象,如this answer中所示 . 当我从服务器检索json字符串时,在尝试将其加载到画布时出现奇怪的错误: var canvas = new fabric.Canvsd(); function loadCanvas(resp) { // response object contains a data field // t...
  • 2 votes
     answers
     views

    从Fabric.js中的JSON加载加载默认属性

    我有画布,其中包含 centeredRotation:true 的对象和其他对象 selectable:false 当我将此画布转换为JSON并重新加载它时 . 对象具有默认属性 . 即没有居中的旋转和物体是可选择的 . 我可以知道为什么会这样吗?显然,像centralRotation,selectable这样的属性不包含在JSON中 . {“type”:“rect”,“originX”:“le...
  • 2 votes
     answers
     views

    使用fabricjs 1.5.0时画布中的模糊图像

    这是我在Cordova应用程序中使用fabricjs时的代码 function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; capturePhoto(); canvas = n...
  • 1 votes
     answers
     views

    在画布FabricJS中上传backgorund图像

    如何使用输入类型文件从本地上传FabricJS Canvas中的背景图像 . 我有图像代码我可以使用此代码也用于背景图像: var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); function handle...
  • 0 votes
     answers
     views

    FabricJS画布到图像问题

    我在我的项目中使用了Fabricjs . 如果我在画布上绘制一些东西,它在将它们转换为 dataurl 时工作正常 . 但是当我绘制任何图像并将它们转换为 dataurl 时,它无法正常工作 . 任何人都可以帮助这个 . 这是我的代码: 从json加载画布: CANVASOBJ.canvas.loadFromJSON(CANVASOBJ.canJson.items[k].data, CANVASO...
  • 0 votes
     answers
     views

    fabricJS - 自定义对象未在画布上绘制

    我正在尝试使用fabricJS中的自定义对象 . 我是从自己画的一条线开始的 . 我知道已有一个对象,但我想了解背后会发生什么以及我可以在多大程度上修改内容 . 所以,我在开始时使用了一条简单的线条,但无论如何它都没有画在画布上 . 看起来 _render 函数没有被调用,而 initialize 工作正常 . 你能告诉我我的代码有什么问题吗? JSFiddle fabric.CustomLine...
  • 0 votes
     answers
     views

    FabricJS 2 - 将画布序列化为JSON

    我将我的画布序列化为JSON并面临两个问题: 我的画布的宽度和高度不会被序列化,但我需要它 . 虽然将纯色和作为画布背景的图像序列化,但不会序列化作为背景的渐变 . 我正在创建我的背景渐变: $scope.addGradient = function (left, right) { var leftColor = document.getElementById('gradLeft').va...
  • 3 votes
     answers
     views

    将fabricjs canvas转换为base64图像

    我正在尝试将画布作为图像发送到我的服务器,我想发送为base64 . Fabricjs提供使用 canvas.toSVG() 或 canvas.toDataURL({format: 'image/png'}) 将画布转换为图像,但是我日志中的输出似乎是Klass对象(第一次看到它),并且在将该对象发送到服务器并记录服务器上收到的内容后,我得到一个空的对象或路径即: { version: '2.0...
  • 1 votes
     answers
     views

    Fabricjs - 图像applyFilters很慢,并且在loadFromJSON之后它修复了

    我使用fabricjs的image.applyFilters功能 . 当我第一次在画布上加载图像并应用图像过滤器时,浏览器会阻塞几秒钟,特别是对于大于2 MB的大尺寸图像 . 但是,当我清除canvas并使用loadFromJSON加载它时,问题得到解决,图像过滤器开始正常工作而不会阻塞浏览器 . 是关于fabricjs还是我的代码,我无法弄明白 . 我会帮助你 .
  • 7 votes
     answers
     views

    Fabricjs画布在缩放后重置

    我有一个fabricjs画布,我需要能够放大和缩小,并且还可以多次更改图像/对象 . 为此我在第一次加载页面时设置了画布,如下所示: fabric.Object.prototype.hasBorders = false; fabric.Object.prototype.hasControls = false; canvas = new fabric.Canvas('my_canvas', {re...
  • 2 votes
     answers
     views

    将过滤器应用于从json加载的图像

    我需要一些帮助 . 我有一个String JSON,它包含FabricJS的图像对象的结构,而不是包含过滤器 . 我想在画布中加载图像时应用这些过滤器 . 我怎么能这样做? "1": { "type": "image", "originX": "left", ...
  • 0 votes
     answers
     views

    FabricJS loadFromJSON() - 有没有办法忽略无法找到其源代码的图像?

    有没有办法在loadFromJSON()导入期间忽略图像(或基本上任何导致错误的其他对象)? 我的canvas项目作为JSON对象保存在数据库中 . 其中一些项目从用户上传的图像库中添加了图像 . 问题是,如果库中的一个图像被删除,整个项目将不会被加载,所以我正在寻找一种方法将其余的对象加载到画布中并忽略那些无法加载的对象 . Edit: 在尝试将此问题添加到jsfiddle后,我意识到仅仅在图像...

热门问题