Base64 图像数据不适用于 fabricjs 中的 loadfromJSON答案

【问题标题】：Base64 image data not working with loadfromJSON in fabricjsBase64 图像数据不适用于 fabricjs 中的 loadfromJSON
【发布时间】：2013-08-22 04:55:55
【问题描述】：

我正在尝试加载具有图像对象的 json 对象。图像对象具有 base 64 图像数据作为背景。但我无法加载 loadFromJSON 方法。

代码：

var jsonDataSet = '{"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":700,"height":600,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":false,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn4AAAFPCAYAAADTHsP1AAAgAElEQ…Lv/vuU1wVsyvXK+Kks1f6gffSCThZ1km3u6NFklCnFes//AbZzi+iGF3/7AAAAAElFTkSuQmCC","filters":[]}],"background":""}';

canvas.loadFromJSON (jsonDataSet);

canvas.renderAll();

它显示错误为"Error loading data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn4AAAFPCAYAAADTHsP1AAAgAElEQ…Lv/vuU1wVsyvXK+Kks1f6gffSCThZ1km3u6NFklCnFes//AbZzi+iGF3/7AAAAAElFTkSuQmCC "

【问题讨论】：

标签： javascript canvas base64 fabricjs

【解决方案1】：

如果您使用最新的 fabric.js 版本，这是一个错误。我已经通过拉取请求 #800 修复了这个问题：https://github.com/kangax/fabric.js/pull/800。

顺便说一句，您上面代码的 base64 dataURL 不正确 - 它有三个点 (lEQ…Lv/vuU)。可能是复制的副作用。

【讨论】：

非常感谢。添加了您的更改，它按预期工作。
三个点不是复制的副作用，它们实际上是由fabric.js添加的。在此处查看控制台中的输出：jsfiddle.net/h9q6Lorg
它们不是由fabric.js 添加的。这是 chrome devtools (code.google.com/p/chromium/issues/detail?id=464560) 中 console.log 的错误/限制。 jsfiddle.net/devxyrro
是的，你是对的。我不知道这个 chrome devtools 限制。谢谢你的解释。